'use client';

import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { ProfileAvatar, ProfileHero, ProfileStat, ProfileStatsGroup } from '@/ui/ProfileHero';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Calendar, Globe, UserPlus } from 'lucide-react';
import React from 'react';

interface ProfileHeaderProps {
  driver: {
    name: string;
    avatarUrl?: string;
    country: string;
    iracingId: number;
    joinedAtLabel: string;
  };
  stats: {
    ratingLabel: string;
  } | null;
  globalRankLabel: string;
  onAddFriend?: () => void;
  friendRequestSent?: boolean;
  isOwnProfile?: boolean;
}

export function ProfileHeader({
  driver,
  stats,
  globalRankLabel,
  onAddFriend,
  friendRequestSent,
  isOwnProfile,
}: ProfileHeaderProps) {
  return (
    <ProfileHero variant="muted">
      <Box display="flex" alignItems="center" gap={8} flexWrap="wrap">
        <ProfileAvatar>
          <Image
            src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
            alt={driver.name}
            width={96}
            height={96}
            objectFit="cover"
          />
        </ProfileAvatar>

        <Stack flex={1} minWidth="200px" gap={1}>
          <Box marginBottom={1}>
            <Group gap={3}>
              <Heading level={1}>{driver.name}</Heading>
              <Text size="2xl" aria-label={`Country: ${driver.country}`}>
                {CountryFlagFormatter.fromCountryCode(driver.country).toString()}
              </Text>
            </Group>
          </Box>

          <Group gap={4}>
            <Group gap={1.5}>
              <Globe size={14} color="var(--ui-color-text-low)" />
              <Text size="xs" font="mono" variant="low">ID: {driver.iracingId}</Text>
            </Group>
            <Group gap={1.5}>
              <Calendar size={14} color="var(--ui-color-text-low)" />
              <Text size="xs" variant="low">
                Joined {driver.joinedAtLabel}
              </Text>
            </Group>
          </Group>
        </Stack>

        <ProfileStatsGroup>
          {stats && (
            <React.Fragment>
              <ProfileStat label="RATING" value={stats.ratingLabel} intent="primary" />
              <ProfileStat label="GLOBAL RANK" value={globalRankLabel} intent="warning" />
            </React.Fragment>
          )}
        </ProfileStatsGroup>

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