alpenwerk-hr/components/employees/panels/TerminatePanel.tsx

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { terminateEmployee } from "@/actions/employees";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import type { Database } from "@/lib/supabase/types";

type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];

const EXIT_REASONS = ["Einvernehmliche Auflösung", "Kündigung AN", "Kündigung AG", "Befristungsablauf", "Pensionierung", "Entlassung"];
const CHECKLIST_ITEMS = ["IT-Zugänge deaktivieren", "Hardware retournieren", "ÖGK-Abmeldung", "Endabrechnung & Dienstzeugnis"];

type TerminatePanelProps = {
  open: boolean;
  onClose: () => void;
  employee: EmployeeRow;
  directReportCount: number;
};

export function TerminatePanel({ open, onClose, employee, directReportCount }: TerminatePanelProps) {
  const { showToast } = useToast();
  const router = useRouter();
  const [exitDate, setExitDate] = useState("");
  const [reason, setReason] = useState(EXIT_REASONS[0]);
  const [note, setNote] = useState("");
  const [checked, setChecked] = useState<boolean[]>(CHECKLIST_ITEMS.map(() => false));
  const [pending, setPending] = useState(false);

  async function handleSubmit() {
    if (!exitDate) {
      showToast("Bitte ein Austrittsdatum angeben.", "error");
      return;
    }
    setPending(true);
    const result = await terminateEmployee({ employee_id: employee.id, exit_date: exitDate, exit_reason: reason, note });
    setPending(false);
    if (result.success) {
      showToast(`Austritt für ${employee.first_name} ${employee.last_name} erfasst.`);
      router.refresh();
      onClose();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  return (
    <SlideOver
      open={open}
      onClose={onClose}
      title="Austritt"
      subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
      footer={
        <>
          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
            Abbrechen
          </button>
          <button
            onClick={handleSubmit}
            disabled={pending}
            className="rounded bg-danger-solid px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
          >
            Austritt bestätigen
          </button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
        {directReportCount > 0 && (
          <div className="rounded bg-warning-bg px-3 py-2 text-sm text-warning-text">
            {directReportCount} direkte Berichte werden automatisch der nächsthöheren Führungskraft zugeordnet.
          </div>
        )}
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Austrittsdatum*</label>
          <input
            type="date"
            value={exitDate}
            onChange={(e) => setExitDate(e.target.value)}
            className="w-full rounded border border-border px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Beendigungsart</label>
          <select value={reason} onChange={(e) => setReason(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
            {EXIT_REASONS.map((r) => (
              <option key={r} value={r}>
                {r}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Anmerkung</label>
          <textarea value={note} onChange={(e) => setNote(e.target.value)} rows={3} className="w-full rounded border border-border px-3 py-2 text-sm" />
        </div>
        <div>
          <p className="mb-2 text-sm font-semibold text-ink">Offboarding-Checkliste</p>
          <div className="flex flex-col gap-2">
            {CHECKLIST_ITEMS.map((item, i) => (
              <label key={item} className="flex items-center gap-2 text-sm text-ink-body">
                <input
                  type="checkbox"
                  checked={checked[i]}
                  onChange={(e) => setChecked((prev) => prev.map((c, idx) => (idx === i ? e.target.checked : c)))}
                />
                {item}
              </label>
            ))}
          </div>
        </div>
      </div>
    </SlideOver>
  );
}