gridpilot.gg/apps/website/components/profile/ProfileSettingsPanel.tsx

'use client';

import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Checkbox } from '@/ui/Checkbox';
import { Heading } from '@/ui/Heading';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/Stack';
import { Select } from '@/ui/Select';
import { TextArea } from '@/ui/TextArea';
import { Toggle } from '@/ui/Toggle';
import React, { useState } from 'react';
import { ProfileSection } from './ProfileSection';

interface ProfileSettingsPanelProps {
  driver: {
    id: string;
    name: string;
    country: string;
    bio?: string | null;
  };
  onSave?: (updates: { bio?: string; country?: string }) => void;
}

export function ProfileSettingsPanel({ driver, onSave }: ProfileSettingsPanelProps) {
  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={8}>
      <ProfileSection 
        title="Profile Information" 
        description="Update your personal details and driver bio."
      >
        <Card>
          <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>
      </ProfileSection>

      <ProfileSection 
        title="Racing Preferences" 
        description="Help us tailor your experience by sharing your racing style."
      >
        <Card>
          <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 direction="row" gap={4}>
                {['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>
      </ProfileSection>

      <ProfileSection 
        title="Privacy Settings" 
        description="Control who can see your profile and activity."
      >
        <Card>
          <Stack gap={2}>
            <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>
      </ProfileSection>

      <Stack direction="row" gap={3} justify="end">
        <Button variant="secondary">
          Cancel
        </Button>
        <Button variant="primary" onClick={handleSave}>
          Save Changes
        </Button>
      </Stack>
    </Stack>
  );
}