'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 { PointsTable } from '@/ui/PointsTable';
import { RulebookTabs, type RulebookSection } from '@/ui/RulebookTabs';
import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
import { Surface } from '@/ui/Surface';
import { Clock } from 'lucide-react';

interface LeagueRulebookTemplateProps {
  viewData: LeagueRulebookViewData;
  activeSection: RulebookSection;
  onSectionChange: (section: RulebookSection) => void;
  loading?: boolean;
}

export function LeagueRulebookTemplate({
  viewData,
  activeSection,
  onSectionChange,
  loading = false,
}: LeagueRulebookTemplateProps) {
  if (loading) {
    return (
      <Card>
        <Stack align="center" py={12}>
          <Text color="text-gray-400">Loading rulebook...</Text>
        </Stack>
      </Card>
    );
  }

  if (!viewData || !viewData.scoringConfig) {
    return (
      <Card>
        <Stack align="center" py={12}>
          <Text color="text-gray-400">Unable to load rulebook</Text>
        </Stack>
      </Card>
    );
  }

  const { scoringConfig } = viewData;
  const primaryChampionship = scoringConfig.championships.find(c => c.type === 'driver') ?? scoringConfig.championships[0];
  const positionPoints = viewData.positionPoints;

  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">
          {scoringConfig.scoringPresetName || 'Custom Rules'}
        </Badge>
      </Stack>

      {/* Navigation Tabs */}
      <RulebookTabs activeSection={activeSection} onSectionChange={onSectionChange} />

      {/* Content Sections */}
      {activeSection === 'scoring' && (
        <Stack gap={6}>
          {/* Quick Stats */}
          <Grid cols={4} gap={4}>
            <StatItem label="Platform" value={scoringConfig.gameName} />
            <StatItem label="Championships" value={scoringConfig.championships.length} />
            <StatItem label="Sessions Scored" value={primaryChampionship?.sessionTypes.join(', ') || 'Main'} />
            <StatItem label="Drop Policy" value={scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'} />
          </Grid>

          {/* Weekend Structure */}
          <Card>
            <Stack gap={4}>
              <Stack direction="row" align="center" gap={2}>
                <Clock size={20} color="#3b82f6" />
                <Heading level={2}>Weekend Structure & Timings</Heading>
              </Stack>
              <Grid cols={4} gap={4}>
                <Surface variant="muted" rounded="lg" border padding={3}>
                  <Text size="xs" color="text-gray-500" block mb={1}>PRACTICE</Text>
                  <Text weight="medium" color="text-white">20 min</Text>
                </Surface>
                <Surface variant="muted" rounded="lg" border padding={3}>
                  <Text size="xs" color="text-gray-500" block mb={1}>QUALIFYING</Text>
                  <Text weight="medium" color="text-white">30 min</Text>
                </Surface>
                <Surface variant="muted" rounded="lg" border padding={3}>
                  <Text size="xs" color="text-gray-500" block mb={1}>SPRINT</Text>
                  <Text weight="medium" color="text-white">—</Text>
                </Surface>
                <Surface variant="muted" rounded="lg" border padding={3}>
                  <Text size="xs" color="text-gray-500" block mb={1}>MAIN RACE</Text>
                  <Text weight="medium" color="text-white">40 min</Text>
                </Surface>
              </Grid>
            </Stack>
          </Card>

          {/* Points Table */}
          <PointsTable points={positionPoints} />

          {/* Bonus Points */}
          {primaryChampionship?.bonusSummary && primaryChampionship.bonusSummary.length > 0 && (
            <Card>
              <Stack gap={4}>
                <Heading level={2}>Bonus Points</Heading>
                <Stack gap={2}>
                  {primaryChampionship.bonusSummary.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="2rem" h="2rem" bg="bg-green-500/10" borderColor="border-green-500/20" display="flex" alignItems="center" justifyContent="center">
                          <Text color="text-performance-green" weight="bold">+</Text>
                        </Surface>
                        <Text size="sm" color="text-gray-300">{bonus}</Text>
                      </Stack>
                    </Surface>
                  ))}
                </Stack>
              </Stack>
            </Card>
          )}

          {/* Drop Policy */}
          {!scoringConfig.dropPolicySummary.includes('All results count') && (
            <Card>
              <Stack gap={4}>
                <Heading level={2}>Drop Policy</Heading>
                <Text size="sm" color="text-gray-300">{scoringConfig.dropPolicySummary}</Text>
                <Box mt={3}>
                  <Text size="xs" color="text-gray-500" block>
                    Drop rules are applied automatically when calculating championship standings.
                  </Text>
                </Box>
              </Stack>
            </Card>
          )}
        </Stack>
      )}

      {activeSection === 'conduct' && (
        <Card>
          <Stack gap={4}>
            <Heading level={2}>Driver Conduct</Heading>
            <Stack gap={4}>
              <ConductItem number={1} title="Respect" text="All drivers must treat each other with respect. Abusive language, harassment, or unsportsmanlike behavior will not be tolerated." />
              <ConductItem number={2} title="Clean Racing" text="Intentional wrecking, blocking, or dangerous driving is prohibited. Leave space for other drivers and race cleanly." />
              <ConductItem number={3} title="Track Limits" text="Drivers must stay within track limits. Gaining a lasting advantage by exceeding track limits may result in penalties." />
              <ConductItem number={4} title="Blue Flags" text="Lapped cars must yield to faster traffic within a reasonable time. Failure to do so may result in penalties." />
              <ConductItem number={5} title="Communication" text="Drivers are expected to communicate respectfully in voice and text chat during sessions." />
            </Stack>
          </Stack>
        </Card>
      )}

      {activeSection === 'protests' && (
        <Card>
          <Stack gap={4}>
            <Heading level={2}>Protest Process</Heading>
            <Stack gap={4}>
              <ConductItem number={1} title="Filing a Protest" text="Protests can be filed within 48 hours of the race conclusion. Include the lap number, drivers involved, and a clear description of the incident." />
              <ConductItem number={2} title="Evidence" text="Video evidence is highly recommended but not required. Stewards will review available replay data." />
              <ConductItem number={3} title="Review Process" text="League stewards will review protests and make decisions within 72 hours. Decisions are final unless new evidence is presented." />
              <ConductItem number={4} title="Outcomes" text="Protests may result in no action, warnings, time penalties, position penalties, or points deductions depending on severity." />
            </Stack>
          </Stack>
        </Card>
      )}

      {activeSection === 'penalties' && (
        <Card>
          <Stack gap={4}>
            <Heading level={2}>Penalty Guidelines</Heading>
            <Stack gap={4}>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableHeader>Infraction</TableHeader>
                    <TableHeader>Typical Penalty</TableHeader>
                  </TableRow>
                </TableHead>
                <TableBody>
                  <PenaltyRow infraction="Causing avoidable contact" penalty="5-10 second time penalty" />
                  <PenaltyRow infraction="Unsafe rejoin" penalty="5 second time penalty" />
                  <PenaltyRow infraction="Blocking" penalty="Warning or 3 second penalty" />
                  <PenaltyRow infraction="Repeated track limit violations" penalty="5 second penalty" />
                  <PenaltyRow infraction="Intentional wrecking" penalty="Disqualification" color="#f87171" />
                  <PenaltyRow infraction="Unsportsmanlike conduct" penalty="Points deduction or ban" color="#f87171" />
                </TableBody>
              </Table>
              <Box mt={4}>
                <Text size="xs" color="text-gray-500" block>
                  Penalties are applied at steward discretion based on incident severity and driver history.
                </Text>
              </Box>
            </Stack>
          </Stack>
        </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" block mb={1}>{label.toUpperCase()}</Text>
      <Text weight="semibold" color="text-white" size="lg">{value}</Text>
    </Surface>
  );
}

function ConductItem({ number, title, text }: { number: number, title: string, text: string }) {
  return (
    <Box>
      <Text weight="medium" color="text-white" block mb={2}>{number}. {title}</Text>
      <Text size="sm" color="text-gray-300">{text}</Text>
    </Box>
  );
}

function PenaltyRow({ infraction, penalty, color }: { infraction: string, penalty: string, color?: string }) {
  return (
    <TableRow>
      <TableCell>
        <Text size="sm" color="text-gray-300">{infraction}</Text>
      </TableCell>
      <TableCell>
        <Text size="sm" color={color === '#f87171' ? 'text-error-red' : 'text-warning-amber'}>{penalty}</Text>
      </TableCell>
    </TableRow>
  );
}