"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { DatePicker } from "@/components/ui/DatePicker";
import { confirmDialog, alertDialog } from "@/components/ui/Dialog";
import { requestAbsenceAction, cancelAbsenceAction } from "@/lib/absences/actions";
import type { AbsenceDTO } from "@/lib/absences/queries";
import type { AbsenceTypeDef } from "@/lib/settings";

const STATUS: Record<string, { label: string; cls: string }> = {
  PENDING: { label: "Offen", cls: "INVITED" },
  APPROVED: { label: "Genehmigt", cls: "ACTIVE" },
  REJECTED: { label: "Abgelehnt", cls: "SUSPENDED" },
  CANCELLED: { label: "Storniert", cls: "" },
};

function fmt(iso: string): string {
  return new Date(iso).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
}

export function AbsencesManager({
  mine,
  types,
  vacationUsed,
  vacationTotal,
  supervisorName,
}: {
  mine: AbsenceDTO[];
  types: AbsenceTypeDef[];
  vacationUsed: number;
  vacationTotal: number;
  supervisorName: string | null;
}) {
  const router = useRouter();
  const today = new Date().toISOString().slice(0, 10);
  const typeMeta = (k: string) => types.find((t) => t.key === k) ?? { key: k, label: k, color: "#9ed7ff", countsVacation: false };

  const [tab, setTab] = useState<"request" | "mine">("request");
  const [type, setType] = useState(types[0]?.key ?? "VACATION");
  const [startDate, setStartDate] = useState(today);
  const [endDate, setEndDate] = useState(today);
  const [reason, setReason] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const submit = async () => {
    setBusy(true);
    setError(null);
    const res = await requestAbsenceAction({ type, startDate, endDate, reason });
    setBusy(false);
    if (res.error) return setError(res.error);
    setReason("");
    setTab("mine");
    router.refresh();
  };
  const cancel = async (a: AbsenceDTO) => {
    if (!(await confirmDialog({ title: "Antrag stornieren?", danger: true }))) return;
    const res = await cancelAbsenceAction(a.id);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else router.refresh();
  };

  return (
    <div className="flex flex-col gap-5">
      <section className="grid grid-cols-2 gap-4 xl:grid-cols-4" data-reveal>
        <div className="stat-tile"><span className="stat-tile-value">{Math.max(0, vacationTotal - vacationUsed)}</span><span className="stat-tile-label">Resturlaub (von {vacationTotal})</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{vacationUsed}</span><span className="stat-tile-label">Genutzt {new Date().getFullYear()}</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{mine.filter((a) => a.status === "PENDING").length}</span><span className="stat-tile-label">Offene Anträge</span></div>
        <div className="stat-tile"><span className="stat-tile-value">{mine.filter((a) => a.status === "APPROVED").length}</span><span className="stat-tile-label">Genehmigt</span></div>
      </section>

      <div className="seg" data-reveal style={{ alignSelf: "flex-start" }}>
        <button className="seg-btn" data-active={tab === "request"} onClick={() => setTab("request")}>
          <Icon name="plus" size={15} /> Beantragen
        </button>
        <button className="seg-btn" data-active={tab === "mine"} onClick={() => setTab("mine")}>
          <Icon name="calendar" size={15} /> Meine Anträge
        </button>
      </div>

      {tab === "request" ? (
        <section className="card" data-reveal>
          <h2 className="mb-1">Abwesenheit beantragen</h2>
          <p className="text-muted mb-4 text-sm">
            {supervisorName ? <>Der Antrag geht an <span className="font-bold">{supervisorName}</span>.</> : "Der Antrag geht an die zuständige Person."}
          </p>
          {error ? <p className="field-error mb-2">{error}</p> : null}
          <div className="flex flex-col gap-4">
            <div className="field">
              <label className="label">Art</label>
              <div className="flex flex-wrap gap-2">
                {types.map((t) => (
                  <button key={t.key} type="button" className="pill" data-active={type === t.key} onClick={() => setType(t.key)}>
                    <span className="status-badge-dot" style={{ background: t.color }} />
                    {t.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="field">
                <label className="label">Von</label>
                <DatePicker value={startDate} onChange={setStartDate} />
              </div>
              <div className="field">
                <label className="label">Bis</label>
                <DatePicker value={endDate} onChange={setEndDate} />
              </div>
            </div>
            <div className="field">
              <label className="label">Grund (optional)</label>
              <input className="input" value={reason} onChange={(e) => setReason(e.target.value)} placeholder="z. B. Erholungsurlaub" />
            </div>
          </div>
          <div className="form-footer">
            <span />
            <button className="btn btn-primary" onClick={submit} disabled={busy}>
              <Icon name="calendar" size={15} /> Antrag stellen
            </button>
          </div>
        </section>
      ) : null}

      {tab === "mine" ? (
        <section className="card" data-reveal>
          <h2 className="mb-4">Meine Anträge</h2>
          {mine.length === 0 ? (
            <p className="text-muted text-sm">Noch keine Anträge. Stelle im Tab „Beantragen" deinen ersten Antrag.</p>
          ) : (
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              {mine.map((a) => {
                const tm = typeMeta(a.type);
                const st = STATUS[a.status];
                const days = Math.round((new Date(a.endDate).getTime() - new Date(a.startDate).getTime()) / 86400000) + 1;
                return (
                  <div key={a.id} className="absence-card" style={{ ["--ac" as string]: tm.color, borderLeft: `4px solid ${tm.color}` }}>
                    <div className="flex items-start justify-between gap-2">
                      <span className="absence-type" style={{ background: `${tm.color}22`, color: tm.color, borderColor: `${tm.color}55` }}>
                        {tm.label}
                      </span>
                      <span className="status-badge" data-status={st.cls}>
                        <span className="status-badge-dot" />
                        {st.label}
                      </span>
                    </div>
                    <div className="mt-3 flex items-center gap-2">
                      <span className="absence-card-icon" style={{ color: tm.color, background: `${tm.color}18` }}>
                        <Icon name="calendar" size={17} />
                      </span>
                      <div className="min-w-0">
                        <div className="font-bold leading-tight">
                          {fmt(a.startDate)}{a.startDate !== a.endDate ? ` – ${fmt(a.endDate)}` : ""}
                        </div>
                        <div className="text-muted text-xs">{days} {days === 1 ? "Tag" : "Tage"}</div>
                      </div>
                    </div>
                    {a.reason ? <div className="text-muted mt-2 text-sm">{a.reason}</div> : null}
                    {a.status === "PENDING" || a.status === "APPROVED" ? (
                      <div className="mt-3 border-t pt-2" style={{ borderColor: "var(--line)" }}>
                        <button className="btn btn-ghost btn-sm" onClick={() => cancel(a)}>
                          <Icon name="close" size={13} /> Stornieren
                        </button>
                      </div>
                    ) : null}
                  </div>
                );
              })}
            </div>
          )}
        </section>
      ) : null}
    </div>
  );
}