import { X } from "lucide-react";
import { Lookup } from "@/components/ui/Lookup";
import type { OpenPositionResolved } from "@/lib/positions";
import type { HireDraftData } from "./types";

type StepPositionProps = {
  draft: HireDraftData;
  update: (patch: Partial<HireDraftData>) => void;
  openPositions: OpenPositionResolved[];
};

export function StepPosition({ draft, update, openPositions }: StepPositionProps) {
  const selected = openPositions.find((p) => p.id === draft.positionId) ?? null;

  async function search(query: string): Promise<OpenPositionResolved[]> {
    const q = query.toLowerCase();
    return openPositions.filter((p) => p.title.toLowerCase().includes(q) || p.position_number.includes(q));
  }

  return (
    <div className="flex flex-col gap-4">
      <div>
        <label className="mb-1 block text-sm font-semibold text-ink">Position*</label>
        {!selected ? (
          <Lookup<OpenPositionResolved>
            placeholder="Positionsname oder -nummer…"
            onSearch={search}
            onSelect={(p) => update({ positionId: p.id })}
            renderResult={(p) => (
              <div>
                <div className="font-semibold text-ink">{p.title}</div>
                <div className="text-xs text-ink-muted">
                  {p.position_number} · {p.orgLabel}
                </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">{selected.title}</div>
              <div className="text-xs text-ink-muted">
                {selected.position_number} · {selected.orgLabel}
              </div>
            </div>
            <button type="button" onClick={() => update({ positionId: "" })} aria-label="Auswahl aufheben">
              <X className="h-4 w-4 text-ink-muted" />
            </button>
          </div>
        )}
        {openPositions.length === 0 && <p className="mt-1 text-xs text-ink-muted">Derzeit sind keine offenen Positionen vorhanden.</p>}
      </div>

      <div>
        <label className="mb-1 block text-sm font-semibold text-ink">Besetzung*</label>
        <select
          value={draft.besetzung}
          onChange={(e) => update({ besetzung: e.target.value as HireDraftData["besetzung"] })}
          className="w-full rounded border border-border px-3 py-2 text-sm"
        >
          <option value="">Bitte wählen…</option>
          <option value="Extern">Extern</option>
          <option value="Intern">Intern</option>
        </select>
      </div>

      <div>
        <label className="mb-1 block text-sm font-semibold text-ink">Führungskraft</label>
        <input value={selected?.managerName ?? "–"} disabled className="w-full rounded border border-border bg-surface px-3 py-2 text-sm text-ink-muted" />
      </div>
    </div>
  );
}