'use client';

import { LeagueRulesPanel } from '@/components/leagues/LeagueRulesPanel';
import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
import { Box } from '@/ui/primitives/Box';
import { Text } from '@/ui/Text';

interface RulebookTemplateProps {
  viewData: RulebookViewData;
}

export function RulebookTemplate({ viewData }: RulebookTemplateProps) {
  const rules = [
    {
      id: 'points',
      title: 'Points System',
      content: `Points are awarded to the top ${viewData.positionPoints.length} finishers. 1st place receives ${viewData.positionPoints[0]?.points || 0} points.`
    },
    {
      id: 'drops',
      title: 'Drop Policy',
      content: viewData.hasActiveDropPolicy ? viewData.dropPolicySummary : 'No drop races are active for this season.'
    },
    {
      id: 'platform',
      title: 'Platform & Sessions',
      content: `Racing on ${viewData.gameName}. Sessions scored: ${viewData.sessionTypes}.`
    }
  ];

  if (viewData.hasBonusPoints) {
    rules.push({
      id: 'bonus',
      title: 'Bonus Points',
      content: viewData.bonusPoints.join('. ')
    });
  }

  return (
    <Box display="flex" flexDirection="col" gap={8}>
      <Box as="header" display="flex" flexDirection="col" gap={2}>
        <Box display="flex" alignItems="center" justifyContent="between">
          <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Rulebook</Text>
          <Box px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
            <Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="widest">
              {viewData.scoringPresetName || 'Custom Rules'}
            </Text>
          </Box>
        </Box>
        <Text size="sm" color="text-zinc-500">Official rules and regulations for this championship.</Text>
      </Box>

      <LeagueRulesPanel rules={rules} />

      <Box as="section" mt={8}>
        <Text as="h3" size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" mb={4} block>Points Classification</Text>
        <Box overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
          <Box as="table" w="full" textAlign="left">
            <Box as="thead">
              <Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
                <Box as="th" px={4} py={2}>
                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Position</Text>
                </Box>
                <Box as="th" px={4} py={2} textAlign="right">
                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Points</Text>
                </Box>
              </Box>
            </Box>
            <Box as="tbody">
              {viewData.positionPoints.map((point) => (
                <Box as="tr" key={point.position} hoverBg="zinc-800/50" transition>
                  <Box as="td" px={4} py={2}>
                    <Text size="sm" color="text-zinc-400" font="mono">{point.position}</Text>
                  </Box>
                  <Box as="td" px={4} py={2} textAlign="right">
                    <Text size="sm" weight="bold" color="text-white">{point.points}</Text>
                  </Box>
                </Box>
              ))}
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}