import { useEffect, useState } from "react";
import { api } from "../api";
import { useConfirm } from "../confirm";
import Icon from "../components/Icon";

export default function Locations() {
  const confirm = useConfirm();
  const [locations, setLocations] = useState([]);
  const [name, setName] = useState("");
  const [parentId, setParentId] = useState("");
  const [error, setError] = useState(null);

  async function load() {
    try {
      setLocations(await api.listLocations());
    } catch (err) {
      setError(err.message);
    }
  }

  useEffect(() => { load(); }, []);

  async function add(e) {
    e.preventDefault();
    setError(null);
    try {
      await api.createLocation({ name, parent_id: parentId === "" ? null : Number(parentId) });
      setName("");
      setParentId("");
      load();
    } catch (err) {
      setError(err.message);
    }
  }

  async function remove(id) {
    const ok = await confirm({
      title: "Lagerort löschen?",
      message: "Untergeordnete Orte rücken eine Ebene nach oben.",
      confirmLabel: "Löschen",
      danger: true,
    });
    if (!ok) return;
    try {
      await api.deleteLocation(id);
      load();
    } catch (err) {
      setError(err.message);
    }
  }

  const nameById = Object.fromEntries(locations.map((l) => [l.id, l.name]));
  const ids = new Set(locations.map((l) => l.id));
  const isRoot = (l) => !l.parent_id || !ids.has(l.parent_id);

  // Rekursiv über beliebig viele Ebenen (Schrank -> Fach -> Kiste -> …).
  const ordered = [];
  const seen = new Set();
  function walk(node, depth) {
    if (seen.has(node.id)) return; // Schutz vor Zyklen
    seen.add(node.id);
    ordered.push({ ...node, depth });
    for (const c of locations.filter((l) => l.parent_id === node.id)) walk(c, depth + 1);
  }
  for (const r of locations.filter(isRoot)) walk(r, 0);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>Lagerorte</h1>
          <div className="sub">Orte lassen sich verschachteln (z.B. Keller → Regal 2 → Fach A)</div>
        </div>
      </div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}

      <div className="card form-narrow">
        <form onSubmit={add}>
          <div className="row">
            <label className="grow">
              Name
              <input placeholder="z.B. Speisekammer oder Regal 2" value={name}
                onChange={(e) => setName(e.target.value)} required />
            </label>
            <label className="grow">
              Übergeordneter Lagerort (optional)
              <select value={parentId} onChange={(e) => setParentId(e.target.value)}>
                <option value="">– keiner (oberste Ebene) –</option>
                {locations.map((l) => (
                  <option key={l.id} value={l.id}>
                    {l.parent_id && nameById[l.parent_id] ? `${nameById[l.parent_id]} → ` : ""}{l.name}
                  </option>
                ))}
              </select>
            </label>
          </div>
          <button className="btn primary"><Icon name="plus" size={16} />Hinzufügen</button>
        </form>

        <ul className="simple-list">
          {ordered.map((l) => (
            <li key={l.id}>
              <span style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: l.depth * 22 }}>
                {l.depth > 0 && <span className="muted">↳</span>}
                <Icon name="location" size={15} className="muted" />
                {l.name}
                {l.depth > 0 && l.parent_id && nameById[l.parent_id] && (
                  <span className="badge">in {nameById[l.parent_id]}</span>
                )}
              </span>
              <button className="btn-icon danger" onClick={() => remove(l.id)} title="Löschen">
                <Icon name="trash" size={16} />
              </button>
            </li>
          ))}
          {locations.length === 0 && <li className="empty">Noch keine Lagerorte.</li>}
        </ul>
      </div>
    </div>
  );
}