"use client";

import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Button, Card } from "@/components/ui";
import { inputClass } from "@/components/ui/form";
import { createTrackAction, deleteTrackAction } from "@/lib/actions/events";

export function TracksPanel({ eventId, tracks, canManage }: { eventId: string; tracks: { id: string; name: string; sessions: number }[]; canManage: boolean }) {
  const router = useRouter();
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <Card className="max-w-xl space-y-3 p-4">
      <p className="text-sm text-muted-foreground">Tracks group sessions into themes (e.g. “Keynotes”, “Workshops”). Deleting a track keeps its sessions.</p>
      {tracks.length === 0 ? <p className="text-sm">No tracks yet.</p> : null}
      <ul className="divide-y divide-border rounded-md border border-border">
        {tracks.map((t) => (
          <li key={t.id} className="flex items-center justify-between gap-2 p-3 text-sm">
            <span>{t.name} <span className="text-xs text-muted-foreground">({t.sessions} session{t.sessions === 1 ? "" : "s"})</span></span>
            {canManage ? <Button variant="ghost" disabled={pending} aria-label={`Delete track ${t.name}`} onClick={() => start(async () => { const r = await deleteTrackAction(t.id); if (r.ok) router.refresh(); else setError(r.error); })}>Delete</Button> : null}
          </li>
        ))}
      </ul>
      {canManage ? (
        <form className="flex gap-2" action={(f) => start(async () => { setError(null); const r = await createTrackAction(eventId, String(f.get("name") ?? "")); if (r.ok) { router.refresh(); } else setError(r.fieldErrors?.name ?? r.error); })}>
          <label htmlFor="track-name" className="sr-only">New track name</label>
          <input id="track-name" name="name" required maxLength={80} placeholder="New track" className={inputClass} />
          <Button type="submit" variant="secondary" disabled={pending}>Add track</Button>
        </form>
      ) : null}
      {error ? <p role="alert" className="text-sm text-danger">{error}</p> : null}
    </Card>
  );
}