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

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { terminateEmployee } from "@/actions/employees";
import { Button } from "@/components/ui/Button";
import { SelectField, TextField, TextareaField } from "@/components/ui/Field";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import type { Database } from "@/lib/supabase/types";
import { fmtName } from "@/lib/format";

type EmployeeRow = Database["public"]["Tables"]["employees"]["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={`${fmtName(employee.first_name, employee.last_name)} · ${employee.job_title}`}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>
            Abbrechen
          </Button>
          <Button variant="danger" onClick={handleSubmit} pending={pending}>
            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>
        )}
        <TextField label="Austrittsdatum" required type="date" value={exitDate} onChange={setExitDate} />
        <SelectField
          label="Beendigungsart"
          value={reason}
          onChange={setReason}
          options={EXIT_REASONS.map((r) => ({ value: r, label: r }))}
        />
        <TextareaField label="Anmerkung" rows={3} value={note} onChange={setNote} />
        <fieldset>
          <legend className="mb-2 text-sm font-semibold text-ink">Offboarding-Checkliste</legend>
          <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>
        </fieldset>
      </div>
    </SlideOver>
  );
}