function Waitlist({ lang }) {
  const { useState, useEffect, useMemo } = React;
  const T = window.T;
  const t = T[lang].waitlist;

  const [entries, setEntries] = useState(null);
  const [filter, setFilter] = useState("waiting");

  function locale() {
    return lang === "es" ? "es-ES" : lang === "en" ? "en-GB" : lang === "fr" ? "fr-FR" : "ca-ES";
  }

  useEffect(function () { load(); }, []);

  async function load() {
    var client = await window.SVX.getCurrentClient();
    if (!client) return;

    var { data, error } = await window.SB
      .from("waitlist_entries")
      .select("*")
      .eq("client_id", client.id)
      .order("desired_date", { ascending: true })
      .order("created_at", { ascending: true });

    if (error) {
      console.error("[Waitlist] load:", error);
      window.SVX.toast(t.error, "error");
      setEntries([]);
      return;
    }
    setEntries(data || []);
  }

  async function updateStatus(id, status) {
    var { error } = await window.SB
      .from("waitlist_entries")
      .update({ status: status })
      .eq("id", id);

    if (error) {
      console.error("[Waitlist] update:", error);
      window.SVX.toast(t.error, "error");
      return;
    }
    setEntries(function (prev) {
      return prev.map(function (e) { return e.id === id ? Object.assign({}, e, { status: status }) : e; });
    });
  }

  var filtered = useMemo(function () {
    if (!entries) return [];
    if (filter === "all") return entries;
    return entries.filter(function (e) { return e.status === filter; });
  }, [entries, filter]);

  var stats = useMemo(function () {
    if (!entries) return { waiting: 0, notified: 0, converted: 0, expired: 0 };
    var s = { waiting: 0, notified: 0, converted: 0, expired: 0 };
    entries.forEach(function (e) { if (s[e.status] !== undefined) s[e.status]++; });
    return s;
  }, [entries]);

  if (entries === null) {
    return React.createElement("div", { className: "srv-loading" },
      React.createElement("i", { className: "ph ph-spinner", style: { fontSize: 28, animation: "spin 0.8s linear infinite" } })
    );
  }

  function fmtDate(d) {
    try { return new Date(d + "T00:00:00").toLocaleDateString(locale(), { day: "numeric", month: "short", year: "numeric" }); }
    catch (_) { return d; }
  }

  function fmtDateTime(iso) {
    try { return new Date(iso).toLocaleString(locale(), { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }); }
    catch (_) { return iso; }
  }

  var FILTERS = ["waiting", "notified", "converted", "expired", "all"];

  return React.createElement("section", { className: "crm-wrap" },
    React.createElement("header", { className: "crm-header" },
      React.createElement("p", { className: "eyebrow" }, t.eyebrow),
      React.createElement("h1", null, t.title)
    ),

    React.createElement("div", { className: "crm-stats" },
      React.createElement("div", { className: "crm-stat" },
        React.createElement("span", { className: "crm-stat-n" }, stats.waiting),
        React.createElement("span", { className: "crm-stat-label" }, t.statusWaiting)
      ),
      React.createElement("div", { className: "crm-stat" },
        React.createElement("span", { className: "crm-stat-n" }, stats.notified),
        React.createElement("span", { className: "crm-stat-label" }, t.statusNotified)
      ),
      React.createElement("div", { className: "crm-stat" },
        React.createElement("span", { className: "crm-stat-n" }, stats.converted),
        React.createElement("span", { className: "crm-stat-label" }, t.statusConverted)
      ),
      React.createElement("div", { className: "crm-stat" },
        React.createElement("span", { className: "crm-stat-n" }, stats.expired),
        React.createElement("span", { className: "crm-stat-label" }, t.statusExpired)
      )
    ),

    React.createElement("div", { className: "crm-toolbar" },
      React.createElement("div", { className: "crm-sort-chips" },
        FILTERS.map(function (f) {
          return React.createElement("button", {
            key: f,
            className: "crm-chip" + (filter === f ? " on" : ""),
            onClick: function () { setFilter(f); }
          }, t["filter_" + f] || f);
        })
      )
    ),

    filtered.length === 0
      ? React.createElement("p", { className: "crm-empty" }, t.empty)
      : React.createElement("div", { className: "crm-list" },
          filtered.map(function (entry) {
            return React.createElement("div", { key: entry.id, className: "wl-entry" },
              React.createElement("div", { className: "wl-entry-main" },
                React.createElement("span", { className: "wl-name" }, entry.guest_name),
                React.createElement("span", { className: "wl-contact" },
                  entry.guest_email,
                  entry.guest_phone ? " · " + entry.guest_phone : ""
                )
              ),
              React.createElement("div", { className: "wl-entry-meta" },
                React.createElement("span", { className: "wl-date" }, fmtDate(entry.desired_date)),
                React.createElement("span", { className: "wl-time" }, entry.desired_time),
                React.createElement("span", { className: "wl-pax" }, entry.pax + " pax")
              ),
              React.createElement("div", { className: "wl-entry-status" },
                React.createElement("span", {
                  className: "status-badge status-" + entry.status
                }, t["status" + entry.status.charAt(0).toUpperCase() + entry.status.slice(1)])
              ),
              React.createElement("div", { className: "wl-entry-actions" },
                entry.status === "waiting" && React.createElement("button", {
                  className: "wl-action-btn",
                  title: t.actionNotify,
                  onClick: function () { updateStatus(entry.id, "notified"); }
                }, React.createElement("i", { className: "ph ph-bell-ringing" })),
                (entry.status === "waiting" || entry.status === "notified") && React.createElement("button", {
                  className: "wl-action-btn",
                  title: t.actionConvert,
                  onClick: function () { updateStatus(entry.id, "converted"); }
                }, React.createElement("i", { className: "ph ph-check-circle" })),
                (entry.status === "waiting" || entry.status === "notified") && React.createElement("button", {
                  className: "wl-action-btn",
                  title: t.actionExpire,
                  onClick: function () { updateStatus(entry.id, "expired"); }
                }, React.createElement("i", { className: "ph ph-x-circle" }))
              ),
              entry.notes ? React.createElement("div", { className: "wl-entry-notes" }, entry.notes) : null
            );
          })
        ),

    React.createElement("footer", { className: "crm-footer" },
      React.createElement("small", null, t.total + ": " + entries.length)
    )
  );
}

window.Waitlist = Waitlist;