import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { CountryFlag } from '@/ui/CountryFlag';
import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { PlaceholderImage } from '@/ui/PlaceholderImage';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

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

export function ProfileHeader({
  driver,
  rating,
  rank,
  isOwnProfile = false,
  onEditClick,
  teamName,
  teamTag,
}: ProfileHeaderProps) {
  return (
    <Box display="flex" alignItems="start" justifyContent="between">
      <Box display="flex" alignItems="start" gap={4}>
        <Box 
          w="20" 
          h="20" 
          rounded="full" 
          bg="bg-gradient-to-br from-primary-blue to-purple-600" 
          overflow="hidden" 
          display="flex" 
          alignItems="center" 
          justifyContent="center"
        >
          {driver.avatarUrl ? (
            <Image
              src={driver.avatarUrl}
              alt={driver.name}
              width={80}
              height={80}
              className="w-full h-full object-cover"
            />
          ) : (
            <PlaceholderImage size={80} />
          )}
        </Box>
        
        <Box>
          <Box display="flex" alignItems="center" gap={3} mb={2}>
            <Heading level={1}>{driver.name}</Heading>
            {driver.country && <CountryFlag countryCode={driver.country} size="lg" />}
            {teamTag && (
              <Badge variant="primary">
                {teamTag}
              </Badge>
            )}
          </Box>
          
          <Box display="flex" alignItems="center" gap={4}>
            <Text size="sm" color="text-gray-400">iRacing ID: {driver.iracingId}</Text>
            {teamName && (
              <Stack direction="row" align="center" gap={2}>
                <Text size="sm" color="text-gray-400">•</Text>
                <Text size="sm" color="text-primary-blue">
                  {teamTag ? `[${teamTag}] ${teamName}` : teamName}
                </Text>
              </Stack>
            )}
          </Box>

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

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