'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Badge } from '@/ui/Badge';
import { Grid } from '@/ui/Grid';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
import { Surface } from '@/ui/Surface';
import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';

interface RulebookTemplateProps {
  viewData: RulebookViewData;
}

export function RulebookTemplate({ viewData }: RulebookTemplateProps) {
  return (
    <Stack gap={6}>
      {/* Header */}
      <Stack direction="row" align="center" justify="between">
        <Box>
          <Heading level={1}>Rulebook</Heading>
          <Text size="sm" color="text-gray-400" block mt={1}>Official rules and regulations</Text>
        </Box>
        <Badge variant="primary">
          {viewData.scoringPresetName || 'Custom Rules'}
        </Badge>
      </Stack>

      {/* Quick Stats */}
      <Grid cols={4} gap={4}>
        <StatItem label="Platform" value={viewData.gameName} />
        <StatItem label="Championships" value={viewData.championshipsCount} />
        <StatItem label="Sessions Scored" value={viewData.sessionTypes} />
        <StatItem label="Drop Policy" value={viewData.hasActiveDropPolicy ? 'Active' : 'None'} />
      </Grid>

      {/* Points Table */}
      <Card>
        <Box mb={4}>
          <Heading level={2}>Points System</Heading>
        </Box>
        <Table>
          <TableHead>
            <TableRow>
              <TableHeader>Position</TableHeader>
              <TableHeader>Points</TableHeader>
            </TableRow>
          </TableHead>
          <TableBody>
            {viewData.positionPoints.map((point) => (
              <TableRow key={point.position}>
                <TableCell>
                  <Text color="text-white">{point.position}</Text>
                </TableCell>
                <TableCell>
                  <Text color="text-white">{point.points}</Text>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>

      {/* Bonus Points */}
      {viewData.hasBonusPoints && (
        <Card>
          <Box mb={4}>
            <Heading level={2}>Bonus Points</Heading>
          </Box>
          <Stack gap={2}>
            {viewData.bonusPoints.map((bonus, idx) => (
              <Surface
                key={idx}
                variant="muted"
                rounded="lg"
                border
                padding={3}
              >
                <Stack direction="row" align="center" gap={4}>
                  <Surface variant="muted" rounded="full" padding={1} w="8" h="8" bg="bg-performance-green/10" borderColor="border-performance-green/20" display="flex" alignItems="center" justifyContent="center" border>
                    <Text color="text-performance-green" weight="bold">+</Text>
                  </Surface>
                  <Text size="sm" color="text-gray-300">{bonus}</Text>
                </Stack>
              </Surface>
            ))}
          </Stack>
        </Card>
      )}

      {/* Drop Policy */}
      {viewData.hasActiveDropPolicy && (
        <Card>
          <Box mb={4}>
            <Heading level={2}>Drop Policy</Heading>
          </Box>
          <Text size="sm" color="text-gray-300">{viewData.dropPolicySummary}</Text>
          <Box mt={3}>
            <Text size="xs" color="text-gray-500" block>
              Drop rules are applied automatically when calculating championship standings.
            </Text>
          </Box>
        </Card>
      )}
    </Stack>
  );
}

function StatItem({ label, value }: { label: string, value: string | number }) {
  return (
    <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800" borderColor="border-neutral-800">
      <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em" block mb={1}>{label}</Text>
      <Text weight="semibold" color="text-white" size="lg">{value}</Text>
    </Surface>
  );
}