'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 { Gavel, Clock, User, MessageSquare } from 'lucide-react';

/**
 * StewardingPreview - Refined for "Modern Precision" and "Dieter Rams" style.
 * Thorough down to the last detail.
 */
export function StewardingPreview() {
  return (
    <Section variant="muted" py={32}>
      <Box>
        <Box marginBottom={16} maxWidth="42rem">
          <Heading level={2} weight="bold" marginBottom={6}>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>
        </Box>

        <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: 402-WG</Text>
                </Group>
                <Heading level={3} weight="bold">Turn 1 Contact: Miller vs 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}>
                    <User size={14} className="text-[var(--ui-color-intent-primary)]" />
                    <Text size="xs" uppercase weight="bold" variant="low">Protestor</Text>
                  </Group>
                  <Text weight="bold">Alex Miller</Text>
                  <Text size="sm" variant="low">#42 - Porsche 911 GT3 R</Text>
                </Stack>
              </Panel>
              <Panel variant="bordered" padding="md">
                <Stack gap={3}>
                  <Group gap={2}>
                    <User size={14} className="text-[var(--ui-color-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}>
                    <Clock size={14} className="text-[var(--ui-color-text-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">Watkins Glen - Cup</Text>
                </Stack>
              </Panel>
            </Grid>

            <Stack gap={4}>
              <Group gap={2}>
                <MessageSquare size={14} className="text-[var(--ui-color-text-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={<Gavel size={16} />}>Apply Penalty</Button>
            </Group>
          </Stack>
        </Panel>
      </Box>
    </Section>
  );
}