alpenwerk-hr/components/positions/CreatePositionModal.tsx

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { createPosition, searchSuperiors, type SuperiorSearchResult } from "@/actions/positions";
import { Lookup } from "@/components/ui/Lookup";
import { Modal } from "@/components/ui/Modal";
import { useToast } from "@/components/ui/Toast";
import type { Database } from "@/lib/supabase/types";

type Team = Database["public"]["Tables"]["teams"]["Row"];

export function CreatePositionModal({ open, onClose, teams }: { open: boolean; onClose: () => void; teams: Team[] }) {
  const { showToast } = useToast();
  const router = useRouter();
  const [title, setTitle] = useState("");
  const [isLead, setIsLead] = useState(false);
  const [superior, setSuperior] = useState<SuperiorSearchResult | null>(null);
  const [teamId, setTeamId] = useState("");
  const [pending, setPending] = useState(false);

  function reset() {
    setTitle("");
    setIsLead(false);
    setSuperior(null);
    setTeamId("");
  }

  async function handleSubmit() {
    if (!title || !superior || (isLead && !teamId)) {
      showToast("Bitte alle Pflichtfelder ausfüllen.", "error");
      return;
    }
    setPending(true);
    const result = await createPosition({
      title,
      superior_employee_id: superior.id,
      is_lead: isLead,
      team_id: isLead ? teamId : undefined,
    });
    setPending(false);
    if (result.success) {
      showToast("Position ausgeschrieben.");
      router.refresh();
      onClose();
      reset();
    } else {
      showToast(result.error ?? "Fehler beim Anlegen.", "error");
    }
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Position ausschreiben"
      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"
          >
            Ausschreiben
          </button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Titel*</label>
          <input value={title} onChange={(e) => setTitle(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
        </div>
        <label className="flex items-center gap-2 text-sm text-ink-body">
          <input
            type="checkbox"
            checked={isLead}
            onChange={(e) => {
              setIsLead(e.target.checked);
              setSuperior(null);
            }}
          />
          Führungsposition (Teamleitung)
        </label>
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">
            {isLead ? "Übergeordnete Bereichsleitung*" : "Übergeordnete Teamleitung*"}
          </label>
          {!superior ? (
            <Lookup<SuperiorSearchResult>
              placeholder="Name oder Titel…"
              onSearch={(q) => searchSuperiors(q, isLead)}
              onSelect={setSuperior}
              renderResult={(p) => (
                <div>
                  <div className="font-semibold text-ink">
                    {p.first_name} {p.last_name}
                  </div>
                  <div className="text-xs text-ink-muted">{p.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">
                  {superior.first_name} {superior.last_name}
                </div>
                <div className="text-xs text-ink-muted">{superior.job_title}</div>
              </div>
              <button type="button" onClick={() => setSuperior(null)} className="text-xs text-ink-muted hover:text-ink">
                Ändern
              </button>
            </div>
          )}
        </div>
        {isLead && (
          <div>
            <label className="mb-1 block text-sm font-semibold text-ink">Zu leitendes Team*</label>
            <select value={teamId} onChange={(e) => setTeamId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
              <option value="">Bitte wählen…</option>
              {teams.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.name}
                </option>
              ))}
            </select>
          </div>
        )}
      </div>
    </Modal>
  );
}