import { redirect } from "next/navigation";
import {
  createAwardAction,
  deleteAwardAction,
} from "@/app/dashboard/actions";
import { DashboardPageHeader } from "@/components/dashboard/page-header";
import { DashboardShell } from "@/components/dashboard/dashboard-shell";
import { requireDashboardContext } from "@/core/auth/dashboard-context";
import { listDashboardAwards } from "@/services/award-service";

export default async function DashboardAwardsPage() {
  const ctx = await requireDashboardContext("settings:manage");
  const rows = await listDashboardAwards(ctx.tenant);

  async function createAction(formData: FormData) {
    "use server";
    const result = await createAwardAction(formData);
    if (!result.ok) redirect("/dashboard/awards?error=1");
    redirect("/dashboard/awards");
  }

  return (
    <DashboardShell>
      <DashboardPageHeader
        eyebrow="Studio"
        title="Awards"
        description="Recognition shown on the public awards page and home."
      />
      <form action={createAction} className="archi-panel mt-10 grid gap-3 p-5 sm:grid-cols-2">
        <label className="block text-sm">
          Title
          <input name="title" required className="archi-input mt-2" />
        </label>
        <label className="block text-sm">
          Organization
          <input name="organization" className="archi-input mt-2" />
        </label>
        <label className="block text-sm">
          Year
          <input name="year" type="number" className="archi-input mt-2" />
        </label>
        <label className="block text-sm">
          Category
          <input name="category" placeholder="Award / Competition / Certification" className="archi-input mt-2" />
        </label>
        <label className="block text-sm sm:col-span-2">
          Description
          <textarea name="description" rows={2} className="archi-input mt-2" />
        </label>
        <button type="submit" className="archi-btn-primary sm:col-span-2 sm:w-fit">
          Add award
        </button>
      </form>
      <ul className="archi-panel mt-8 divide-y divide-[var(--archi-line)]">
        {rows.length === 0 ? (
          <li className="px-4 py-8 text-sm text-[var(--archi-ink-muted)]">
            No awards yet.
          </li>
        ) : (
          rows.map((row) => (
            <li key={row.id} className="flex flex-wrap items-center justify-between gap-3 px-4 py-4">
              <div>
                <p className="font-medium">{row.title}</p>
                <p className="text-xs text-[var(--archi-ink-muted)]">
                  {[row.year, row.organization, row.category].filter(Boolean).join(" · ")}
                </p>
              </div>
              <form action={deleteAwardAction.bind(null, row.id)}>
                <button type="submit" className="text-xs text-red-800 underline">
                  Delete
                </button>
              </form>
            </li>
          ))
        )}
      </ul>
    </DashboardShell>
  );
}