'use client';

import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { InfoItem } from '@/ui/InfoItem';
import { Award, Calendar, Eye, Gamepad2, Hash, Trophy, Users } from 'lucide-react';

interface ReadonlyLeagueInfoProps {
  league: {
    id: string;
    name: string;
    ownerId: string;
    createdAt?: string;
  };
  configForm: LeagueConfigFormModel;
}

export function ReadonlyLeagueInfo({ league, configForm }: ReadonlyLeagueInfoProps) {
  const basics = configForm.basics;
  const structure = configForm.structure;
  const timings = configForm.timings;
  const scoring = configForm.scoring;

  const infoItems = [
    {
      icon: Hash,
      label: 'League Name',
      value: basics.name,
    },
    {
      icon: Eye,
      label: 'Visibility',
      value: basics.visibility === 'public' ? 'Ranked' : 'Unranked',
    },
    {
      icon: Users,
      label: 'Structure',
      value: structure.mode === 'solo'
        ? `Solo • ${structure.maxDrivers} drivers`
        : `Teams • ${structure.maxTeams} × ${structure.driversPerTeam} drivers`,
    },
    {
      icon: Gamepad2,
      label: 'Platform',
      value: 'iRacing',
    },
    {
      icon: Award,
      label: 'Scoring',
      value: scoring.patternId ?? 'Standard',
    },
    {
      icon: Calendar,
      label: 'Created',
      value: league.createdAt ? new Date(league.createdAt).toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
      }) : '—',
    },
    {
      icon: Trophy,
      label: 'Season',
      value: `${timings.roundsPlanned ?? '—'} rounds`,
    },
  ];

  return (
    <Box rounded="xl" border borderColor="border-charcoal-outline" bg="bg-iron-gray/40" p={5}>
      <Heading level={5} color="text-gray-400" mb={4}>League Information</Heading>
      
      <Box display="grid" responsiveGridCols={{ base: 2, sm: 3 }} gap={4}>
        {infoItems.map((item, index) => (
          <InfoItem
            key={index}
            icon={item.icon}
            label={item.label}
            value={item.value}
          />
        ))}
      </Box>
    </Box>
  );
}