alpenwerk-hr/components/positions/StaffInternallyModal.tsx

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { searchActiveEmployees, type EmployeeSearchResult } from "@/actions/employees";
import { staffPositionInternally } from "@/actions/positions";
import { Lookup } from "@/components/ui/Lookup";
import { Modal } from "@/components/ui/Modal";
import { useToast } from "@/components/ui/Toast";

type StaffInternallyModalProps = {
  open: boolean;
  onClose: () => void;
  positionId: string;
  positionTitle: string;
  isLead: boolean;
};

export function StaffInternallyModal({ open, onClose, positionId, positionTitle, isLead }: StaffInternallyModalProps) {
  const { showToast } = useToast();
  const router = useRouter();
  const [employee, setEmployee] = useState<EmployeeSearchResult | null>(null);
  const [pending, setPending] = useState(false);

  async function handleSubmit() {
    if (!employee) return;
    setPending(true);
    const result = await staffPositionInternally({ position_id: positionId, employee_id: employee.id });
    setPending(false);
    if (result.success) {
      showToast(`${employee.first_name} ${employee.last_name} besetzt die Position.`);
      router.refresh();
      onClose();
      setEmployee(null);
    } else {
      showToast(result.error ?? "Fehler beim Besetzen.", "error");
    }
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Position besetzen"
      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 || !employee}
            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
          >
            Besetzen
          </button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
        <p className="text-sm text-ink-body">
          Position: <span className="font-semibold">{positionTitle}</span>
        </p>
        {isLead && (
          <div className="rounded bg-warning-bg px-3 py-2 text-sm text-warning-text">
            Dies ist eine Führungsposition: Das gesamte Team wird der ausgewählten Person unterstellt.
          </div>
        )}
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Mitarbeiter:in*</label>
          {!employee ? (
            <Lookup<EmployeeSearchResult>
              placeholder="Name oder Titel…"
              onSearch={searchActiveEmployees}
              onSelect={setEmployee}
              renderResult={(e) => (
                <div>
                  <div className="font-semibold text-ink">
                    {e.first_name} {e.last_name}
                  </div>
                  <div className="text-xs text-ink-muted">{e.job_title}</div>
                </div>
              )}
            />
          ) : (
            <div className="flex items-center justify-between rounded border border-border bg-surface p-3">
              <div>
                <div className="text-sm font-semibold text-ink">
                  {employee.first_name} {employee.last_name}
                </div>
                <div className="text-xs text-ink-muted">{employee.job_title}</div>
              </div>
              <button type="button" onClick={() => setEmployee(null)} className="text-xs text-ink-muted hover:text-ink">
                Ändern
              </button>
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
}