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

'use client';

import React from 'react';
import { FileText, Gamepad2, AlertCircle, 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';

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}>
        <Text as="label" size="sm" weight="medium" color="text-gray-300">
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={FileText} size={4} color="text-primary-blue" />
            League name *
          </Stack>
        </Text>
        <Input
          value={basics.name}
          onChange={(e) => 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"
                className="h-auto py-0.5 px-2 rounded-full text-xs"
                disabled={disabled}
              >
                {name}
              </Button>
            ))}
          </Stack>
        </Stack>
      </Stack>

      {/* Description - Now Required */}
      <Stack gap={3}>
        <Text as="label" size="sm" weight="medium" color="text-gray-300">
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={FileText} size={4} color="text-primary-blue" />
            Tell your story *
          </Stack>
        </Text>
        <Box position="relative">
          <textarea
            value={basics.description ?? ''}
            onChange={(e) =>
              updateBasics({
                description: e.target.value,
              })
            }
            rows={4}
            disabled={disabled}
            className={`block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-150 ${
              errors?.description ? 'ring-warning-amber' : 'ring-charcoal-outline'
            }`}
            placeholder="What makes your league special? Tell drivers what to expect..."
          />
        </Box>
        {errors?.description && (
          <Text size="xs" color="text-warning-amber">
            <Stack direction="row" align="center" gap={1.5}>
              <Icon icon={AlertCircle} size={3} />
              {errors.description}
            </Stack>
          </Text>
        )}
        <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="text-performance-green" className="mt-0.5" />
                <Text size="xs" color="text-gray-400">{item}</Text>
              </Stack>
            ))}
          </Grid>
        </Surface>
      </Stack>

      {/* Game Platform */}
      <Stack gap={2}>
        <Text as="label" size="sm" weight="medium" color="text-gray-300">
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Gamepad2} size={4} color="text-gray-400" />
            Game platform
          </Stack>
        </Text>
        <Box position="relative">
          <Input value="iRacing" disabled />
          <Box position="absolute" right={3} top="50%" style={{ transform: 'translateY(-50%)' }}>
            <Text size="xs" color="text-gray-500">
              More platforms soon
            </Text>
          </Box>
        </Box>
      </Stack>
    </Stack>
  );
}