'use client';

import React from 'react';
import { Globe, Trophy, UserPlus, Check } from 'lucide-react';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { RatingBadge } from '@/components/drivers/RatingBadge';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Image } from '@/ui/Image';
import { SafetyRatingBadge } from './SafetyRatingBadge';

interface DriverProfileHeaderProps {
  name: string;
  avatarUrl?: string | null;
  nationality: string;
  rating: number;
  safetyRating?: number;
  globalRank?: number;
  bio?: string | null;
  friendRequestSent: boolean;
  onAddFriend: () => void;
}

export function DriverProfileHeader({
  name,
  avatarUrl,
  nationality,
  rating,
  safetyRating = 92,
  globalRank,
  bio,
  friendRequestSent,
  onAddFriend,
}: DriverProfileHeaderProps) {
  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';

  return (
    <Box position="relative" overflow="hidden" rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" p={{ base: 6, lg: 8 }}>
      {/* Background Accents */}
      <Box position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />

      <Box position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={8}>
        {/* Avatar */}
        <Box position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
          <Image
            src={avatarUrl || defaultAvatar}
            alt={name}
            fill
            objectFit="cover"
          />
        </Box>

        {/* Info */}
        <Box display="flex" flexGrow={1} flexDirection="col" gap={4}>
          <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={2}>
            <Box>
              <Stack direction="row" align="center" gap={3} mb={1}>
                <Heading level={1}>{name}</Heading>
                {globalRank && (
                  <Box display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
                    <Trophy size={12} color="#FFBE4D" />
                    <Text size="xs" weight="bold" font="mono" color="text-warning-amber">
                      #{globalRank}
                    </Text>
                  </Box>
                )}
              </Stack>
              <Stack direction="row" align="center" gap={4}>
                <Stack direction="row" align="center" gap={1.5}>
                  <Globe size={14} color="#6B7280" />
                  <Text size="sm" color="text-gray-400">{nationality}</Text>
                </Stack>
                <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
                <Stack direction="row" align="center" gap={2}>
                  <RatingBadge rating={rating} size="sm" />
                  <SafetyRatingBadge rating={safetyRating} size="sm" />
                </Stack>
              </Stack>
            </Box>

            <Box mt={{ base: 4, lg: 0 }}>
              <Button
                variant={friendRequestSent ? 'secondary' : 'primary'}
                onClick={onAddFriend}
                disabled={friendRequestSent}
                icon={friendRequestSent ? <Check size={18} /> : <UserPlus size={18} />}
              >
                {friendRequestSent ? 'Request Sent' : 'Add Friend'}
              </Button>
            </Box>
          </Box>

          {bio && (
            <Box maxWidth="3xl">
              <Text size="sm" color="text-gray-400" leading="relaxed">
                {bio}
              </Text>
            </Box>
          )}
        </Box>
      </Box>
    </Box>
  );
}