import Link from "next/link";
import { ActionButton } from "@/components/ActionButton";
import { apiGet } from "@/lib/server-api";
import { fmtDay } from "@/lib/format";
import type { Holiday, Me } from "@/lib/types";
import { AddHolidayForm } from "./form";

type Search = Promise<Record<string, string | string[] | undefined>>;

export default async function HolidaysPage({ searchParams }: { searchParams: Search }) {
  const sp = await searchParams;
  const yearParam = typeof sp.year === "string" ? sp.year : "";
  const [{ year, holidays }, me] = await Promise.all([
    apiGet<{ year: number; holidays: Holiday[] }>(`/holidays${yearParam ? `?year=${encodeURIComponent(yearParam)}` : ""}`),
    apiGet<Me>("/auth/me"),
  ]);
  const canEdit = me.account.role !== "viewer";

  return (
    <>
      <h1>Feriados de {year}</h1>
      <p className="muted">
        Dias úteis: fim de semana não conta; depois vale esta tabela (feriados da feriadosapi.com e manuais). Se a API não
        responder e o ano não tiver sido sincronizado, segunda a sexta contam como úteis e os admins são avisados.
      </p>
      <p>
        <Link href={`/feriados?year=${year - 1}`}>← {year - 1}</Link> · <Link href={`/feriados?year=${year + 1}`}>{year + 1} →</Link>
      </p>

      {canEdit && (
        <div className="actions">
          <ActionButton path="/holidays/sync" body={{ year }} label={`Sincronizar ${year} com a feriadosapi.com`} />
        </div>
      )}

      <div className="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Data</th>
              <th>Nome</th>
              <th>Origem</th>
              {canEdit && <th></th>}
            </tr>
          </thead>
          <tbody>
            {holidays.length === 0 && (
              <tr>
                <td colSpan={canEdit ? 4 : 3} className="muted">
                  Nenhum feriado registrado para {year}.
                </td>
              </tr>
            )}
            {holidays.map((h) => (
              <tr key={h.day}>
                <td>{fmtDay(h.day)}</td>
                <td>{h.name}</td>
                <td>{h.source === "manual" ? <span className="badge warn">manual</span> : h.source}</td>
                {canEdit && (
                  <td>
                    {h.source === "manual" && (
                      <ActionButton
                        path={`/holidays/${h.day}`}
                        method="DELETE"
                        label="Remover"
                        variant="danger"
                        confirm={`Remover o feriado de ${fmtDay(h.day)}?`}
                      />
                    )}
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {canEdit && (
        <section className="card">
          <h2>Cadastrar feriado manual</h2>
          <AddHolidayForm />
        </section>
      )}
    </>
  );
}