import { redirect } from "next/navigation";
import { AdminNav } from "@/components/AdminNav";
import { requireAdmin } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { DAYS } from "@/lib/site";
import { deleteSchedule, saveSchedule } from "../actions";

export const dynamic = "force-dynamic";

export default async function AdminSchedulePage() {
  if (!(await requireAdmin())) redirect("/admin/login");
  const [entries, trainers] = await Promise.all([
    prisma.scheduleEntry.findMany({
      include: { trainer: true },
      orderBy: [{ dayOfWeek: "asc" }, { startTime: "asc" }],
    }),
    prisma.trainer.findMany({ orderBy: { sortOrder: "asc" } }),
  ]);

  return (
    <div className="mx-auto max-w-5xl px-4 py-8">
      <AdminNav />
      <h1 className="font-display text-3xl">Raspored</h1>

      <div className="mt-6 space-y-4">
        {entries.map((e) => (
          <form key={e.id} action={saveSchedule} className="grid gap-2 border border-white/10 p-3 md:grid-cols-6">
            <input type="hidden" name="id" value={e.id} />
            <select name="dayOfWeek" defaultValue={e.dayOfWeek} className="border border-white/20 bg-black px-2 py-2">
              {DAYS.map((d) => (
                <option key={d.id} value={d.id}>
                  {d.short}
                </option>
              ))}
            </select>
            <input name="startTime" defaultValue={e.startTime} className="border border-white/20 bg-black px-2 py-2" />
            <input name="endTime" defaultValue={e.endTime || ""} className="border border-white/20 bg-black px-2 py-2" />
            <input name="title" defaultValue={e.title} className="border border-white/20 bg-black px-2 py-2 md:col-span-2" />
            <select name="trainerId" defaultValue={e.trainerId || ""} className="border border-white/20 bg-black px-2 py-2">
              <option value="">—</option>
              {trainers.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.name}
                </option>
              ))}
            </select>
            <input name="level" defaultValue={e.level || ""} placeholder="Nivo" className="border border-white/20 bg-black px-2 py-2" />
            <input name="sortOrder" type="number" defaultValue={e.sortOrder} className="border border-white/20 bg-black px-2 py-2" />
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" name="published" defaultChecked={e.published} /> OK
            </label>
            <button type="submit" className="bg-red-600 px-3 py-2 text-sm font-bold">
              Spremi
            </button>
          </form>
        ))}
      </div>

      <form action={saveSchedule} className="mt-8 grid gap-2 border border-dashed border-white/20 p-4 md:grid-cols-3">
        <h2 className="md:col-span-3 font-semibold">Novi termin</h2>
        <select name="dayOfWeek" defaultValue={1} className="border border-white/20 bg-black px-2 py-2">
          {DAYS.map((d) => (
            <option key={d.id} value={d.id}>
              {d.label}
            </option>
          ))}
        </select>
        <input name="startTime" placeholder="18:00" required className="border border-white/20 bg-black px-2 py-2" />
        <input name="endTime" placeholder="19:00" className="border border-white/20 bg-black px-2 py-2" />
        <input name="title" placeholder="Naziv" required className="border border-white/20 bg-black px-2 py-2 md:col-span-2" />
        <select name="trainerId" className="border border-white/20 bg-black px-2 py-2">
          <option value="">Trener</option>
          {trainers.map((t) => (
            <option key={t.id} value={t.id}>
              {t.name}
            </option>
          ))}
        </select>
        <input name="level" placeholder="Nivo" className="border border-white/20 bg-black px-2 py-2" />
        <input name="sortOrder" type="number" defaultValue={0} className="border border-white/20 bg-black px-2 py-2" />
        <label className="flex items-center gap-2 text-sm">
          <input type="checkbox" name="published" defaultChecked /> Objavljeno
        </label>
        <button type="submit" className="bg-red-600 px-3 py-2 text-sm font-bold">
          Dodaj
        </button>
      </form>

      <div className="mt-6 space-x-3">
        {entries.map((e) => (
          <form key={`d-${e.id}`} action={deleteSchedule} className="inline">
            <input type="hidden" name="id" value={e.id} />
            <button type="submit" className="text-xs text-red-400 underline">
              Obriši {e.title} ({e.startTime})
            </button>
          </form>
        ))}
      </div>
    </div>
  );
}