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 { Button } from "@/components/ui/Button";
import { Field, SelectField, TextField } from "@/components/ui/Field";
import { Lookup } from "@/components/ui/Lookup";
import { Modal } from "@/components/ui/Modal";
import { useToast } from "@/components/ui/Toast";
import { todayIso } from "@/lib/format";
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 [validFrom, setValidFrom] = useState(todayIso);
  const [pending, setPending] = useState(false);

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

  async function handleSubmit() {
    if (!title || !superior || !validFrom || (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,
      valid_from: validFrom,
    });
    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 variant="ghost" onClick={onClose}>
            Abbrechen
          </Button>
          <Button onClick={handleSubmit} pending={pending}>
            Ausschreiben
          </Button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
        <TextField label="Titel" required value={title} onChange={setTitle} />
        <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>
        {!superior ? (
          <Field label={isLead ? "Übergeordnete Bereichsleitung" : "Übergeordnete Teamleitung"} required>
            {(p) => (
              <Lookup<SuperiorSearchResult>
                {...p}
                placeholder="Name oder Titel…"
                onSearch={(q) => searchSuperiors(q, isLead)}
                onSelect={setSuperior}
                renderResult={(r) => (
                  <div>
                    <div className="font-semibold text-ink">
                      {r.first_name} {r.last_name}
                    </div>
                    <div className="text-xs text-ink-muted">{r.job_title}</div>
                  </div>
                )}
              />
            )}
          </Field>
        ) : (
          <div>
            <p className="mb-1 block text-sm font-semibold text-ink">
              {isLead ? "Übergeordnete Bereichsleitung" : "Übergeordnete Teamleitung"}
            </p>
            <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 variant="ghost" size="sm" onClick={() => setSuperior(null)}>
                Ändern
              </Button>
            </div>
          </div>
        )}
        {isLead && (
          <SelectField
            label="Zu leitendes Team"
            required
            value={teamId}
            onChange={setTeamId}
            placeholder="Bitte wählen…"
            options={teams.map((t) => ({ value: t.id, label: t.name }))}
          />
        )}
        <TextField label="Gültig ab" required type="date" value={validFrom} onChange={setValidFrom} />
      </div>
    </Modal>
  );
}