import { ChevronRight, Globe, Users, Zap } from 'lucide-react';
import { ReactNode } from 'react';
import { Card } from './Card';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';
import { Badge } from './Badge';

export interface TeamCardProps {
  name: string;
  leagueName?: string;
  logo?: ReactNode;
  memberCount: number;
  rating?: string;
  wins?: string;
  races?: string;
  region?: string;
  isRecruiting?: boolean;
  performanceLevel?: string;
  onClick?: () => void;
  description?: string;
}

export const TeamCard = ({ 
  name, 
  leagueName,
  logo, 
  memberCount, 
  rating,
  wins,
  races,
  region = 'EU',
  isRecruiting,
  performanceLevel,
  description,
  onClick 
}: TeamCardProps) => {
  return (
    <Card 
      variant="precision" 
      padding="none" 
      onClick={onClick}
      transition
    >
      <div className="p-6 space-y-6">
        {/* Header: Logo and Identity */}
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 bg-[var(--ui-color-bg-base)] flex items-center justify-center overflow-hidden border border-[var(--ui-color-border-muted)]">
            {logo || <Icon icon={Users} size={5} intent="low" />}
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between gap-2">
              <Heading level={4} weight="bold" truncate uppercase>{name}</Heading>
              {isRecruiting && (
                <Badge variant="success" size="xs">RECRUITING</Badge>
              )}
            </div>
            <div className="flex items-center gap-2">
              {leagueName && <Text size="xs" variant="low" truncate uppercase mono>{leagueName}</Text>}
              {performanceLevel && (
                <div className="flex items-center gap-1">
                  <Icon icon={Zap} size={3} intent="telemetry" />
                  <Text size="xs" variant="telemetry" mono uppercase>{performanceLevel}</Text>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Technical Stats Grid - Engineered Look */}
        {(rating || wins || races) && (
          <div className="grid grid-cols-3 gap-px bg-[var(--ui-color-border-muted)] border border-[var(--ui-color-border-muted)]">
            <div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
              <Text size="xs" variant="low" uppercase block mb={1} mono>Rating</Text>
              <Text size="md" weight="bold" mono variant="primary">{rating || '-'}</Text>
            </div>
            <div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
              <Text size="xs" variant="low" uppercase block mb={1} mono>Wins</Text>
              <Text size="md" weight="bold" mono variant="telemetry">{wins || '-'}</Text>
            </div>
            <div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
              <Text size="xs" variant="low" uppercase block mb={1} mono>Races</Text>
              <Text size="md" weight="bold" mono variant="high">{races || '-'}</Text>
            </div>
          </div>
        )}

        {description && (
          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
            {description}
          </Text>
        )}

        {/* Footer: Metadata */}
        <div className="flex items-center justify-between pt-4 border-t border-[var(--ui-color-border-muted)]">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-1.5">
              <Icon icon={Users} size={3} intent="low" />
              <Text size="xs" variant="low" mono>{memberCount}</Text>
            </div>
            <div className="flex items-center gap-1.5">
              <Icon icon={Globe} size={3} intent="low" />
              <Text size="xs" variant="low" mono>{region}</Text>
            </div>
          </div>
          
          <div className="flex items-center gap-1 text-[var(--ui-color-intent-primary)]">
            <Text size="xs" weight="bold" uppercase mono>Details</Text>
            <Icon icon={ChevronRight} size={3} />
          </div>
        </div>
      </div>
    </Card>
  );
};