'use client';

import React from 'react';
import { Section } from '@/ui/Section';
import { Panel } from '@/ui/Panel';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { StatusBadge } from '@/ui/StatusBadge';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Gavel, Clock, User, MessageSquare } from 'lucide-react';

interface StewardingPreviewProps {
  race?: {
    id: string;
    track: string;
    car: string;
    formattedDate: string;
  };
  team?: {
    id: string;
    name: string;
    description: string;
  };
}

/**
 * StewardingPreview - Refined for "Modern Precision" and "Dieter Rams" style.
 * Thorough down to the last detail.
 */
export function StewardingPreview({ race, team }: StewardingPreviewProps) {
  const incidentId = race ? `${race.id.slice(0, 3).toUpperCase()}-WG` : '402-WG';
  const trackName = race?.track || 'Watkins Glen - Cup';
  const carName = race?.car || 'Porsche 911 GT3 R';
  const teamName = team?.name || 'Alex Miller';

  return (
    <Section variant="muted" padding="lg">
      <Stack gap={16}>
        <Stack gap={6} maxWidth="42rem">
          <Heading level={2} weight="bold">Structured Stewarding</Heading>
          <Text variant="med" size="lg" leading="relaxed">
            Protests are part of racing. Managing them shouldn't be a second job. 
            GridPilot provides a dedicated workflow for drivers to report incidents and for you to resolve them with precision.
          </Text>
        </Stack>

        <Panel variant="elevated" padding="lg">
          <Stack gap={8}>
            <Group justify="between" align="center">
              <Stack gap={1}>
                <Group gap={2}>
                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">Incident Report</Text>
                  <Text variant="low" size="xs">•</Text>
                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: {incidentId}</Text>
                </Group>
                <Heading level={3} weight="bold">Turn 1 Contact: {teamName} vs David Chen</Heading>
              </Stack>
              <StatusBadge variant="warning">UNDER REVIEW</StatusBadge>
            </Group>

            <Grid cols={{ base: 1, md: 3 }} gap={6}>
              <Panel variant="bordered" padding="md">
                <Stack gap={3}>
                  <Group gap={2}>
                    <Icon icon={User} size={4} intent="primary" />
                    <Text size="xs" uppercase weight="bold" variant="low">Protestor</Text>
                  </Group>
                  <Text weight="bold">{teamName}</Text>
                  <Text size="sm" variant="low">#42 - {carName}</Text>
                </Stack>
              </Panel>
              <Panel variant="bordered" padding="md">
                <Stack gap={3}>
                  <Group gap={2}>
                    <Icon icon={User} size={4} intent="critical" />
                    <Text size="xs" uppercase weight="bold" variant="low">Defendant</Text>
                  </Group>
                  <Text weight="bold">David Chen</Text>
                  <Text size="sm" variant="low">#18 - BMW M4 GT3</Text>
                </Stack>
              </Panel>
              <Panel variant="bordered" padding="md">
                <Stack gap={3}>
                  <Group gap={2}>
                    <Icon icon={Clock} size={4} intent="low" />
                    <Text size="xs" uppercase weight="bold" variant="low">Session Info</Text>
                  </Group>
                  <Text weight="bold">Lap 1, 00:42.150</Text>
                  <Text size="sm" variant="low">{trackName}</Text>
                </Stack>
              </Panel>
            </Grid>

            <Stack gap={4}>
              <Group gap={2}>
                <Icon icon={MessageSquare} size={4} intent="low" />
                <Text size="xs" uppercase weight="bold" variant="low">Description</Text>
              </Group>
              <Panel variant="muted" padding="md">
                <Text size="sm" variant="high" leading="relaxed">
                  "David missed his braking point into T1 and hit my rear right corner. 
                  I was forced into the grass and lost 4 positions. Replay attached shows he was never alongside."
                </Text>
              </Panel>
            </Stack>

            <Group gap={3} justify="end">
              <Button variant="secondary" size="md">Dismiss</Button>
              <Button variant="primary" size="md" icon={<Icon icon={Gavel} size={4} />}>Apply Penalty</Button>
            </Group>
          </Stack>
        </Panel>
      </Stack>
    </Section>
  );
}