'use client';

import { Panel } from '@/ui/Panel';
import { Select } from '@/ui/Select';
import { Toggle } from '@/ui/Toggle';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { ProfileStatsGroup, ProfileStat } from '@/ui/ProfileHero';
import React from 'react';

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 (
      <Panel title="Racing Preferences">
        <Stack gap={6}>
          <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' },
            ]}
          />
          
          <Box paddingTop={2}>
            <Stack gap={3}>
              <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>
          </Box>
        </Stack>
      </Panel>
    );
  }

  return (
    <Panel title="Racing Preferences">
      <ProfileStatsGroup>
        <ProfileStat label="Car Class" value={preferences.favoriteCarClass} intent="primary" />
        <ProfileStat label="Level" value={preferences.competitiveLevel} intent="telemetry" />
        <ProfileStat label="Visibility" value={preferences.showProfile ? 'Public' : 'Private'} intent="low" />
      </ProfileStatsGroup>
    </Panel>
  );
}