gridpilot.gg/apps/website/templates/LeagueAdminScheduleTemplate.tsx

'use client';

import { useMemo, useState } from 'react';
import type { LeagueAdminScheduleViewModel } from '@/lib/view-models/LeagueAdminScheduleViewModel';
import type { LeagueSeasonSummaryViewModel } from '@/lib/view-models/LeagueSeasonSummaryViewModel';
import Card from '@/components/ui/Card';

// ============================================================================
// TYPES
// ============================================================================

interface LeagueAdminScheduleTemplateProps {
  data: {
    schedule: LeagueAdminScheduleViewModel;
    seasons: LeagueSeasonSummaryViewModel[];
    seasonId: string;
  };
  onSeasonChange: (seasonId: string) => void;
  onPublishToggle: () => void;
  onAddOrSave: () => void;
  onEdit: (raceId: string) => void;
  onDelete: (raceId: string) => void;
  onCancelEdit: () => void;
  
  // Form state
  track: string;
  car: string;
  scheduledAtIso: string;
  editingRaceId: string | null;
  
  // Mutation states
  isPublishing: boolean;
  isSaving: boolean;
  isDeleting: string | null;
  
  // Form setters
  setTrack: (value: string) => void;
  setCar: (value: string) => void;
  setScheduledAtIso: (value: string) => void;
}

// ============================================================================
// MAIN TEMPLATE COMPONENT
// ============================================================================

export function LeagueAdminScheduleTemplate({
  data,
  onSeasonChange,
  onPublishToggle,
  onAddOrSave,
  onEdit,
  onDelete,
  onCancelEdit,
  track,
  car,
  scheduledAtIso,
  editingRaceId,
  isPublishing,
  isSaving,
  isDeleting,
  setTrack,
  setCar,
  setScheduledAtIso,
}: LeagueAdminScheduleTemplateProps) {
  const { schedule, seasons, seasonId } = data;
  
  const isEditing = editingRaceId !== null;
  const publishedLabel = schedule.published ? 'Published' : 'Unpublished';

  const selectedSeasonLabel = useMemo(() => {
    const selected = seasons.find((s) => s.seasonId === seasonId);
    return selected?.name ?? seasonId;
  }, [seasons, seasonId]);

  return (
    <div className="space-y-6">
      <Card>
        <div className="space-y-4">
          <div>
            <h1 className="text-2xl font-bold text-white">Schedule Admin</h1>
            <p className="text-sm text-gray-400">Create, edit, and publish season races.</p>
          </div>

          <div className="flex flex-col gap-2">
            <label className="text-sm text-gray-300" htmlFor="seasonId">
              Season
            </label>
            {seasons.length > 0 ? (
              <select
                id="seasonId"
                value={seasonId}
                onChange={(e) => onSeasonChange(e.target.value)}
                className="bg-iron-gray text-white px-3 py-2 rounded"
              >
                {seasons.map((s) => (
                  <option key={s.seasonId} value={s.seasonId}>
                    {s.name}
                  </option>
                ))}
              </select>
            ) : (
              <input
                id="seasonId"
                value={seasonId}
                onChange={(e) => onSeasonChange(e.target.value)}
                className="bg-iron-gray text-white px-3 py-2 rounded"
                placeholder="season-id"
              />
            )}
            <p className="text-xs text-gray-500">Selected: {selectedSeasonLabel}</p>
          </div>

          <div className="flex items-center justify-between gap-3">
            <p className="text-sm text-gray-300">
              Status: <span className="font-medium text-white">{publishedLabel}</span>
            </p>
            <button
              type="button"
              onClick={onPublishToggle}
              disabled={!schedule || isPublishing}
              className="px-3 py-1.5 rounded bg-primary-blue text-white disabled:opacity-50"
            >
              {isPublishing ? 'Processing...' : (schedule?.published ? 'Unpublish' : 'Publish')}
            </button>
          </div>

          <div className="border-t border-charcoal-outline pt-4 space-y-3">
            <h2 className="text-lg font-semibold text-white">{isEditing ? 'Edit race' : 'Add race'}</h2>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div className="flex flex-col gap-1">
                <label htmlFor="track" className="text-sm text-gray-300">
                  Track
                </label>
                <input
                  id="track"
                  value={track}
                  onChange={(e) => setTrack(e.target.value)}
                  className="bg-iron-gray text-white px-3 py-2 rounded"
                />
              </div>

              <div className="flex flex-col gap-1">
                <label htmlFor="car" className="text-sm text-gray-300">
                  Car
                </label>
                <input
                  id="car"
                  value={car}
                  onChange={(e) => setCar(e.target.value)}
                  className="bg-iron-gray text-white px-3 py-2 rounded"
                />
              </div>

              <div className="flex flex-col gap-1">
                <label htmlFor="scheduledAtIso" className="text-sm text-gray-300">
                  Scheduled At (ISO)
                </label>
                <input
                  id="scheduledAtIso"
                  value={scheduledAtIso}
                  onChange={(e) => setScheduledAtIso(e.target.value)}
                  className="bg-iron-gray text-white px-3 py-2 rounded"
                  placeholder="2025-01-01T12:00:00.000Z"
                />
              </div>
            </div>

            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={onAddOrSave}
                disabled={isSaving}
                className="px-3 py-1.5 rounded bg-primary-blue text-white"
              >
                {isSaving ? 'Processing...' : (isEditing ? 'Save' : 'Add race')}
              </button>

              {isEditing && (
                <button
                  type="button"
                  onClick={onCancelEdit}
                  className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
                >
                  Cancel
                </button>
              )}
            </div>
          </div>

          <div className="border-t border-charcoal-outline pt-4 space-y-3">
            <h2 className="text-lg font-semibold text-white">Races</h2>

            {schedule?.races.length ? (
              <div className="space-y-2">
                {schedule.races.map((race) => (
                  <div
                    key={race.id}
                    className="flex items-center justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
                  >
                    <div className="min-w-0">
                      <p className="text-white font-medium truncate">{race.name}</p>
                      <p className="text-xs text-gray-400 truncate">{race.scheduledAt.toISOString()}</p>
                    </div>

                    <div className="flex items-center gap-2">
                      <button
                        type="button"
                        onClick={() => onEdit(race.id)}
                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
                      >
                        Edit
                      </button>
                      <button
                        type="button"
                        onClick={() => onDelete(race.id)}
                        disabled={isDeleting === race.id}
                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
                      >
                        {isDeleting === race.id ? 'Deleting...' : 'Delete'}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="py-4 text-sm text-gray-500">No races yet.</div>
            )}
          </div>
        </div>
      </Card>
    </div>
  );
}