"use client";

import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { alertDialog } from "@/components/ui/Dialog";
import { decideTimeEntryAction } from "@/lib/time/actions";
import { decideAbsenceAction } from "@/lib/absences/actions";
import type { PendingTimeDTO } from "@/lib/time/queries";
import type { AbsenceDTO } from "@/lib/absences/queries";
import type { AbsenceTypeDef } from "@/lib/settings";

function fmtDate(iso: string): string {
  return new Date(iso).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
}
function fmtDur(sec: number): string {
  const h = Math.floor(sec / 3600);
  const m = Math.round((sec % 3600) / 60);
  return h > 0 ? `${h} Std. ${m} Min.` : `${m} Min.`;
}

export function ApprovalsPanel({
  pendingTime,
  pendingAbs,
  absenceTypes,
}: {
  pendingTime: PendingTimeDTO[];
  pendingAbs: AbsenceDTO[];
  absenceTypes: AbsenceTypeDef[];
}) {
  const router = useRouter();
  const total = pendingTime.length + pendingAbs.length;
  const typeMeta = (k: string) => absenceTypes.find((t) => t.key === k) ?? { label: k, color: "#9ed7ff" };

  const decideTime = async (id: string, approve: boolean) => {
    const res = await decideTimeEntryAction(id, approve);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else router.refresh();
  };
  const decideAbs = async (id: string, approve: boolean) => {
    const res = await decideAbsenceAction(id, approve);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else router.refresh();
  };

  if (total === 0) return null;

  return (
    <section className="card" data-reveal>
      <div className="mb-3 flex items-center justify-between">
        <h2>Offene Freigaben</h2>
        <span className="badge">{total}</span>
      </div>

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
        <div>
          <div className="text-muted mb-2 text-xs font-bold uppercase tracking-wide">Arbeitszeit ({pendingTime.length})</div>
          {pendingTime.length === 0 ? (
            <p className="text-muted text-sm">Keine offenen Zeiteinträge.</p>
          ) : (
            <div className="flex flex-col gap-2">
              {pendingTime.map((e) => (
                <div key={e.id} className="approve-row">
                  <div className="min-w-0 flex-1">
                    <div className="text-sm font-bold">{e.userName} · {fmtDur(e.durationSeconds)}</div>
                    <div className="text-muted truncate text-xs">
                      {fmtDate(e.startedAt)}{e.projectName ? ` · ${e.projectName}` : ""}{e.note ? ` · ${e.note}` : ""}
                    </div>
                  </div>
                  <button className="btn btn-primary btn-sm" onClick={() => decideTime(e.id, true)}>Freigeben</button>
                  <button className="btn btn-ghost btn-sm" onClick={() => decideTime(e.id, false)}>Ablehnen</button>
                </div>
              ))}
            </div>
          )}
        </div>

        <div>
          <div className="text-muted mb-2 text-xs font-bold uppercase tracking-wide">Abwesenheiten ({pendingAbs.length})</div>
          {pendingAbs.length === 0 ? (
            <p className="text-muted text-sm">Keine offenen Anträge.</p>
          ) : (
            <div className="flex flex-col gap-2">
              {pendingAbs.map((a) => {
                const tm = typeMeta(a.type);
                return (
                  <div key={a.id} className="approve-row">
                    <span className="absence-type" style={{ background: `${tm.color}22`, color: tm.color, borderColor: `${tm.color}55` }}>{tm.label}</span>
                    <div className="min-w-0 flex-1">
                      <div className="text-sm font-bold">{a.userName}</div>
                      <div className="text-muted truncate text-xs">
                        {fmtDate(a.startDate)}{a.startDate !== a.endDate ? ` – ${fmtDate(a.endDate)}` : ""}{a.reason ? ` · ${a.reason}` : ""}
                      </div>
                    </div>
                    <button className="btn btn-primary btn-sm" onClick={() => decideAbs(a.id, true)}>Genehmigen</button>
                    <button className="btn btn-ghost btn-sm" onClick={() => decideAbs(a.id, false)}>Ablehnen</button>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}