"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { changeEmployeeData } from "@/actions/employees";
import { Button } from "@/components/ui/Button";
import { SelectField, TextField } from "@/components/ui/Field";
import { Modal } from "@/components/ui/Modal";
import { useToast } from "@/components/ui/Toast";
import { todayIso } from "@/lib/format";
import { EMERGENCY_RELATIONS } from "@/lib/types";

// Der Notfallkontakt, ohne den Umweg über „Daten ändern".
//
// Geschrieben wird über dieselbe Funktion wie dort: change_employee_data mit
// **nur** den drei Feldern im Abschnitt `person`. Das ist keine Abkürzung,
// sondern die Bedingung dafür, dass der Eintrag in der Historie und im
// Protokoll landet wie jede andere Stammdatenänderung. Die Datenbank fasst
// ausschliesslich die Felder an, die im Aufruf stehen — sie prüft auf das
// Vorhandensein des Schlüssels, nicht auf seinen Wert (Migration
// 20260917120000). Adresse, E-Mail und der Rest bleiben deshalb unberührt.

export type Notfallkontakt = {
  name: string | null;
  telefon: string | null;
  verhaeltnis: string | null;
};

export function NotfallkontaktModal({
  open,
  onClose,
  employeeId,
  kontakt,
  effectiveDate,
}: {
  open: boolean;
  onClose: () => void;
  employeeId: string;
  kontakt: Notfallkontakt;
  /** Aus „Daten ändern"; ohne Angabe gilt heute. */
  effectiveDate?: string;
}) {
  const { showToast } = useToast();
  const router = useRouter();
  const [name, setName] = useState(kontakt.name ?? "");
  const [telefon, setTelefon] = useState(kontakt.telefon ?? "");
  const [verhaeltnis, setVerhaeltnis] = useState(kontakt.verhaeltnis ?? "");
  const [pending, setPending] = useState(false);

  const vorhanden = Boolean(kontakt.name);

  async function handleSubmit() {
    // Name und Telefonnummer gehören zusammen: ein Name ohne Nummer hilft im
    // Ernstfall niemandem, eine Nummer ohne Namen sagt nicht, wen man dran
    // hat.
    if (!name.trim() || !telefon.trim()) {
      showToast("Name und Telefonnummer sind nötig.", "error");
      return;
    }
    setPending(true);
    const result = await changeEmployeeData({
      employee_id: employeeId,
      effective_date: effectiveDate || todayIso(),
      person: {
        emergency_contact_name: name.trim(),
        emergency_contact_phone: telefon.trim(),
        emergency_contact_relation: verhaeltnis.trim(),
      },
      contract: {},
      role: {},
    });
    setPending(false);
    if (result.success) {
      showToast(vorhanden ? "Notfallkontakt geändert." : "Notfallkontakt hinterlegt.");
      router.refresh();
      onClose();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={vorhanden ? "Notfallkontakt ändern" : "Notfallkontakt hinterlegen"}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>
            Abbrechen
          </Button>
          <Button onClick={handleSubmit} pending={pending}>
            Speichern
          </Button>
        </>
      }
    >
      {/* Kein „Wirksam ab": ein Notfallkontakt gilt ab sofort. Das Feld stand
          hier, weil die Datenbankfunktion einen Stichtag kennt — bei einer
          Telefonnummer, die im Ernstfall gewählt wird, ist ein Datum in der
          Zukunft keine sinnvolle Angabe, sondern eine Frage zu viel. */}
      <div className="flex flex-col gap-4">
        <TextField label="Name" required value={name} onChange={setName} />
        <TextField label="Telefonnummer" required type="tel" value={telefon} onChange={setTelefon} />
        {/* Dieselbe Liste wie im Einstellungsassistenten (EMERGENCY_RELATIONS)
            und kein Freitext: sonst stünden „Gattin", „Ehefrau" und „Frau"
            nebeneinander und liessen sich nicht auswerten. */}
        <SelectField
          label="Verhältnis"
          value={verhaeltnis}
          onChange={setVerhaeltnis}
          placeholder="Bitte wählen…"
          options={EMERGENCY_RELATIONS.map((r) => ({ value: r, label: r }))}
        />
      </div>
    </Modal>
  );
}