import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import {
  UserSettings,
  PlaybackSettings as PlaybackSettingsType,
} from '../types/settings';
import { PreferenceSettings } from './PreferenceSettings';
import { NotificationSettings } from './NotificationSettings';
import { PrivacySettings } from './PrivacySettings';
import { ProfileVisibilityCard } from './ProfileVisibilityCard';
import { AccountSettings } from './AccountSettings';
import { PlaybackSettings } from './PlaybackSettings';

// FE-PAGE-004: Complete Settings page implementation

interface SettingsTabsProps {
  settings: UserSettings;
  onChange: (settings: UserSettings) => void;
}

export function SettingsTabs({ settings, onChange }: SettingsTabsProps) {
  const handlePreferencesChange = (
    preferences: typeof settings.preferences,
  ) => {
    onChange({
      ...settings,
      preferences,
    });
  };

  const handleNotificationsChange = (
    notifications: typeof settings.notifications,
  ) => {
    onChange({
      ...settings,
      notifications,
    });
  };

  const handlePrivacyChange = (privacy: typeof settings.privacy) => {
    onChange({
      ...settings,
      privacy,
    });
  };

  const handlePlaybackChange = (playback: PlaybackSettingsType) => {
    onChange({
      ...settings,
      playback,
    });
  };

  // FE-PAGE-004: Initialize playback settings with defaults if not present
  const playbackSettings: PlaybackSettingsType = settings.playback || {
    quality: 'high',
    volume: 0.8,
    crossfade: 3,
    autoplay: true,
  };

  return (
    <Tabs defaultValue="account" className="w-full">
      <TabsList className="grid w-full grid-cols-5">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="preferences">Préférences</TabsTrigger>
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
        <TabsTrigger value="privacy">Confidentialité</TabsTrigger>
        <TabsTrigger value="playback">Playback</TabsTrigger>
      </TabsList>

      {/* FE-PAGE-004: Account Settings Tab */}
      <TabsContent value="account" className="mt-6">
        <AccountSettings />
      </TabsContent>

      <TabsContent value="preferences" className="mt-6">
        <PreferenceSettings
          preferences={settings.preferences}
          onChange={handlePreferencesChange}
        />
      </TabsContent>

      <TabsContent value="notifications" className="mt-6">
        <NotificationSettings
          notifications={settings.notifications}
          onChange={handleNotificationsChange}
        />
      </TabsContent>

      <TabsContent value="privacy" className="mt-6 space-y-6">
        <ProfileVisibilityCard />
        <PrivacySettings
          privacy={settings.privacy}
          onChange={handlePrivacyChange}
        />
      </TabsContent>

      {/* FE-PAGE-004: Playback Settings Tab */}
      <TabsContent value="playback" className="mt-6">
        <PlaybackSettings
          playback={playbackSettings}
          onChange={handlePlaybackChange}
        />
      </TabsContent>
    </Tabs>
  );
}