'use client';

import React, { useState, useEffect } from 'react';
import { Label } from '@/components/ui/label';
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { useTheme } from '@/app/components/ThemeProvider';
import { useNavidromeConfig } from '@/app/components/NavidromeConfigContext';
import { useToast } from '@/hooks/use-toast';
import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
import { Settings, ExternalLink } from 'lucide-react';

const SettingsPage = () => {
    const { theme, setTheme } = useTheme();
    const { config, updateConfig, isConnected, testConnection, clearConfig } = useNavidromeConfig();
    const { toast } = useToast();
    const { isEnabled: isStandaloneLastFmEnabled, getCredentials, getAuthUrl, getSessionKey } = useStandaloneLastFm();
    
    const [formData, setFormData] = useState({
        serverUrl: config.serverUrl,
        username: config.username,
        password: config.password
    });
    const [isTesting, setIsTesting] = useState(false);
    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
    
    // Last.fm scrobbling settings (Navidrome integration)
    const [scrobblingEnabled, setScrobblingEnabled] = useState(() => {
        if (typeof window !== 'undefined') {
            return localStorage.getItem('lastfm-scrobbling-enabled') === 'true';
        }
        return true;
    });

    // Standalone Last.fm settings
    const [standaloneLastFmEnabled, setStandaloneLastFmEnabled] = useState(() => {
        if (typeof window !== 'undefined') {
            return localStorage.getItem('standalone-lastfm-enabled') === 'true';
        }
        return false;
    });
    
    const [lastFmCredentials, setLastFmCredentials] = useState({
        apiKey: '',
        apiSecret: '',
        sessionKey: '',
        username: ''
    });

    // Sidebar settings
    const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
        if (typeof window !== 'undefined') {
            return localStorage.getItem('sidebar-collapsed') === 'true';
        }
        return false;
    });

    // Load Last.fm credentials on mount
    useEffect(() => {
        const credentials = getCredentials();
        if (credentials) {
            setLastFmCredentials({
                apiKey: credentials.apiKey,
                apiSecret: credentials.apiSecret,
                sessionKey: credentials.sessionKey || '',
                username: credentials.username || ''
            });
        }
    }, [getCredentials]);

    const handleInputChange = (field: string, value: string) => {
        setFormData(prev => ({ ...prev, [field]: value }));
        setHasUnsavedChanges(true);
    };

    const handleTestConnection = async () => {
        if (!formData.serverUrl || !formData.username || !formData.password) {
            toast({
                title: "Missing Information",
                description: "Please fill in all fields before testing the connection.",
                variant: "destructive"
            });
            return;
        }

        setIsTesting(true);
        try {
            // Strip trailing slash from server URL before testing
            const cleanServerUrl = formData.serverUrl.replace(/\/+$/, '');
            
            const success = await testConnection({
                serverUrl: cleanServerUrl,
                username: formData.username,
                password: formData.password
            });

            if (success) {
                toast({
                    title: "Connection Successful",
                    description: "Successfully connected to Navidrome server.",
                });
            } else {
                toast({
                    title: "Connection Failed",
                    description: "Could not connect to the server. Please check your settings.",
                    variant: "destructive"
                });
            }
        } catch (error) {
            toast({
                title: "Connection Error",
                description: "An error occurred while testing the connection.",
                variant: "destructive"
            });
        } finally {
            setIsTesting(false);
        }
    };

    const handleSaveConfig = async () => {
        if (!formData.serverUrl || !formData.username || !formData.password) {
            toast({
                title: "Missing Information",
                description: "Please fill in all fields.",
                variant: "destructive"
            });
            return;
        }

        // Strip trailing slash from server URL to ensure consistency
        const cleanServerUrl = formData.serverUrl.replace(/\/+$/, '');

        updateConfig({
            serverUrl: cleanServerUrl,
            username: formData.username,
            password: formData.password
        });
        
        // Update form data to reflect the cleaned URL
        setFormData(prev => ({ ...prev, serverUrl: cleanServerUrl }));
        setHasUnsavedChanges(false);
        toast({
            title: "Settings Saved",
            description: "Navidrome configuration has been saved.",
        });
    };

    const handleClearConfig = () => {
        clearConfig();
        setFormData({
            serverUrl: '',
            username: '',
            password: ''
        });
        setHasUnsavedChanges(false);
        toast({
            title: "Configuration Cleared",
            description: "Navidrome configuration has been cleared.",
        });
    };

    const handleScrobblingToggle = (enabled: boolean) => {
        setScrobblingEnabled(enabled);
        localStorage.setItem('lastfm-scrobbling-enabled', enabled.toString());
        toast({
            title: enabled ? "Scrobbling Enabled" : "Scrobbling Disabled",
            description: enabled 
                ? "Tracks will now be scrobbled to Last.fm via Navidrome" 
                : "Last.fm scrobbling has been disabled",
        });
    };

    const handleStandaloneLastFmToggle = (enabled: boolean) => {
        setStandaloneLastFmEnabled(enabled);
        localStorage.setItem('standalone-lastfm-enabled', enabled.toString());
        toast({
            title: enabled ? "Standalone Last.fm Enabled" : "Standalone Last.fm Disabled",
            description: enabled 
                ? "Direct Last.fm integration enabled" 
                : "Standalone Last.fm integration disabled",
        });
    };

    const handleSidebarToggle = (collapsed: boolean) => {
        setSidebarCollapsed(collapsed);
        localStorage.setItem('sidebar-collapsed', collapsed.toString());
        toast({
            title: collapsed ? "Sidebar Collapsed" : "Sidebar Expanded",
            description: collapsed 
                ? "Sidebar will show only icons" 
                : "Sidebar will show full labels",
        });
        
        // Trigger a custom event to notify the sidebar component
        window.dispatchEvent(new CustomEvent('sidebar-toggle', { detail: { collapsed } }));
    };

    const handleLastFmAuth = () => {
        if (!lastFmCredentials.apiKey) {
            toast({
                title: "API Key Required",
                description: "Please enter your Last.fm API key first.",
                variant: "destructive"
            });
            return;
        }
        
        const authUrl = getAuthUrl(lastFmCredentials.apiKey);
        window.open(authUrl, '_blank');
        
        toast({
            title: "Last.fm Authorization",
            description: "Please authorize the application in the opened window and return here.",
        });
    };

    const handleLastFmCredentialsSave = () => {
        if (!lastFmCredentials.apiKey || !lastFmCredentials.apiSecret) {
            toast({
                title: "Missing Credentials",
                description: "Please enter both API key and secret.",
                variant: "destructive"
            });
            return;
        }

        localStorage.setItem('lastfm-credentials', JSON.stringify(lastFmCredentials));
        toast({
            title: "Credentials Saved",
            description: "Last.fm credentials have been saved locally.",
        });
    };

    const handleLastFmSessionComplete = async (token: string) => {
        try {
            const { sessionKey, username } = await getSessionKey(
                token, 
                lastFmCredentials.apiKey, 
                lastFmCredentials.apiSecret
            );
            
            const updatedCredentials = {
                ...lastFmCredentials,
                sessionKey,
                username
            };
            
            setLastFmCredentials(updatedCredentials);
            localStorage.setItem('lastfm-credentials', JSON.stringify(updatedCredentials));
            
            toast({
                title: "Last.fm Authentication Complete",
                description: `Successfully authenticated as ${username}`,
            });
        } catch (error) {
            toast({
                title: "Authentication Failed",
                description: error instanceof Error ? error.message : "Failed to complete Last.fm authentication",
                variant: "destructive"
            });
        }
    };

    return (
        <div className="container mx-auto p-6 pb-24 max-w-2xl">
            <div className="space-y-6">
                <div>
                    <h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
                    <p className="text-muted-foreground">Customize your music experience</p>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <FaServer className="w-5 h-5" />
                            Navidrome Server
                        </CardTitle>
                        <CardDescription>
                            Configure connection to your Navidrome music server
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <div className="space-y-2">
                            <Label htmlFor="server-url">Server URL</Label>
                            <Input
                                id="server-url"
                                type="url"
                                placeholder="https://your-navidrome-server.com"
                                value={formData.serverUrl}
                                onChange={(e) => handleInputChange('serverUrl', e.target.value)}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="username">Username</Label>
                            <Input
                                id="username"
                                type="text"
                                placeholder="Your username"
                                value={formData.username}
                                onChange={(e) => handleInputChange('username', e.target.value)}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="password">Password</Label>
                            <Input
                                id="password"
                                type="password"
                                placeholder="Your password"
                                value={formData.password}
                                onChange={(e) => handleInputChange('password', e.target.value)}
                            />
                        </div>

                        <div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
                            {isConnected ? (
                                <>
                                    <FaCheck className="w-4 h-4 text-green-600" />
                                    <span className="text-sm text-green-600">Connected to server</span>
                                </>
                            ) : (
                                <>
                                    <FaTimes className="w-4 h-4 text-red-600" />
                                    <span className="text-sm text-red-600">Not connected</span>
                                </>
                            )}
                        </div>

                        <div className="flex gap-2">
                            <Button 
                                onClick={handleTestConnection} 
                                disabled={isTesting}
                                variant="outline"
                            >
                                {isTesting ? 'Testing...' : 'Test Connection'}
                            </Button>
                            <Button 
                                onClick={handleSaveConfig}
                                disabled={!hasUnsavedChanges}
                            >
                                Save Configuration
                            </Button>
                            <Button 
                                onClick={handleClearConfig}
                                variant="destructive"
                            >
                                Clear
                            </Button>
                        </div>

                        <div className="text-sm text-muted-foreground">
                            <p><strong>Note:</strong> Your credentials are stored locally in your browser</p>
                            <p><strong>Security:</strong> Always use HTTPS for your Navidrome server</p>
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <FaLastfm className="w-5 h-5" />
                            Last.fm Integration
                        </CardTitle>
                        <CardDescription>
                            Configure Last.fm scrobbling through your Navidrome server
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <div className="space-y-2">
                            <Label htmlFor="scrobbling-enabled">Enable Scrobbling</Label>
                            <Select 
                                value={scrobblingEnabled ? "enabled" : "disabled"} 
                                onValueChange={(value) => handleScrobblingToggle(value === "enabled")}
                            >
                                <SelectTrigger id="scrobbling-enabled">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="enabled">Enabled</SelectItem>
                                    <SelectItem value="disabled">Disabled</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        <div className="text-sm text-muted-foreground space-y-2">
                            <p><strong>How it works:</strong></p>
                            <ul className="list-disc list-inside space-y-1 ml-2">
                                <li>Tracks are scrobbled to Last.fm through your Navidrome server</li>
                                <li>Configure Last.fm credentials in your Navidrome admin panel</li>
                                <li>Scrobbling occurs when you listen to at least 30 seconds or half the track</li>
                                <li>&quot;Now Playing&quot; updates are sent when tracks start</li>
                            </ul>
                            <p className="mt-3"><strong>Note:</strong> Last.fm credentials must be configured in Navidrome, not here.</p>
                        </div>

                        {!isConnected && (
                            <div className="flex items-center gap-3 p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
                                <FaTimes className="w-4 h-4 text-yellow-600" />
                                <span className="text-sm text-yellow-600">Connect to Navidrome first to enable scrobbling</span>
                            </div>
                        )}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Settings className="w-5 h-5" />
                            Sidebar Settings
                        </CardTitle>
                        <CardDescription>
                            Customize sidebar appearance and behavior
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <div className="space-y-2">
                            <Label htmlFor="sidebar-mode">Sidebar Mode</Label>
                            <Select 
                                value={sidebarCollapsed ? "collapsed" : "expanded"} 
                                onValueChange={(value) => handleSidebarToggle(value === "collapsed")}
                            >
                                <SelectTrigger id="sidebar-mode">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="expanded">Expanded (with labels)</SelectItem>
                                    <SelectItem value="collapsed">Collapsed (icons only)</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        <div className="text-sm text-muted-foreground space-y-2">
                            <p><strong>Expanded:</strong> Shows full navigation labels</p>
                            <p><strong>Collapsed:</strong> Shows only icons with tooltips</p>
                            <p className="mt-3"><strong>Note:</strong> You can also toggle the sidebar using the collapse button in the sidebar.</p>
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <FaLastfm className="w-5 h-5" />
                            Standalone Last.fm Integration
                        </CardTitle>
                        <CardDescription>
                            Direct Last.fm scrobbling without Navidrome configuration
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <div className="space-y-2">
                            <Label htmlFor="standalone-lastfm-enabled">Enable Standalone Last.fm</Label>
                            <Select 
                                value={standaloneLastFmEnabled ? "enabled" : "disabled"} 
                                onValueChange={(value) => handleStandaloneLastFmToggle(value === "enabled")}
                            >
                                <SelectTrigger id="standalone-lastfm-enabled">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="enabled">Enabled</SelectItem>
                                    <SelectItem value="disabled">Disabled</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        {standaloneLastFmEnabled && (
                            <>
                                <div className="space-y-2">
                                    <Label htmlFor="lastfm-api-key">Last.fm API Key</Label>
                                    <Input
                                        id="lastfm-api-key"
                                        type="text"
                                        placeholder="Your Last.fm API key"
                                        value={lastFmCredentials.apiKey}
                                        onChange={(e) => setLastFmCredentials(prev => ({ ...prev, apiKey: e.target.value }))}
                                    />
                                </div>

                                <div className="space-y-2">
                                    <Label htmlFor="lastfm-api-secret">Last.fm API Secret</Label>
                                    <Input
                                        id="lastfm-api-secret"
                                        type="password"
                                        placeholder="Your Last.fm API secret"
                                        value={lastFmCredentials.apiSecret}
                                        onChange={(e) => setLastFmCredentials(prev => ({ ...prev, apiSecret: e.target.value }))}
                                    />
                                </div>

                                {lastFmCredentials.sessionKey ? (
                                    <div className="flex items-center gap-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
                                        <FaCheck className="w-4 h-4 text-green-600" />
                                        <span className="text-sm text-green-600">
                                            Authenticated as {lastFmCredentials.username}
                                        </span>
                                    </div>
                                ) : (
                                    <div className="flex items-center gap-3 p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
                                        <FaTimes className="w-4 h-4 text-yellow-600" />
                                        <span className="text-sm text-yellow-600">Not authenticated</span>
                                    </div>
                                )}

                                <div className="flex gap-2">
                                    <Button onClick={handleLastFmCredentialsSave} variant="outline">
                                        Save Credentials
                                    </Button>
                                    <Button onClick={handleLastFmAuth} disabled={!lastFmCredentials.apiKey || !lastFmCredentials.apiSecret}>
                                        <ExternalLink className="w-4 h-4 mr-2" />
                                        Authorize with Last.fm
                                    </Button>
                                </div>

                                <div className="text-sm text-muted-foreground space-y-2">
                                    <p><strong>Setup Instructions:</strong></p>
                                    <ol className="list-decimal list-inside space-y-1 ml-2">
                                        <li>Create a Last.fm API account at <a href="https://www.last.fm/api" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">last.fm/api</a></li>
                                        <li>Enter your API key and secret above</li>
                                        <li>Save credentials and click &quot;Authorize with Last.fm&quot;</li>
                                        <li>Complete the authorization process</li>
                                    </ol>
                                    <p className="mt-3"><strong>Features:</strong></p>
                                    <ul className="list-disc list-inside space-y-1 ml-2">
                                        <li>Direct scrobbling to Last.fm (independent of Navidrome)</li>
                                        <li>&quot;Now Playing&quot; updates</li>
                                        <li>Follows Last.fm scrobbling rules (30s minimum or 50% played)</li>
                                    </ul>
                                </div>
                            </>
                        )}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Appearance</CardTitle>
                        <CardDescription>
                            Customize how the application looks and feels
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <div className="space-y-2">
                            <Label htmlFor="theme-select">Color Theme</Label>
                            <Select value={theme} onValueChange={setTheme}>
                                <SelectTrigger id="theme-select">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="blue">Blue</SelectItem>
                                    <SelectItem value="violet">Violet</SelectItem>
                                    <SelectItem value="red">Red</SelectItem>
                                    <SelectItem value="rose">Rose</SelectItem>
                                    <SelectItem value="orange">Orange</SelectItem>
                                    <SelectItem value="green">Green</SelectItem>
                                    <SelectItem value="yellow">Yellow</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        <div className="text-sm text-muted-foreground">
                            <p><strong>Theme:</strong> Choose between blue and violet color schemes</p>
                            <p><strong>Dark Mode:</strong> Automatically follows your system preferences</p>
                        </div>
                    </CardContent>
                </Card>

                {/* Theme Preview */}
                <Card>
                    <CardHeader>
                        <CardTitle>Preview</CardTitle>
                        <CardDescription>
                            See how your theme looks
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="space-y-4">
                            <div className="flex items-center space-x-4 p-4 border rounded-lg">
                                <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center">
                                    <span className="text-primary-foreground font-semibold">♪</span>
                                </div>
                                <div className="flex-1">
                                    <p className="font-semibold">Sample Song Title</p>
                                    <p className="text-sm text-muted-foreground">Sample Artist</p>
                                </div>
                                <div className="text-sm text-muted-foreground">3:42</div>
                            </div>
                            
                            <div className="flex space-x-2">
                                <div className="h-8 w-16 bg-secondary rounded"></div>
                                <div className="h-8 w-16 bg-accent rounded"></div>
                                <div className="h-8 w-16 bg-muted rounded"></div>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
};

export default SettingsPage;