"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { updatePosition } from "@/actions/positions";
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 type { OpenPositionResolved } from "@/lib/positions";
import type { UnitOption } from "./CreatePositionModal";

// Ändern statt löschen und neu anlegen.
//
// Die Planstellennummer steht in Ausschreibungen, Budgets und
// Protokolleinträgen. Wer wegen eines Tippfehlers in der Tätigkeit eine neue
// Nummer vergibt, macht die alten Bezüge wertlos — deshalb gibt es diesen
// Dialog.

/**
 * Erwartet eine Planstelle, keine „vielleicht keine".
 *
 * Die aufrufende Seite hängt einen `key` mit der Kennung daran und rendert
 * ihn nur, solange etwas bearbeitet wird. Dadurch baut React den Dialog je
 * Planstelle neu auf, und die Felder lassen sich direkt aus den Eigenschaften
 * vorbelegen — statt sie in einem Effekt nachzuziehen, der beim zweiten
 * Öffnen kurz die Werte der vorigen Stelle zeigt.
 */
export function EditPositionModal({
  position,
  units,
  onClose,
}: {
  position: OpenPositionResolved;
  units: UnitOption[];
  onClose: () => void;
}) {
  const { showToast } = useToast();
  const router = useRouter();
  const [jobTitle, setJobTitle] = useState(position.title);
  const [orgUnitId, setOrgUnitId] = useState(position.org_unit_id);
  const [isChief, setIsChief] = useState(position.is_chief);
  const [validFrom, setValidFrom] = useState(position.valid_from);
  const [validTo, setValidTo] = useState(position.valid_to ?? "");
  const [pending, setPending] = useState(false);

  const unit = units.find((u) => u.id === orgUnitId);
  // Die eigene Leitung zählt nicht als Hindernis für sich selbst.
  const chiefTaken = Boolean(unit?.hasChief) && !(position.is_chief && orgUnitId === position.org_unit_id);

  async function handleSubmit() {
    if (!jobTitle.trim() || !orgUnitId || !validFrom) {
      showToast("Tätigkeit, Einheit und Gültigkeitsbeginn sind Pflicht.", "error");
      return;
    }
    setPending(true);
    const result = await updatePosition({
      position_id: position.id,
      org_unit_id: orgUnitId,
      job_title: jobTitle.trim(),
      is_chief: isChief && !chiefTaken,
      valid_from: validFrom,
      valid_to: validTo || null,
    });
    setPending(false);
    if (result.success) {
      showToast("Planstelle geändert.");
      router.refresh();
      onClose();
    } else {
      // Die Meldungen der Datenbankfunktion sind für die Oberfläche
      // geschrieben („Diese Planstelle ist vergeben …“) und werden gezeigt.
      showToast(result.error ?? "Die Änderung war nicht möglich.", "error");
    }
  }

  return (
    <Modal
      open
      onClose={onClose}
      title={`Planstelle ${position.position_number}`}
      footer={
        <>
          <Button variant="secondary" onClick={onClose}>
            Abbrechen
          </Button>
          <Button onClick={handleSubmit} pending={pending}>
            Speichern
          </Button>
        </>
      }
    >
      <div className="flex flex-col gap-3">
        <TextField label="Tätigkeit" required value={jobTitle} onChange={setJobTitle} />

        <SelectField
          label="Organisationseinheit"
          required
          value={orgUnitId}
          onChange={setOrgUnitId}
          placeholder="Bitte wählen…"
          options={units.map((u) => ({
            value: u.id,
            label: `${"  ".repeat(u.depth)}${u.name} (${u.unit_type})`,
          }))}
        />

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <TextField label="Gültig ab" required type="date" value={validFrom} onChange={setValidFrom} />
          <TextField label="Gültig bis" type="date" value={validTo} onChange={setValidTo} />
        </div>

        <label className="flex items-start gap-2 text-sm text-ink-body">
          <input
            type="checkbox"
            className="mt-0.5 h-4 w-4 rounded border-border text-brand-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
            checked={isChief && !chiefTaken}
            disabled={chiefTaken}
            onChange={(e) => setIsChief(e.target.checked)}
          />
          <span>
            Leitungsplanstelle
            {chiefTaken && (
              <span className="block text-xs text-ink-muted">
                Für {unit?.name} besteht bereits eine Leitungsplanstelle.
              </span>
            )}
          </span>
        </label>

        <p className="rounded-md bg-surface px-3 py-2 text-xs leading-relaxed text-ink-muted">
          Die Planstellennummer bleibt. Ist die Stelle vergeben, lassen sich Einheit und Gültigkeitsende nicht ändern —
          ein Wechsel der Einheit ist eine Versetzung und gehört zur Person, nicht zur Stelle.
        </p>
      </div>
    </Modal>
  );
}