import { useState, useEffect } from 'react';
import { Settings, User, Bell, Shield, Palette, Globe } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useUser } from '@/features/auth/hooks/useUser';
import { useUIStore } from '@/stores/ui';
import { useToast } from '@/hooks/useToast';
import { ThemeSwitcher } from '@/components/theme/ThemeSwitcher';

export function SettingsPage() {
  const { data: user } = useUser();
  const { theme, setTheme, language, setLanguage } = useUIStore();
  const { toast } = useToast();
  const [activeTab, setActiveTab] = useState('profile');
  const [colorTheme, setColorTheme] = useState('cyber');

  // Apply color theme to document
  useEffect(() => {
    document.documentElement.setAttribute('data-color-theme', colorTheme);
  }, [colorTheme]);

  const handleThemeChange = (newTheme: string) => {
    setColorTheme(newTheme);
    toast({ message: `Switched to ${newTheme} theme`, type: 'success' });
  };

  const tabs = [
    { id: 'profile', label: 'Profile', icon: User },
    { id: 'notifications', label: 'Notifications', icon: Bell },
    { id: 'privacy', label: 'Privacy', icon: Shield },
    { id: 'appearance', label: 'Appearance', icon: Palette },
    { id: 'language', label: 'Language', icon: Globe },
  ];

  return (
    <div className="min-h-screen p-6 space-y-6">
      {/* Header */}
      <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-xl bg-kodo-cyan/20 flex items-center justify-center border border-kodo-cyan/30">
            <Settings className="w-6 h-6 text-kodo-cyan" />
          </div>
          <div>
            <h1 className="text-3xl font-display font-bold text-white">
              Settings
            </h1>
            <p className="text-sm text-kodo-secondary">
              Manage your account preferences
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Sidebar */}
        <div className="glass-hud rounded-xl border-white/10 p-4 h-fit">
          <nav className="space-y-1">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
                    activeTab === tab.id
                      ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30'
                      : 'text-kodo-secondary hover:text-white hover:bg-white/5'
                  }`}
                >
                  <Icon className="w-4 h-4" />
                  <span className="text-sm font-medium">{tab.label}</span>
                </button>
              );
            })}
          </nav>
        </div>

        {/* Content */}
        <div className="lg:col-span-3 glass-hud rounded-xl border-white/10 p-6">
          {activeTab === 'profile' && (
            <div className="space-y-6">
              <h2 className="text-xl font-bold text-white">Profile Settings</h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-white mb-2">
                    Username
                  </label>
                  <input
                    type="text"
                    defaultValue={user?.username}
                    className="w-full px-4 py-2 bg-kodo-graphite border border-white/10 rounded-lg text-white focus:border-kodo-cyan focus:outline-none"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-white mb-2">
                    Email
                  </label>
                  <input
                    type="email"
                    defaultValue={user?.email}
                    className="w-full px-4 py-2 bg-kodo-graphite border border-white/10 rounded-lg text-white focus:border-kodo-cyan focus:outline-none"
                  />
                </div>
                <Button
                  className="bg-kodo-cyan hover:bg-kodo-cyan/80 text-black"
                  onClick={() =>
                    toast({
                      message: 'Profile settings updated successfully',
                      type: 'success',
                    })
                  }
                >
                  Save Changes
                </Button>
              </div>
            </div>
          )}

          {activeTab === 'appearance' && (
            <div className="space-y-6">
              <h2 className="text-xl font-bold text-white">Appearance</h2>

              <ThemeSwitcher
                currentTheme={colorTheme}
                onThemeChange={handleThemeChange}
              />

              <div className="border-t border-white/10 pt-6 mt-6">
                <label className="block text-sm font-medium text-white mb-2">
                  Light/Dark Mode
                </label>
                <div className="grid grid-cols-3 gap-3">
                  {['light', 'dark', 'system'].map((t) => (
                    <button
                      key={t}
                      onClick={() => setTheme(t as 'light' | 'dark' | 'system')}
                      className={`px-4 py-3 rounded-lg border transition-all ${
                        theme === t
                          ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan'
                          : 'border-white/10 text-kodo-secondary hover:border-white/20'
                      }`}
                    >
                      {t.charAt(0).toUpperCase() + t.slice(1)}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {activeTab === 'language' && (
            <div className="space-y-6">
              <h2 className="text-xl font-bold text-white">Language</h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-white mb-2">
                    Preferred Language
                  </label>
                  <select
                    value={language}
                    onChange={(e) => setLanguage(e.target.value as 'en' | 'fr')}
                    className="w-full px-4 py-2 bg-kodo-graphite border border-white/10 rounded-lg text-white focus:border-kodo-cyan focus:outline-none"
                  >
                    <option value="en">English</option>
                    <option value="fr">Français</option>
                  </select>
                </div>
              </div>
            </div>
          )}

          {(activeTab === 'notifications' || activeTab === 'privacy') && (
            <div className="space-y-6">
              <h2 className="text-xl font-bold text-white">
                {activeTab === 'notifications' ? 'Notifications' : 'Privacy'}
              </h2>
              <p className="text-kodo-secondary">
                Settings for {activeTab} will be available soon.
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}