'use client';

import React from 'react';
import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';

interface ProfileHeaderProps {
  driver: {
    name: string;
    avatarUrl?: string;
    country: string;
    iracingId: number;
    joinedAt: string | Date;
  };
  stats: {
    rating: number;
  } | null;
  globalRank: number;
  onAddFriend?: () => void;
  friendRequestSent?: boolean;
  isOwnProfile?: boolean;
}

export function ProfileHeader({
  driver,
  stats,
  globalRank,
  onAddFriend,
  friendRequestSent,
  isOwnProfile,
}: ProfileHeaderProps) {
  return (
    <header>
      <Surface variant="muted" rounded="xl" border padding={6} backgroundColor="#141619" borderColor="#23272B">
        <Stack direction="row" align="center" gap={8} wrap>
          {/* Avatar with telemetry-style border */}
          <Box position="relative">
            <Box 
              width="6rem" 
              height="6rem" 
              rounded="md" 
              border 
              borderColor="#23272B"
              p={0.5}
              backgroundColor="#0C0D0F"
            >
              <Box width="100%" height="100%" rounded="sm" overflow="hidden">
                <Image
                  src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
                  alt={driver.name}
                  width={96}
                  height={96}
                  objectFit="cover"
                  fullWidth
                  fullHeight
                />
              </Box>
            </Box>
          </Box>

          {/* Driver Info */}
          <Box flexGrow={1} minWidth="0">
            <Stack direction="row" align="center" gap={3} mb={1}>
              <Heading level={1} fontSize="1.5rem">
                {driver.name}
              </Heading>
              <Text size="2xl" aria-label={`Country: ${driver.country}`}>
                {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
              </Text>
            </Stack>

            <Stack direction="row" align="center" gap={4} color="#9ca3af">
              <Stack direction="row" align="center" gap={1.5}>
                <Globe size={14} />
                <Text size="xs" font="mono">ID: {driver.iracingId}</Text>
              </Stack>
              <Box width="1px" height="12px" backgroundColor="#23272B" />
              <Stack direction="row" align="center" gap={1.5}>
                <Calendar size={14} />
                <Text size="xs">
                  Joined {new Date(driver.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                </Text>
              </Stack>
            </Stack>
          </Box>

          {/* Stats Grid */}
          <Stack direction="row" align="center" gap={6}>
            {stats && (
              <>
                <Box>
                  <Stack gap={0.5}>
                    <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">RATING</Text>
                    <Stack direction="row" align="center" gap={1.5}>
                      <Star size={14} color="#198CFF" />
                      <Text font="mono" size="lg" weight="bold" color="#198CFF">{stats.rating}</Text>
                    </Stack>
                  </Stack>
                </Box>
                <Box width="1px" height="32px" backgroundColor="#23272B" />
                <Box>
                  <Stack gap={0.5}>
                    <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">GLOBAL RANK</Text>
                    <Stack direction="row" align="center" gap={1.5}>
                      <Trophy size={14} color="#FFBE4D" />
                      <Text font="mono" size="lg" weight="bold" color="#FFBE4D">#{globalRank}</Text>
                    </Stack>
                  </Stack>
                </Box>
              </>
            )}
          </Stack>

          {/* Actions */}
          {!isOwnProfile && onAddFriend && (
            <Box ml="auto">
              <Button
                variant={friendRequestSent ? 'secondary' : 'primary'}
                onClick={onAddFriend}
                disabled={friendRequestSent}
                size="sm"
                icon={<UserPlus size={16} />}
              >
                {friendRequestSent ? 'Request Sent' : 'Add Friend'}
              </Button>
            </Box>
          )}
        </Stack>
      </Surface>
    </header>
  );
}