"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { addEmployeeDependent } from "@/actions/employees";
import { Modal } from "@/components/ui/Modal";
import { useToast } from "@/components/ui/Toast";
import { todayIso } from "@/lib/format";
import type { RelationshipType } from "@/lib/supabase/types";

const RELATIONSHIPS: RelationshipType[] = ["Ehepartner:in", "Lebenspartner:in", "Kind", "Sonstige"];

export function AddDependentModal({
  open,
  onClose,
  employeeId,
  defaultEffectiveDate,
}: {
  open: boolean;
  onClose: () => void;
  employeeId: string;
  defaultEffectiveDate?: string;
}) {
  const { showToast } = useToast();
  const router = useRouter();
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [svNummer, setSvNummer] = useState("");
  const [birthDate, setBirthDate] = useState("");
  const [relationship, setRelationship] = useState<RelationshipType>("Kind");
  const [effectiveDate, setEffectiveDate] = useState(defaultEffectiveDate ?? todayIso());
  const [prevDefaultEffectiveDate, setPrevDefaultEffectiveDate] = useState(defaultEffectiveDate);
  const [pending, setPending] = useState(false);

  // This modal stays mounted while closed, so a mount-time initializer would
  // pin the date forever: DatenAendernPanel drives `defaultEffectiveDate` off
  // its own "Wirksam ab" field, and changing it there has to reach the field
  // below. Same adjust-during-render pattern as CountryPicker.
  if (defaultEffectiveDate !== prevDefaultEffectiveDate) {
    setPrevDefaultEffectiveDate(defaultEffectiveDate);
    if (defaultEffectiveDate) setEffectiveDate(defaultEffectiveDate);
  }

  function reset() {
    setFirstName("");
    setLastName("");
    setSvNummer("");
    setBirthDate("");
    setRelationship("Kind");
    setEffectiveDate(defaultEffectiveDate ?? todayIso());
  }

  async function handleSubmit() {
    if (!firstName || !lastName || !birthDate || !effectiveDate) {
      showToast("Bitte alle Pflichtfelder ausfüllen.", "error");
      return;
    }
    setPending(true);
    const result = await addEmployeeDependent({
      employee_id: employeeId,
      first_name: firstName,
      last_name: lastName,
      relationship,
      sv_nummer: svNummer || undefined,
      birth_date: birthDate,
      effective_date: effectiveDate,
    });
    setPending(false);
    if (result.success) {
      showToast("Angehörige:r hinzugefügt.");
      router.refresh();
      onClose();
      reset();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Angehörige:n hinzufügen"
      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-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
          >
            Hinzufügen
          </button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
          <input
            type="date"
            value={effectiveDate}
            onChange={(e) => setEffectiveDate(e.target.value)}
            className="w-full rounded border border-border px-3 py-2 text-sm"
          />
        </div>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <div>
            <label className="mb-1 block text-sm font-semibold text-ink">Vorname*</label>
            <input value={firstName} onChange={(e) => setFirstName(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">Nachname*</label>
            <input value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
          </div>
        </div>
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">SVNR</label>
          <input value={svNummer} onChange={(e) => setSvNummer(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">Geburtsdatum*</label>
          <input type="date" value={birthDate} onChange={(e) => setBirthDate(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">Verwandtschaftsverhältnis*</label>
          <select
            value={relationship}
            onChange={(e) => setRelationship(e.target.value as RelationshipType)}
            className="w-full rounded border border-border px-3 py-2 text-sm"
          >
            {RELATIONSHIPS.map((r) => (
              <option key={r} value={r}>
                {r}
              </option>
            ))}
          </select>
        </div>
      </div>
    </Modal>
  );
}
