'use client';

import { DriverDTO } from '@/application/mappers/EntityMappers';
import Card from '../ui/Card';
import Button from '../ui/Button';

interface DriverProfileProps {
  driver: DriverDTO;
}

export default function DriverProfile({ driver }: DriverProfileProps) {
  const formattedDate = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(new Date(driver.joinedAt));

  return (
    <Card className="max-w-2xl mx-auto">
      <div className="space-y-6">
        <div className="flex items-start justify-between">
          <div>
            <h2 className="text-2xl font-bold text-white mb-2">{driver.name}</h2>
            <p className="text-gray-400 text-sm">iRacing ID: {driver.iracingId}</p>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-3xl" aria-label={`Country: ${driver.country}`}>
              {getCountryFlag(driver.country)}
            </span>
          </div>
        </div>

        {driver.bio && (
          <div className="border-t border-charcoal-outline pt-4">
            <h3 className="text-sm font-semibold text-gray-400 mb-2">Bio</h3>
            <p className="text-gray-300 leading-relaxed">{driver.bio}</p>
          </div>
        )}

        <div className="border-t border-charcoal-outline pt-4">
          <div className="flex items-center gap-2 text-sm text-gray-400">
            <svg 
              className="w-4 h-4" 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              <path 
                strokeLinecap="round" 
                strokeLinejoin="round" 
                strokeWidth={2} 
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" 
              />
            </svg>
            <span>Member since {formattedDate}</span>
          </div>
        </div>

        <div className="pt-4">
          <Button
            variant="secondary"
            className="w-full"
            disabled
          >
            Edit Profile
          </Button>
          <p className="text-xs text-gray-500 text-center mt-2">
            Profile editing coming soon
          </p>
        </div>
      </div>
    </Card>
  );
}

function getCountryFlag(countryCode: string): string {
  const code = countryCode.toUpperCase();
  
  if (code.length === 2) {
    const codePoints = [...code].map(char => 
      127397 + char.charCodeAt(0)
    );
    return String.fromCodePoint(...codePoints);
  }
  
  return '🏁';
}