gridpilot.gg/apps/website/components/leagues/LeagueBasicsSection.tsx

'use client';

import React from 'react';
import { FileText, Gamepad2, Check } from 'lucide-react';
import { Input } from '@/ui/Input';
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/Grid';
import { Surface } from '@/ui/Surface';
import { Button } from '@/ui/Button';
import { TextArea } from '@/ui/TextArea';

interface LeagueBasicsSectionProps {
  form: LeagueConfigFormModel;
  onChange?: (form: LeagueConfigFormModel) => void;
  errors?: {
    name?: string;
    description?: string;
  };
  readOnly?: boolean;
}

export function LeagueBasicsSection({
  form,
  onChange,
  errors,
  readOnly,
}: LeagueBasicsSectionProps) {
  const basics = form.basics;
  const disabled = readOnly || !onChange;

  const updateBasics = (patch: Partial<typeof basics>) => {
    if (!onChange) return;
    onChange({
      ...form,
      basics: {
        ...form.basics,
        ...patch,
      },
    });
  };

  return (
    <Stack gap={8}>
      {/* Emotional header for the step */}
      <Box textAlign="center" pb={2}>
        <Box mb={2}>
          <Heading level={3}>
            Every great championship starts with a name
          </Heading>
        </Box>
        <Box maxWidth="lg" mx="auto">
          <Text size="sm" color="text-gray-400">
            This is where legends begin. Give your league an identity that drivers will remember.
          </Text>
        </Box>
      </Box>

      {/* League name */}
      <Stack gap={3}>
        <Input
          label={
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={FileText} size={4} color="var(--primary-blue)" />
              <Text size="sm" weight="medium" color="text-gray-300">League name *</Text>
            </Stack>
          }
          value={basics.name}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateBasics({ name: e.target.value })}
          placeholder="e.g., GridPilot Sprint Series"
          variant={errors?.name ? 'error' : 'default'}
          errorMessage={errors?.name}
          disabled={disabled}
          autoFocus
        />
        <Stack gap={2}>
          <Text size="xs" color="text-gray-500">
            Make it memorable — this is what drivers will see first
          </Text>
          <Stack direction="row" wrap gap={2}>
            <Text size="xs" color="text-gray-500">Try:</Text>
            {[
              'Sunday Showdown Series',
              'Midnight Endurance League',
              'GT Masters Championship'
            ].map(name => (
              <Button
                key={name}
                type="button"
                onClick={() => updateBasics({ name })}
                variant="secondary"
                size="sm"
                disabled={disabled}
                rounded="full"
                fontSize="0.75rem"
                px={2}
                py={0.5}
                h="auto"
              >
                {name}
              </Button>
            ))}
          </Stack>
        </Stack>
      </Stack>

      {/* Description - Now Required */}
      <TextArea
        label={
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={FileText} size={4} color="var(--primary-blue)" />
            <Text size="sm" weight="medium" color="text-gray-300">Tell your story *</Text>
          </Stack>
        }
        value={basics.description ?? ''}
        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
          updateBasics({
            description: e.target.value,
          })
        }
        rows={4}
        disabled={disabled}
        variant={errors?.description ? 'error' : 'default'}
        errorMessage={errors?.description}
        placeholder="What makes your league special? Tell drivers what to expect..."
      />

      <Surface variant="muted" rounded="lg" border padding={4}>
        <Box mb={3}>
          <Text size="xs" color="text-gray-400">
            <Text weight="medium" color="text-gray-300">Great descriptions include:</Text>
          </Text>
        </Box>
        <Grid cols={3} gap={3}>
          {[
            'Racing style & pace',
            'Schedule & timezone',
            'Community vibe'
          ].map(item => (
            <Stack key={item} direction="row" align="start" gap={2}>
              <Icon icon={Check} size={3.5} color="var(--performance-green)" mt={0.5} />
              <Text size="xs" color="text-gray-400">{item}</Text>
            </Stack>
          ))}
        </Grid>
      </Surface>

      {/* Game Platform */}
      <Stack gap={2}>
        <Input
          label={
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={Gamepad2} size={4} color="var(--text-gray-400)" />
              <Text size="sm" weight="medium" color="text-gray-300">Game platform</Text>
            </Stack>
          }
          value="iRacing"
          disabled
        />
        <Text size="xs" color="text-gray-500">
          More platforms soon
        </Text>
      </Stack>
    </Stack>
  );
}