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

'use client';

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

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 */}
      <Stack textAlign="center" paddingBottom={2}>
        <Box marginBottom={2}>
          <Heading level={3}>
            Every great championship starts with a name
          </Heading>
        </Box>
        <Box maxWidth="lg" marginX="auto">
          <Text size="sm" variant="low">
            This is where legends begin. Give your league an identity that drivers will remember.
          </Text>
        </Box>
      </Stack>

      {/* League name */}
      <Stack gap={3}>
        <Input
          label="League name *"
          icon={<Icon icon={FileText} size={4} intent="primary" />}
          value={basics.name}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateBasics({ name: e.target.value })}
          placeholder="e.g., GridPilot Sprint Series"
          error={errors?.name}
          disabled={disabled}
          autoFocus
          fullWidth
        />
        <Stack gap={2}>
          <Text size="xs" variant="low">
            Make it memorable — this is what drivers will see first
          </Text>
          <Group wrap gap={2}>
            <Text size="xs" variant="low">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
                style={{ fontSize: '0.75rem', height: 'auto', padding: '0.125rem 0.5rem' }}
              >
                {name}
              </Button>
            ))}
          </Group>
        </Stack>
      </Stack>

      {/* Description - Now Required */}
      <TextArea
        label="Tell your story *"
        value={basics.description ?? ''}
        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
          updateBasics({
            description: e.target.value,
          })
        }
        rows={4}
        disabled={disabled}
        error={errors?.description}
        placeholder="What makes your league special? Tell drivers what to expect..."
        fullWidth
      />

      <Surface variant="muted" rounded="lg" border padding={4}>
        <Box marginBottom={3}>
          <Text size="xs" variant="low">
            <Text weight="medium" variant="med">Great descriptions include:</Text>
          </Text>
        </Box>
        <Grid cols={3} gap={3}>
          {[
            'Racing style & pace',
            'Schedule & timezone',
            'Community vibe'
          ].map(item => (
            <Group key={item} align="start" gap={2}>
              <Icon icon={Check} size={3.5} intent="success" style={{ marginTop: '0.125rem' }} />
              <Text size="xs" variant="low">{item}</Text>
            </Group>
          ))}
        </Grid>
      </Surface>

      {/* Game Platform */}
      <Stack gap={2}>
        <Input
          label="Game platform"
          icon={<Icon icon={Gamepad2} size={4} intent="low" />}
          value="iRacing"
          disabled
          fullWidth
        />
        <Text size="xs" variant="low">
          More platforms soon
        </Text>
      </Stack>
    </Stack>
  );
}