import { useState } from "react";

import { apiRequest } from "../../api/client";
import type { Bereich, Kategorie, Objekttyp } from "../../api/types";

interface Props {
  bereiche: Bereich[];
  kategorien: Kategorie[];
  objekttypen: Objekttyp[];
  onGeaendert: () => Promise<void>;
  onFehler: (text: string) => void;
}

export function ObjekttypSection({ bereiche, kategorien, objekttypen, onGeaendert, onFehler }: Props) {
  const [name, setName] = useState("");
  const [bereichId, setBereichId] = useState<number | "">("");
  const [kategorieId, setKategorieId] = useState<number | "">("");
  const [wirdAngelegt, setWirdAngelegt] = useState(false);

  async function anlegen() {
    if (bereichId === "") {
      onFehler("Bereich auswählen.");
      return;
    }
    setWirdAngelegt(true);
    try {
      await apiRequest("/objekttypen", {
        method: "POST",
        body: { name, bereich_id: bereichId, kategorie_id: kategorieId || null },
      });
      setName("");
      await onGeaendert();
    } catch {
      onFehler("Objekttyp konnte nicht angelegt werden.");
    } finally {
      setWirdAngelegt(false);
    }
  }

  return (
    <section className="section">
      <h2>Objekttyp anlegen</h2>
      <div className="card">
        {bereiche.length === 0 ? (
          <p className="text-muted">Erst einen Bereich anlegen.</p>
        ) : (
          <div className="stack" style={{ marginBottom: objekttypen.length ? "1.25rem" : 0 }}>
            <div className="row">
              <select className="input" value={bereichId} onChange={(e) => setBereichId(Number(e.target.value) || "")}>
                <option value="">Bereich wählen…</option>
                {bereiche.map((b) => (
                  <option key={b.id} value={b.id}>
                    {b.name}
                  </option>
                ))}
              </select>
              <select className="input" value={kategorieId} onChange={(e) => setKategorieId(Number(e.target.value) || "")}>
                <option value="">Kategorie (optional)…</option>
                {kategorien.map((k) => (
                  <option key={k.id} value={k.id}>
                    {k.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="row">
              <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" />
              <button className="btn btn-primary" onClick={anlegen} disabled={!name || wirdAngelegt}>
                Anlegen
              </button>
            </div>
          </div>
        )}
        {objekttypen.length > 0 && (
          <ul className="card-list">
            {objekttypen.map((o) => (
              <li key={o.id} style={{ padding: "0.4rem 0" }}>
                {o.name}
              </li>
            ))}
          </ul>
        )}
      </div>
    </section>
  );
}