'use client';

import Image from 'next/image';
import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
import Button from '../ui/Button';
import { getImageService } from '@/lib/di-container';
import DriverRatingPill from '@/components/profile/DriverRatingPill';

interface ProfileHeaderProps {
  driver: DriverDTO;
  rating?: number | null;
  rank?: number | null;
  isOwnProfile?: boolean;
  onEditClick?: () => void;
  teamName?: string | null;
  teamTag?: string | null;
}

export default function ProfileHeader({
  driver,
  rating,
  rank,
  isOwnProfile = false,
  onEditClick,
  teamName,
  teamTag,
}: ProfileHeaderProps) {
  return (
    <div className="flex items-start justify-between">
      <div className="flex items-start gap-4">
        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 overflow-hidden flex items-center justify-center">
          <Image
            src={getImageService().getDriverAvatar(driver.id)}
            alt={driver.name}
            width={80}
            height={80}
            className="w-full h-full object-cover"
          />
        </div>
        
        <div>
          <div className="flex items-center gap-3 mb-2">
            <h1 className="text-3xl font-bold text-white">{driver.name}</h1>
            <span className="text-3xl" aria-label={`Country: ${driver.country}`}>
              {getCountryFlag(driver.country)}
            </span>
            {teamTag && (
              <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
                {teamTag}
              </span>
            )}
          </div>
          
          <div className="flex items-center gap-4 text-sm text-gray-400">
            <span>iRacing ID: {driver.iracingId}</span>
            {teamName && (
              <>
                <span>•</span>
                <span className="text-primary-blue">
                  {teamTag ? `[${teamTag}] ${teamName}` : teamName}
                </span>
              </>
            )}
          </div>

          {(typeof rating === 'number' || typeof rank === 'number') && (
            <div className="mt-2">
              <DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
            </div>
          )}
        </div>
      </div>

      {isOwnProfile && (
        <Button variant="secondary" onClick={onEditClick}>
          Edit Profile
        </Button>
      )}
    </div>
  );
}

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