"use client";

import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Button, Card, StatusBadge } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { createSessionAction, deleteSessionAction, setSessionStatusAction, updateSessionAction } from "@/lib/actions/events";

export interface SessionRow { id: string; title: string; description: string; startsLocal: string; endsLocal: string; whenLabel: string; venue: string; trackId: string | null; trackName: string | null; status: "DRAFT" | "PUBLISHED"; speakerIds: string[]; speakerNames: string[] }
interface Props { eventId: string; sessions: SessionRow[]; tracks: { id: string; name: string }[]; speakers: { id: string; title: string }[]; canManage: boolean; canEdit: boolean; timezone: string; defaultStart: string }

const blank = (start: string): Omit<SessionRow, "id" | "whenLabel" | "trackName" | "status" | "speakerNames"> => ({ title: "", description: "", startsLocal: start, endsLocal: start, venue: "", trackId: null, speakerIds: [] });

export function SessionsPanel({ eventId, sessions, tracks, speakers, canManage, canEdit, timezone, defaultStart }: Props) {
  const router = useRouter();
  const [editing, setEditing] = useState<string | "new" | null>(null);
  const [form, setForm] = useState(blank(defaultStart));
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
  const [pending, start] = useTransition();
  const [confirmId, setConfirmId] = useState<string | null>(null);
  const set = <K extends keyof typeof form>(k: K, v: (typeof form)[K]) => setForm((f) => ({ ...f, [k]: v }));

  function open(s?: SessionRow) {
    setErrors({}); setMessage(null);
    setForm(s ? { title: s.title, description: s.description, startsLocal: s.startsLocal, endsLocal: s.endsLocal, venue: s.venue, trackId: s.trackId, speakerIds: s.speakerIds } : blank(defaultStart));
    setEditing(s ? s.id : "new");
  }
  function submit() {
    setErrors({});
    start(async () => {
      const payload = { ...form, trackId: form.trackId ?? undefined };
      const res = editing === "new" ? await createSessionAction(eventId, payload) : await updateSessionAction(editing ?? "", payload);
      if (res.ok) { setEditing(null); setMessage({ ok: true, text: res.message ?? "Saved" }); router.refresh(); }
      else { setErrors(res.fieldErrors ?? {}); setMessage({ ok: false, text: res.error }); }
    });
  }
  const run = (fn: () => Promise<{ ok: boolean; error?: string; message?: string }>) =>
    start(async () => { const r = await fn(); setConfirmId(null); if (r.ok) { setMessage({ ok: true, text: r.message ?? "Done" }); router.refresh(); } else setMessage({ ok: false, text: r.error ?? "Something went wrong" }); });

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3">
        {canEdit ? <Button onClick={() => open()}>Add session</Button> : null}
        <p className="text-xs text-muted-foreground">Times are in the event’s time zone ({timezone}).</p>
        {message ? <p role={message.ok ? "status" : "alert"} className={message.ok ? "text-sm text-success" : "text-sm text-danger"}>{message.text}</p> : null}
      </div>

      {editing ? (
        <Card className="p-4">
          <form onSubmit={(e) => { e.preventDefault(); submit(); }} className="grid gap-4 sm:grid-cols-2" noValidate>
            <h2 className="text-sm font-semibold sm:col-span-2">{editing === "new" ? "New session" : "Edit session"}</h2>
            <Field id="s-title" label="Title" error={errors.title} className="sm:col-span-2"><input id="s-title" value={form.title} maxLength={200} onChange={(e) => set("title", e.target.value)} className={inputClass} aria-invalid={errors.title ? true : undefined} /></Field>
            <Field id="s-start" label="Starts" error={errors.startsLocal}><input id="s-start" type="datetime-local" value={form.startsLocal} onChange={(e) => set("startsLocal", e.target.value)} className={inputClass} aria-invalid={errors.startsLocal ? true : undefined} /></Field>
            <Field id="s-end" label="Ends" error={errors.endsLocal}><input id="s-end" type="datetime-local" value={form.endsLocal} onChange={(e) => set("endsLocal", e.target.value)} className={inputClass} aria-invalid={errors.endsLocal ? true : undefined} /></Field>
            <Field id="s-venue" label="Room / venue" error={errors.venue}><input id="s-venue" value={form.venue} maxLength={160} onChange={(e) => set("venue", e.target.value)} className={inputClass} /></Field>
            <Field id="s-track" label="Track" error={errors.trackId}>
              <select id="s-track" value={form.trackId ?? ""} onChange={(e) => set("trackId", e.target.value || null)} className={inputClass}><option value="">No track</option>{tracks.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}</select>
            </Field>
            <fieldset className="sm:col-span-2">
              <legend className="mb-1 text-xs font-medium">Speakers</legend>
              {speakers.length === 0 ? <p className="text-sm text-muted-foreground">Add speakers in the Speakers library first.</p> : (
                <ul className="grid max-h-48 gap-1 overflow-y-auto rounded-md border border-border p-2 sm:grid-cols-2">
                  {speakers.map((sp) => (
                    <li key={sp.id}><label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={form.speakerIds.includes(sp.id)} onChange={(e) => set("speakerIds", e.target.checked ? [...form.speakerIds, sp.id] : form.speakerIds.filter((x) => x !== sp.id))} />{sp.title}</label></li>
                  ))}
                </ul>
              )}
              {errors.speakerIds ? <p role="alert" className="mt-1 text-xs text-danger">{errors.speakerIds}</p> : null}
            </fieldset>
            <Field id="s-desc" label="Description" error={errors.description} className="sm:col-span-2"><textarea id="s-desc" rows={3} value={form.description} maxLength={4000} onChange={(e) => set("description", e.target.value)} className={inputClass} /></Field>
            <div className="flex gap-2 sm:col-span-2"><Button type="submit" disabled={pending}>{pending ? "Saving…" : "Save session"}</Button><Button variant="ghost" onClick={() => setEditing(null)}>Cancel</Button></div>
          </form>
        </Card>
      ) : null}

      <Card>
        {sessions.length === 0 ? <p className="p-4 text-sm text-muted-foreground">No sessions yet.</p> : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
              <thead className="border-b border-border text-xs text-muted-foreground"><tr><th className="px-4 py-2 font-medium">When</th><th className="px-4 py-2 font-medium">Session</th><th className="px-4 py-2 font-medium">Track / room</th><th className="px-4 py-2 font-medium">Status</th><th className="px-4 py-2" /></tr></thead>
              <tbody className="divide-y divide-border">
                {sessions.map((s) => {
                  const canChange = s.status === "DRAFT" ? canEdit : canManage;
                  return (
                    <tr key={s.id}>
                      <td className="whitespace-nowrap px-4 py-2 tabular-nums">{s.whenLabel}</td>
                      <td className="px-4 py-2 font-medium">{s.title}{s.speakerNames.length ? <span className="block text-xs font-normal text-muted-foreground">{s.speakerNames.join(", ")}</span> : null}</td>
                      <td className="px-4 py-2">{[s.trackName, s.venue].filter(Boolean).join(" · ") || "—"}</td>
                      <td className="px-4 py-2"><StatusBadge value={s.status} /></td>
                      <td className="px-4 py-2 text-right">
                        <div className="flex flex-wrap justify-end gap-1">
                          {canChange ? <Button variant="ghost" aria-label={`Edit ${s.title}`} onClick={() => open(s)}>Edit</Button> : null}
                          {canManage ? <Button variant="ghost" disabled={pending} onClick={() => run(() => setSessionStatusAction(s.id, s.status === "DRAFT" ? "PUBLISHED" : "DRAFT"))}>{s.status === "DRAFT" ? "Publish" : "Unpublish"}</Button> : null}
                          {canManage ? (confirmId === s.id ? <><Button variant="danger" disabled={pending} onClick={() => run(() => deleteSessionAction(s.id))}>Confirm</Button><Button variant="ghost" onClick={() => setConfirmId(null)}>Cancel</Button></> : <Button variant="ghost" aria-label={`Delete ${s.title}`} onClick={() => setConfirmId(s.id)}>Delete</Button>) : null}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </Card>
    </div>
  );
}