"use client";

import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";
import { transferEmployee } from "@/actions/employees";
import { Button } from "@/components/ui/Button";
import { SelectField, TextField } from "@/components/ui/Field";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import type { OpenPositionResolved } from "@/lib/positions";
import type { Database } from "@/lib/supabase/types";

type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];

type TransferPanelProps = {
  open: boolean;
  onClose: () => void;
  employee: EmployeeRow;
  openPositions: OpenPositionResolved[];
};

// Eine Versetzung ist der Wechsel auf eine andere Planstelle — nicht mehr die
// Angabe eines Zielteams samt frei getipptem Titel. Bereich, Abteilung und
// Team ergeben sich aus der Einheit der Zielplanstelle, die neue Tätigkeit aus
// ihrem Job. Damit kann eine Versetzung gar nicht erst irgendwo landen, wo es
// keine Stelle gibt.
export function TransferPanel({ open, onClose, employee, openPositions }: TransferPanelProps) {
  const { showToast } = useToast();
  const router = useRouter();
  const [effectiveDate, setEffectiveDate] = useState("");
  const [positionId, setPositionId] = useState("");
  const [pending, setPending] = useState(false);

  const options = useMemo(
    () =>
      openPositions
        .slice()
        .sort((a, b) => a.orgLabel.localeCompare(b.orgLabel, "de") || a.title.localeCompare(b.title, "de"))
        .map((p) => ({ value: p.id, label: `${p.orgLabel} · ${p.title} (${p.position_number})` })),
    [openPositions]
  );

  const selected = openPositions.find((p) => p.id === positionId);

  async function handleSubmit() {
    if (!effectiveDate || !positionId) {
      showToast("Bitte Datum und Zielplanstelle angeben.", "error");
      return;
    }
    setPending(true);
    const result = await transferEmployee({
      employee_id: employee.id,
      effective_date: effectiveDate,
      target_position_id: positionId,
    });
    setPending(false);
    if (result.success) {
      showToast(`${employee.first_name} ${employee.last_name} wurde versetzt.`);
      router.refresh();
      onClose();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  return (
    <SlideOver
      open={open}
      onClose={onClose}
      title="Versetzung"
      subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>
            Abbrechen
          </Button>
          <Button onClick={handleSubmit} pending={pending} disabled={options.length === 0}>
            Versetzen
          </Button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
        <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
        {options.length === 0 ? (
          <p className="rounded border border-border bg-surface p-3 text-sm text-ink-body">
            Es gibt derzeit keine unbesetzte Planstelle. Eine Versetzung setzt eine freie Zielplanstelle voraus — legen Sie
            zuerst unter „Positionen“ eine an.
          </p>
        ) : (
          <>
            <SelectField
              label="Zielplanstelle"
              required
              value={positionId}
              onChange={setPositionId}
              placeholder="Bitte wählen…"
              options={options}
            />
            {selected && (
              <div className="rounded border border-border bg-surface p-3 text-sm text-ink-body">
                <div className="font-semibold text-ink">{selected.title}</div>
                <div className="text-xs text-ink-muted">{selected.orgLabel}</div>
                <div className="mt-1 text-xs text-ink-muted">
                  {selected.is_chief ? "Leitungsplanstelle" : "Mitarbeiterplanstelle"}
                  {selected.managerName ? ` · berichtet an ${selected.managerName}` : ""}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </SlideOver>
  );
}