import React, { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Tabs, TabsList, TabsTrigger } from '../ui/tabs';

import { useToast } from '../../context/ToastContext';
import {
  User,
  Bell,
  Palette,
  Shield,
  Volume2,
  UserCog,
  Cloud,
  Database,
  Accessibility,
  Plug,
  HardDrive,
} from 'lucide-react';
import { SecuritySettings } from '../settings/security/SecuritySettings';
import { EditProfile } from '../settings/profile/EditProfile';
import { AccountSettings } from '../settings/account/AccountSettings';
import { CloudIntegrationView } from '../settings/cloud/CloudIntegrationView';
import { BackupsView } from '../settings/backups/BackupsView';
import { AppearanceSettingsView } from '../settings/appearance/AppearanceSettingsView';
import { AccessibilitySettingsView } from '../settings/accessibility/AccessibilitySettingsView';
import { IntegrationsView } from '../settings/integrations/IntegrationsView';
import { DataExportView } from '../settings/data/DataExportView';

interface SettingsViewProps {
  initialTab?: string;
}

export const SettingsView: React.FC<SettingsViewProps> = ({
  initialTab = 'profile',
}) => {
  // const { theme, setTheme } = useTheme();
  const { addToast: _addToast } = useToast();
  const [activeTab, setActiveTab] = useState(initialTab);

  // Sync active tab if initialTab changes
  useEffect(() => {
    if (initialTab) setActiveTab(initialTab);
  }, [initialTab]);

  const settingsTabs = [
    { id: 'profile', label: 'Profile', icon: <User className="w-4 h-4" /> },
    { id: 'account', label: 'Account', icon: <UserCog className="w-4 h-4" /> },
    {
      id: 'appearance',
      label: 'Appearance',
      icon: <Palette className="w-4 h-4" />,
    },
    {
      id: 'accessibility',
      label: 'Accessibility',
      icon: <Accessibility className="w-4 h-4" />,
    },
    { id: 'security', label: 'Security', icon: <Shield className="w-4 h-4" /> },
    {
      id: 'integrations',
      label: 'Integrations',
      icon: <Plug className="w-4 h-4" />,
    },
    { id: 'cloud', label: 'Cloud & Sync', icon: <Cloud className="w-4 h-4" /> },
    {
      id: 'backups',
      label: 'Backups',
      icon: <HardDrive className="w-4 h-4" />,
    },
    {
      id: 'data',
      label: 'Privacy & Data',
      icon: <Database className="w-4 h-4" />,
    },
    { id: 'audio', label: 'Audio', icon: <Volume2 className="w-4 h-4" /> },
    {
      id: 'notifications',
      label: 'Notifications',
      icon: <Bell className="w-4 h-4" />,
    },
  ];

  return (
    <div className="flex flex-col gap-8 animate-fadeIn pb-20">
      {/* Header */}
      <div>
        <h2 className="text-3xl font-display font-bold text-white mb-2">
          SETTINGS
        </h2>
        <p className="text-gray-400 font-mono text-sm">
          Configure your studio, account, and preferences.
        </p>
      </div>

      {/* Top Navigation using new Tabs component */}
      <div className="border-b border-kodo-steel/50">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="pb-0">
          <TabsList className="bg-transparent border-none p-0">
            {settingsTabs.map((tab) => (
              <TabsTrigger
                key={tab.id}
                value={tab.id}
                className="rounded-none border-b-2 border-transparent data-[state=active]:border-kodo-cyan data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2"
              >
                <span className="flex items-center gap-2">
                  {tab.icon}
                  {tab.label}
                </span>
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
      </div>

      {/* Content Area */}
      <div className="min-h-[500px]">
        {/* PROFILE TAB (Phase 3) */}
        {activeTab === 'profile' && <EditProfile />}

        {/* ACCOUNT TAB (Phase 4) */}
        {activeTab === 'account' && <AccountSettings />}

        {/* APPEARANCE TAB (Phase 21) */}
        {activeTab === 'appearance' && <AppearanceSettingsView />}

        {/* ACCESSIBILITY TAB (Phase 21) */}
        {activeTab === 'accessibility' && <AccessibilitySettingsView />}

        {/* SECURITY TAB (Phase 2) */}
        {activeTab === 'security' && <SecuritySettings />}

        {/* INTEGRATIONS TAB (Phase 23) */}
        {activeTab === 'integrations' && <IntegrationsView />}

        {/* CLOUD TAB (Phase 18) */}
        {activeTab === 'cloud' && <CloudIntegrationView />}

        {/* BACKUPS TAB (Phase 18) */}
        {activeTab === 'backups' && <BackupsView />}

        {/* DATA EXPORT TAB (Phase 23) */}
        {activeTab === 'data' && <DataExportView />}

        {/* Placeholder for Audio & Notifications */}
        {['audio', 'notifications'].includes(activeTab) && (
          <Card variant="default" className="min-h-[400px]">
            <div className="flex flex-col items-center justify-center h-full text-center animate-fadeIn py-20">
              <div className="w-20 h-20 rounded-full bg-kodo-slate flex items-center justify-center mb-6">
                {activeTab === 'audio' ? (
                  <Volume2 className="w-10 h-10 text-gray-400" />
                ) : (
                  <Bell className="w-10 h-10 text-gray-400" />
                )}
              </div>
              <h3 className="text-2xl font-bold text-white capitalize mb-2">
                {activeTab} Settings
              </h3>
              <p className="text-gray-400 max-w-md">
                Advanced configurations for {activeTab} will be available in the
                next system update (v2.1).
              </p>
            </div>
          </Card>
        )}
      </div>
    </div>
  );
};
