'use client';

import { Panel } from '@/ui/Panel';
import { Select } from '@/ui/Select';
import { Toggle } from '@/ui/Toggle';
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">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
          <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' },
            ]}
          />
          
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', paddingTop: '0.5rem' }}>
            <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 })}
            />
          </div>
        </div>
      </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>
  );
}
