'use client';

import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { Toggle } from '@/ui/Toggle';

interface PreferencesPanelProps {
  preferences: {
    favoriteCarClass: string;
    favoriteSeries: string;
    competitiveLevel: string;
    showProfile: boolean;
    showHistory: boolean;
  };
  isEditing?: boolean;
  onUpdate?: (updates: Partial<PreferencesPanelProps['preferences']>) => void;
}

export function PreferencesPanel({ preferences, isEditing, onUpdate }: PreferencesPanelProps) {
  if (isEditing) {
    return (
      <section aria-labelledby="preferences-heading">
        <Card>
          <Stack gap={6}>
            <Heading level={3} id="preferences-heading" fontSize="1.125rem">Racing Preferences</Heading>
            
            <Stack gap={4}>
              <Select
                label="Favorite Car Class"
                value={preferences.favoriteCarClass}
                onChange={(e) => onUpdate?.({ favoriteCarClass: e.target.value })}
                options={[
                  { value: 'GT3', label: 'GT3' },
                  { value: 'GT4', label: 'GT4' },
                  { value: 'Formula', label: 'Formula' },
                  { value: 'LMP2', label: 'LMP2' },
                ]}
              />
              <Select
                label="Competitive Level"
                value={preferences.competitiveLevel}
                onChange={(e) => onUpdate?.({ competitiveLevel: e.target.value })}
                options={[
                  { value: 'casual', label: 'Casual' },
                  { value: 'competitive', label: 'Competitive' },
                  { value: 'professional', label: 'Professional' },
                ]}
              />
              
              <Stack gap={3} pt={2}>
                <Toggle
                  label="Public Profile"
                  checked={preferences.showProfile}
                  onChange={(checked) => onUpdate?.({ showProfile: checked })}
                />
                <Toggle
                  label="Show Race History"
                  checked={preferences.showHistory}
                  onChange={(checked) => onUpdate?.({ showHistory: checked })}
                />
              </Stack>
            </Stack>
          </Stack>
        </Card>
      </section>
    );
  }

  return (
    <section aria-labelledby="preferences-heading">
      <Card>
        <Stack gap={6}>
          <Heading level={3} id="preferences-heading" fontSize="1.125rem">Racing Preferences</Heading>
          
          <Stack direction="row" gap={8} wrap>
            <Stack gap={1}>
              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Car Class</Text>
              <Text color="#d1d5db">{preferences.favoriteCarClass}</Text>
            </Stack>
            <Stack gap={1}>
              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Level</Text>
              <Text color="#d1d5db" capitalize>{preferences.competitiveLevel}</Text>
            </Stack>
            <Stack gap={1}>
              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Visibility</Text>
              <Text color="#d1d5db">{preferences.showProfile ? 'Public' : 'Private'}</Text>
            </Stack>
          </Stack>
        </Stack>
      </Card>
    </section>
  );
}