'use client';

import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '@/ui/ProfileHero';
import { Text } from '@/ui/Text';
import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
import React from '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 (
    <ProfileHero variant="muted">
      <div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
        <ProfileAvatar>
          <Image
            src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
            alt={driver.name}
            width={96}
            height={96}
            objectFit="cover"
          />
        </ProfileAvatar>

        <div style={{ flex: 1, minWidth: '200px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.25rem' }}>
            <Heading level={1}>{driver.name}</Heading>
            <Text size="2xl" aria-label={`Country: ${driver.country}`}>
              {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
            </Text>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
              <Globe size={14} color="var(--ui-color-text-low)" />
              <Text size="xs" font="mono" variant="low">ID: {driver.iracingId}</Text>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
              <Calendar size={14} color="var(--ui-color-text-low)" />
              <Text size="xs" variant="low">
                Joined {new Date(driver.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
              </Text>
            </div>
          </div>
        </div>

        <ProfileStatsGroup>
          {stats && (
            <React.Fragment>
              <ProfileStat label="RATING" value={stats.rating} intent="primary" />
              <ProfileStat label="GLOBAL RANK" value={`#${globalRank}`} intent="warning" />
            </React.Fragment>
          )}
        </ProfileStatsGroup>

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