'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';

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

export default 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 (
    <div className="space-y-6">
      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">Profile Information</h3>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm text-gray-400 mb-2">Bio</label>
            <textarea
              value={bio}
              onChange={(e) => setBio(e.target.value)}
              className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent resize-none"
              rows={4}
              placeholder="Tell us about yourself..."
            />
          </div>

          <div>
            <label className="block text-sm text-gray-400 mb-2">Nationality</label>
            <Input
              type="text"
              value={nationality}
              onChange={(e) => setNationality(e.target.value)}
              placeholder="e.g., US, GB, DE"
              maxLength={2}
            />
          </div>
        </div>
      </Card>

      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">Racing Preferences</h3>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm text-gray-400 mb-2">Favorite Car Class</label>
            <select
              value={favoriteCarClass}
              onChange={(e) => setFavoriteCarClass(e.target.value)}
              className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent"
            >
              <option value="GT3">GT3</option>
              <option value="GT4">GT4</option>
              <option value="Formula">Formula</option>
              <option value="LMP2">LMP2</option>
              <option value="Touring">Touring Cars</option>
              <option value="NASCAR">NASCAR</option>
            </select>
          </div>

          <div>
            <label className="block text-sm text-gray-400 mb-2">Favorite Series Type</label>
            <select
              value={favoriteSeries}
              onChange={(e) => setFavoriteSeries(e.target.value)}
              className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent"
            >
              <option value="Sprint">Sprint</option>
              <option value="Endurance">Endurance</option>
              <option value="Mixed">Mixed</option>
            </select>
          </div>

          <div>
            <label className="block text-sm text-gray-400 mb-2">Competitive Level</label>
            <select
              value={competitiveLevel}
              onChange={(e) => setCompetitiveLevel(e.target.value)}
              className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent"
            >
              <option value="casual">Casual - Just for fun</option>
              <option value="competitive">Competitive - Aiming to win</option>
              <option value="professional">Professional - Esports focused</option>
            </select>
          </div>

          <div>
            <label className="block text-sm text-gray-400 mb-2">Preferred Regions</label>
            <div className="space-y-2">
              {['NA', 'EU', 'ASIA', 'OCE'].map(region => (
                <label key={region} className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={preferredRegions.includes(region)}
                    onChange={(e) => {
                      if (e.target.checked) {
                        setPreferredRegions([...preferredRegions, region]);
                      } else {
                        setPreferredRegions(preferredRegions.filter(r => r !== region));
                      }
                    }}
                    className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
                  />
                  <span className="text-white text-sm">{region}</span>
                </label>
              ))}
            </div>
          </div>
        </div>
      </Card>

      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">Privacy Settings</h3>
        
        <div className="space-y-3">
          <label className="flex items-center justify-between cursor-pointer">
            <span className="text-white text-sm">Show profile to other drivers</span>
            <input
              type="checkbox"
              defaultChecked
              className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
            />
          </label>
          
          <label className="flex items-center justify-between cursor-pointer">
            <span className="text-white text-sm">Show race history</span>
            <input
              type="checkbox"
              defaultChecked
              className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
            />
          </label>
          
          <label className="flex items-center justify-between cursor-pointer">
            <span className="text-white text-sm">Allow friend requests</span>
            <input
              type="checkbox"
              defaultChecked
              className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
            />
          </label>
        </div>
      </Card>

      <div className="flex gap-3">
        <Button variant="primary" onClick={handleSave} className="flex-1">
          Save Changes
        </Button>
        <Button variant="secondary" className="flex-1">
          Cancel
        </Button>
      </div>
    </div>
  );
}