'use client';

import React from 'react';
import { ChevronRight, Users, Zap } from 'lucide-react';
import { ProfileCard } from '@/ui/ProfileCard';
import { CountryFlag } from '@/ui/CountryFlag';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Logo } from '@/ui/Logo';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';

interface TeamCardProps {
  team?: TeamSummaryData;
  // Compatibility props
  name?: string;
  logo?: string;
  memberCount?: number;
  ratingLabel?: string;
  winsLabel?: string;
  racesLabel?: string;
  region?: string;
  isRecruiting?: boolean;
  performanceLevel?: string;
  description?: string;
  onClick?: (id: string) => void;
}

export function TeamCard({ 
  team, 
  name,
  logo,
  memberCount,
  ratingLabel,
  winsLabel,
  racesLabel,
  region,
  isRecruiting,
  performanceLevel,
  description,
  onClick 
}: TeamCardProps) {
  const data = team || {
    teamId: '',
    teamName: name || '',
    memberCount: memberCount || 0,
    logoUrl: logo,
    ratingLabel: ratingLabel || '-',
    winsLabel: winsLabel || '-',
    racesLabel: racesLabel || '-',
    region: region,
    isRecruiting: isRecruiting || false,
    performanceLevel: performanceLevel,
    description: description,
    countryCode: region,
  };

  return (
    <ProfileCard
      variant="precision"
      onClick={() => onClick?.(data.teamId)}
      identity={
        <Stack direction="row" align="start" gap={4}>
          <Logo 
            src={data.logoUrl} 
            alt={data.teamName} 
            size={40} 
            rounded="sm" 
            variant="dark"
            icon={Users}
          />
          <Stack flex={1} gap={1} paddingTop={1}>
            <Heading level={5} weight="bold" uppercase style={{ lineHeight: '1.2' }}>
              {data.teamName}
            </Heading>
            {data.performanceLevel && (
              <Stack direction="row" align="center" gap={1}>
                <Icon icon={Zap} size={3} intent="telemetry" />
                <Text size="xs" variant="telemetry" mono uppercase>{data.performanceLevel}</Text>
              </Stack>
            )}
          </Stack>
        </Stack>
      }
      actions={
        data.isRecruiting ? (
          <Badge variant="success" size="xs">
            RECRUITING
          </Badge>
        ) : undefined
      }
      stats={
        <Stack gap={4}>
          <Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)', borderRadius: 'var(--ui-radius-md)', overflow: 'hidden' }}>
            <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
              <Text size="xs" variant="low" uppercase block mono>Rating</Text>
              <Text size="sm" weight="bold" mono variant="primary">{data.ratingLabel}</Text>
            </Stack>
            <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
              <Text size="xs" variant="low" uppercase block mono>Wins</Text>
              <Text size="sm" weight="bold" mono variant="telemetry">{data.winsLabel}</Text>
            </Stack>
            <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
              <Text size="xs" variant="low" uppercase block mono>Races</Text>
              <Text size="sm" weight="bold" mono variant="high">{data.racesLabel}</Text>
            </Stack>
          </Grid>

          <Stack direction="row" justify="between" align="center">
            <Stack direction="row" gap={4}>
              <Stack direction="row" align="center" gap={1.5}>
                <Icon icon={Users} size={3} intent="low" />
                <Text size="xs" variant="low" mono>{data.memberCount}</Text>
              </Stack>
              {data.countryCode && (
                <Stack direction="row" align="center" gap={1.5}>
                  <CountryFlag countryCode={data.countryCode} size="sm" />
                  <Text size="xs" variant="low" mono uppercase>{data.countryCode}</Text>
                </Stack>
              )}
            </Stack>
            <Icon icon={ChevronRight} size={3} intent="primary" />
          </Stack>
        </Stack>
      }
    />
  );
}