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

'use client';

import { FileText, Globe, Lock, Gamepad2 } from 'lucide-react';
import Input from '@/components/ui/Input';
import type {
  LeagueConfigFormModel,
} from '@gridpilot/racing/application';

interface LeagueBasicsSectionProps {
  form: LeagueConfigFormModel;
  onChange?: (form: LeagueConfigFormModel) => void;
  errors?: {
    name?: string;
    visibility?: 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 (
    <div className="space-y-6">
      {/* League name */}
      <div className="space-y-2">
        <label className="flex items-center gap-2 text-sm font-medium text-gray-300">
          <FileText className="w-4 h-4 text-primary-blue" />
          League name *
        </label>
        <Input
          value={basics.name}
          onChange={(e) => updateBasics({ name: e.target.value })}
          placeholder="e.g., GridPilot Sprint Series"
          error={!!errors?.name}
          errorMessage={errors?.name}
          disabled={disabled}
          autoFocus
        />
        <div className="space-y-1">
          <p className="text-xs text-gray-500">
            Choose a clear, memorable name that describes your league
          </p>
          <div className="flex flex-wrap gap-2">
            <button
              type="button"
              onClick={() => updateBasics({ name: 'Weekly Sprint Championship' })}
              className="text-xs text-primary-blue hover:text-primary-blue/80 transition-colors"
              disabled={disabled}
            >
              Example: Weekly Sprint Championship
            </button>
            <span className="text-xs text-gray-600">•</span>
            <button
              type="button"
              onClick={() => updateBasics({ name: 'Sunday Evening Endurance' })}
              className="text-xs text-primary-blue hover:text-primary-blue/80 transition-colors"
              disabled={disabled}
            >
              Example: Sunday Evening Endurance
            </button>
          </div>
        </div>
      </div>

      {/* Description */}
      <div className="space-y-2">
        <label className="flex items-center gap-2 text-sm font-medium text-gray-300">
          <FileText className="w-4 h-4 text-gray-400" />
          Description (optional)
        </label>
        <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 ring-charcoal-outline 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"
          placeholder="Example: A competitive sprint racing series held every Sunday at 19:00 CET. We focus on close racing and fair play. All skill levels welcome!"
        />
        <div className="space-y-1">
          <p className="text-xs text-gray-500">
            Help potential members understand your league's style, schedule, and community
          </p>
          <div className="text-xs text-gray-500">
            <span className="font-medium text-gray-400">Tip:</span> Mention your racing style, typical schedule, and skill level expectations
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Visibility */}
        <div className="space-y-2">
          <label className="flex items-center gap-2 text-sm font-medium text-gray-300">
            <Globe className="w-4 h-4 text-primary-blue" />
            Visibility *
          </label>
          <div className="grid grid-cols-2 gap-3">
            <button
              type="button"
              disabled={disabled}
              onClick={() =>
                updateBasics({
                  visibility: 'public',
                })
              }
              className={`group relative flex flex-col items-center gap-2 px-4 py-4 text-sm rounded-lg border transition-all duration-200 ${
                basics.visibility === 'public'
                  ? 'border-primary-blue bg-primary-blue/10 text-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.2)]'
                  : 'border-charcoal-outline bg-iron-gray/50 text-gray-300 hover:border-gray-500 hover:bg-iron-gray'
              } ${disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}
            >
              <Globe className={`w-5 h-5 ${basics.visibility === 'public' ? 'text-primary-blue' : 'text-gray-400'}`} />
              <div className="text-center">
                <div className="font-medium">Public</div>
                <div className="text-xs text-gray-500 mt-0.5">Anyone can join</div>
              </div>
            </button>
            <button
              type="button"
              disabled={disabled}
              onClick={() =>
                updateBasics({
                  visibility: 'private',
                })
              }
              className={`group relative flex flex-col items-center gap-2 px-4 py-4 text-sm rounded-lg border transition-all duration-200 ${
                basics.visibility === 'private'
                  ? 'border-primary-blue bg-primary-blue/10 text-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.2)]'
                  : 'border-charcoal-outline bg-iron-gray/50 text-gray-300 hover:border-gray-500 hover:bg-iron-gray'
              } ${disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}
            >
              <Lock className={`w-5 h-5 ${basics.visibility === 'private' ? 'text-primary-blue' : 'text-gray-400'}`} />
              <div className="text-center">
                <div className="font-medium">Private</div>
                <div className="text-xs text-gray-500 mt-0.5">Invite only</div>
              </div>
            </button>
          </div>
          {errors?.visibility && (
            <p className="mt-1 text-xs text-warning-amber flex items-center gap-1">
              <span>⚠️</span>
              {errors.visibility}
            </p>
          )}
        </div>

        {/* Game */}
        <div className="space-y-2">
          <label className="flex items-center gap-2 text-sm font-medium text-gray-300">
            <Gamepad2 className="w-4 h-4 text-gray-400" />
            Game platform
          </label>
          <div className="relative">
            <Input value="iRacing" disabled />
            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-500">
              More platforms soon
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}