'use client';

import { useState } from 'react';
import type { DriverProfileDriverSummaryViewModel } from '@/lib/view-models/DriverProfileViewModel';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Input } from '@/ui/Input';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Select } from '@/ui/Select';
import { Toggle } from '@/ui/Toggle';
import { TextArea } from '@/ui/TextArea';
import { Checkbox } from '@/ui/Checkbox';

interface ProfileSettingsProps {
  driver: DriverProfileDriverSummaryViewModel;
  onSave?: (updates: { bio?: string; country?: string }) => void;
}

export function ProfileSettings({ driver, onSave }: ProfileSettingsProps) {
  const [bio, setBio] = useState(driver.bio || '');
  const [nationality, setNationality] = useState(driver.country);
  const [favoriteCarClass, setFavoriteCarClass] = useState('GT3');
  const [favoriteSeries, setFavoriteSeries] = useState('Endurance');
  const [competitiveLevel, setCompetitiveLevel] = useState('competitive');
  const [preferredRegions, setPreferredRegions] = useState<string[]>(['EU']);

  const handleSave = () => {
    onSave?.({
      bio,
      country: nationality
    });
  };

  return (
    <Stack gap={6}>
      <Card>
        <Heading level={3} mb={4}>Profile Information</Heading>
        
        <Stack gap={4}>
          <TextArea
            label="Bio"
            value={bio}
            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setBio(e.target.value)}
            rows={4}
            placeholder="Tell us about yourself..."
          />

          <Input
            label="Nationality"
            type="text"
            value={nationality}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNationality(e.target.value)}
            placeholder="e.g., US, GB, DE"
            maxLength={2}
          />
        </Stack>
      </Card>

      <Card>
        <Heading level={3} mb={4}>Racing Preferences</Heading>
        
        <Stack gap={4}>
          <Select
            label="Favorite Car Class"
            value={favoriteCarClass}
            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFavoriteCarClass(e.target.value)}
            options={[
              { value: 'GT3', label: 'GT3' },
              { value: 'GT4', label: 'GT4' },
              { value: 'Formula', label: 'Formula' },
              { value: 'LMP2', label: 'LMP2' },
              { value: 'Touring', label: 'Touring Cars' },
              { value: 'NASCAR', label: 'NASCAR' },
            ]}
          />

          <Select
            label="Favorite Series Type"
            value={favoriteSeries}
            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFavoriteSeries(e.target.value)}
            options={[
              { value: 'Sprint', label: 'Sprint' },
              { value: 'Endurance', label: 'Endurance' },
              { value: 'Mixed', label: 'Mixed' },
            ]}
          />

          <Select
            label="Competitive Level"
            value={competitiveLevel}
            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setCompetitiveLevel(e.target.value)}
            options={[
              { value: 'casual', label: 'Casual - Just for fun' },
              { value: 'competitive', label: 'Competitive - Aiming to win' },
              { value: 'professional', label: 'Professional - Esports focused' },
            ]}
          />

          <Stack gap={2}>
            <Heading level={4}>Preferred Regions</Heading>
            <Stack gap={2}>
              {['NA', 'EU', 'ASIA', 'OCE'].map(region => (
                <Checkbox
                  key={region}
                  label={region}
                  checked={preferredRegions.includes(region)}
                  onChange={(checked) => {
                    if (checked) {
                      setPreferredRegions([...preferredRegions, region]);
                    } else {
                      setPreferredRegions(preferredRegions.filter(r => r !== region));
                    }
                  }}
                />
              ))}
            </Stack>
          </Stack>
        </Stack>
      </Card>

      <Card>
        <Heading level={3} mb={4}>Privacy Settings</Heading>
        
        <Stack gap={0}>
          <Toggle
            checked={true}
            onChange={() => {}}
            label="Show profile to other drivers"
          />
          <Toggle
            checked={true}
            onChange={() => {}}
            label="Show race history"
          />
          <Toggle
            checked={true}
            onChange={() => {}}
            label="Allow friend requests"
          />
        </Stack>
      </Card>

      <Box display="flex" gap={3}>
        <Button variant="primary" onClick={handleSave} fullWidth>
          Save Changes
        </Button>
        <Button variant="secondary" fullWidth>
          Cancel
        </Button>
      </Box>
    </Stack>
  );
}