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

  const [raw, setRaw] = useState(null);
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState("visits");
  const [expandedKey, setExpandedKey] = useState(null);

  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("reservations")
      .select("id,guest_name,guest_email,guest_phone,reserved_at,pax,status,source,notes,allergies,occasion,feedback_rating")
      .eq("client_id", client.id)
      .order("reserved_at", { ascending: false });

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

  var guests = useMemo(function () {
    if (!raw) return null;
    var map = {};

    raw.forEach(function (r) {
      var key = (r.guest_email || "").toLowerCase().trim()
             || (r.guest_phone || "").replace(/\D/g, "")
             || (r.guest_name || "").toLowerCase().trim();
      if (!key) return;

      if (!map[key]) {
        map[key] = {
          key: key,
          name: "",
          email: "",
          phone: "",
          reservations: [],
          confirmed: 0,
          pending: 0,
          noshows: 0,
          cancellations: 0,
          totalPax: 0,
          firstVisit: null,
          lastVisit: null,
          allergies: {},
          occasions: {},
          ratings: [],
        };
      }

      var g = map[key];
      g.reservations.push(r);

      if (r.guest_name && r.guest_name.length > g.name.length) g.name = r.guest_name;
      if (r.guest_email && !g.email) g.email = r.guest_email;
      if (r.guest_phone && !g.phone) g.phone = r.guest_phone;

      if (r.status === "confirmed") {
        g.confirmed++;
        g.totalPax += r.pax || 0;
        var d = r.reserved_at;
        if (!g.firstVisit || d < g.firstVisit) g.firstVisit = d;
        if (!g.lastVisit || d > g.lastVisit) g.lastVisit = d;
      } else if (r.status === "pending") {
        g.pending++;
      } else if (r.status === "noshow") {
        g.noshows++;
      } else if (r.status === "cancelled") {
        g.cancellations++;
      }

      if (r.allergies) g.allergies[r.allergies] = true;
      if (r.occasion) g.occasions[r.occasion] = true;
      if (r.feedback_rating) g.ratings.push(r.feedback_rating);
    });

    return Object.values(map).map(function (g) {
      var visits = g.confirmed;
      var avgRating = g.ratings.length > 0
        ? Math.round(g.ratings.reduce(function (a, b) { return a + b; }, 0) / g.ratings.length * 10) / 10
        : null;
      return Object.assign({}, g, {
        visits: visits,
        avgPax: visits > 0 ? Math.round(g.totalPax / visits * 10) / 10 : 0,
        allergies: Object.keys(g.allergies),
        occasions: Object.keys(g.occasions),
        avgRating: avgRating,
      });
    });
  }, [raw]);

  var filtered = useMemo(function () {
    if (!guests) return null;
    var q = search.toLowerCase().trim();

    var list = q
      ? guests.filter(function (g) {
          return g.name.toLowerCase().includes(q)
              || g.email.toLowerCase().includes(q)
              || g.phone.includes(q);
        })
      : guests;

    var sorted = list.slice();
    if (sortBy === "visits") {
      sorted.sort(function (a, b) { return b.visits - a.visits || (b.lastVisit || "").localeCompare(a.lastVisit || ""); });
    } else if (sortBy === "recent") {
      sorted.sort(function (a, b) { return (b.lastVisit || "").localeCompare(a.lastVisit || ""); });
    } else if (sortBy === "name") {
      sorted.sort(function (a, b) { return a.name.localeCompare(b.name); });
    }
    return sorted;
  }, [guests, search, sortBy]);

  function exportCSV() {
    if (!filtered || filtered.length === 0) return;
    var headers = [t.name, t.email, t.phone, t.colVisits, t.colLastVisit, t.colAvgPax, "No-shows", t.colAllergies];

    var rows = filtered.map(function (g) {
      return [
        g.name,
        g.email || "",
        g.phone || "",
        g.visits,
        g.lastVisit ? new Date(g.lastVisit).toLocaleDateString(locale()) : "",
        g.avgPax,
        g.noshows,
        g.allergies.join(", "),
      ];
    });

    var csvContent = [headers].concat(rows).map(function (row) {
      return row.map(function (cell) {
        return '"' + String(cell).replace(/"/g, '""') + '"';
      }).join(",");
    }).join("\n");

    var blob = new Blob(["" + csvContent], { type: "text/csv;charset=utf-8;" });
    var url = URL.createObjectURL(blob);
    var a = document.createElement("a");
    a.href = url;
    a.download = "clients_crm.csv";
    a.click();
    URL.revokeObjectURL(url);
  }

  function waContact(g) {
    var phone = (g.phone || "").replace(/\D/g, "");
    if (!phone) { window.SVX.toast(t.noPhone, "warn"); return; }
    window.open("https://wa.me/" + phone, "_blank");
  }

  function fmtDate(iso) {
    if (!iso) return "—";
    return new Date(iso).toLocaleDateString(locale(), { day: "numeric", month: "short", year: "numeric" });
  }

  function fmtDateTime(iso) {
    if (!iso) return "—";
    return new Date(iso).toLocaleDateString(locale(), { day: "numeric", month: "short" })
      + " " + new Date(iso).toLocaleTimeString(locale(), { hour: "2-digit", minute: "2-digit" });
  }

  function daysSince(iso) {
    if (!iso) return null;
    return Math.floor((Date.now() - new Date(iso).getTime()) / 86400000);
  }

  function statusLabel(s) {
    return (t.statuses || {})[s] || s;
  }

  if (guests === null) {
    return React.createElement("div", { style: { padding: 32, color: "var(--ink-3)", fontSize: 14 } }, "—");
  }

  var totalGuests = guests.length;
  var repeatGuests = guests.filter(function (g) { return g.visits > 1; }).length;
  var totalReservations = raw ? raw.length : 0;
  var avgVisits = totalGuests > 0
    ? Math.round(guests.reduce(function (s, g) { return s + g.visits; }, 0) / totalGuests * 10) / 10
    : 0;

  return (
    <div>
      <header className="srv-page-head">
        <div>
          <span className="eyebrow">{t.eyebrow}</span>
          <h1 className="t-h1">{t.title}</h1>
        </div>
      </header>

      <div className="crm-stats">
        <div className="crm-stat">
          <span className="crm-stat-val">{totalGuests}</span>
          <span className="crm-stat-label">{t.totalGuests}</span>
        </div>
        <div className="crm-stat">
          <span className="crm-stat-val">{repeatGuests}</span>
          <span className="crm-stat-label">{t.repeatGuests}</span>
        </div>
        <div className="crm-stat">
          <span className="crm-stat-val">{avgVisits}</span>
          <span className="crm-stat-label">{t.avgVisitsLabel}</span>
        </div>
        <div className="crm-stat">
          <span className="crm-stat-val">{totalReservations}</span>
          <span className="crm-stat-label">{t.totalRes}</span>
        </div>
      </div>

      <div className="crm-toolbar">
        <div className="crm-search-wrap">
          <i className="ph ph-magnifying-glass"></i>
          <input
            type="text"
            className="crm-search"
            placeholder={t.search}
            value={search}
            onChange={function (e) { setSearch(e.target.value); }}
          />
          {search && (
            <button className="crm-search-clear" onClick={function () { setSearch(""); }}>
              <i className="ph ph-x"></i>
            </button>
          )}
        </div>
        <div className="crm-sort-chips">
          {[
            { key: "visits", label: t.sortVisits },
            { key: "recent", label: t.sortRecent },
            { key: "name",   label: t.sortName },
          ].map(function (s) {
            return (
              <button
                key={s.key}
                className={"chip " + (sortBy === s.key ? "on" : "")}
                onClick={function () { setSortBy(s.key); }}
              >{s.label}</button>
            );
          })}
        </div>
        <button className="btn ghost" style={{ fontSize: 13, gap: 4 }} onClick={exportCSV}>
          <i className="ph ph-file-csv"></i> CSV
        </button>
      </div>

      {filtered.length === 0 ? (
        <p className="empty-hint">{search ? t.noResults : t.empty}</p>
      ) : (
        <div className="crm-list">
          {filtered.map(function (g) {
            var isExpanded = expandedKey === g.key;
            var days = daysSince(g.lastVisit);

            return (
              <React.Fragment key={g.key}>
                <div
                  className={"crm-guest" + (isExpanded ? " expanded" : "")}
                  onClick={function () { setExpandedKey(isExpanded ? null : g.key); }}
                >
                  <div className="crm-guest-main">
                    <div className="crm-guest-name">
                      <span>{g.name || t.anonymous}</span>
                      {g.visits > 2 && (
                        <span className="repeat-badge">
                          <i className="ph ph-heart"></i> {g.visits}
                        </span>
                      )}
                      {g.noshows > 0 && (
                        <span className="status-badge status-noshow" style={{ marginLeft: 6 }}>
                          {g.noshows} no-show{g.noshows > 1 ? "s" : ""}
                        </span>
                      )}
                    </div>
                    <div className="crm-guest-contact">
                      {g.email && (
                        <span><i className="ph ph-envelope-simple"></i> {g.email}</span>
                      )}
                      {g.phone && (
                        <span><i className="ph ph-phone"></i> {g.phone}</span>
                      )}
                    </div>
                  </div>

                  <div className="crm-guest-metrics">
                    <div className="crm-metric">
                      <span className="crm-metric-val">{g.visits}</span>
                      <span className="crm-metric-label">{t.colVisits}</span>
                    </div>
                    <div className="crm-metric">
                      <span className="crm-metric-val">{g.avgPax}</span>
                      <span className="crm-metric-label">{t.colAvgPax}</span>
                    </div>
                    <div className="crm-metric">
                      <span className="crm-metric-val">{days !== null ? days + "d" : "—"}</span>
                      <span className="crm-metric-label">{t.colLastVisit}</span>
                    </div>
                    {g.avgRating !== null && (
                      <div className="crm-metric">
                        <span className="crm-metric-val">
                          {g.avgRating}<i className="ph-fill ph-star" style={{ fontSize: 11, marginLeft: 2, color: "var(--terra-500)" }}></i>
                        </span>
                        <span className="crm-metric-label">{t.colRating}</span>
                      </div>
                    )}
                  </div>

                  <i className={"ph ph-caret-down crm-chevron" + (isExpanded ? " open" : "")}></i>
                </div>

                {isExpanded && (
                  <div className="crm-detail">
                    <div className="crm-detail-head">
                      <div className="crm-detail-info">
                        {g.allergies.length > 0 && (
                          <div className="crm-detail-row">
                            <i className="ph ph-warning-circle" style={{ color: "var(--terra-500)" }}></i>
                            <span><strong>{t.colAllergies}:</strong> {g.allergies.join(", ")}</span>
                          </div>
                        )}
                        {g.occasions.length > 0 && (
                          <div className="crm-detail-row">
                            <i className="ph ph-star" style={{ color: "var(--vinya-500)" }}></i>
                            <span>{g.occasions.join(", ")}</span>
                          </div>
                        )}
                        <div className="crm-detail-row">
                          <i className="ph ph-calendar-check"></i>
                          <span>{t.firstVisit}: {fmtDate(g.firstVisit)}</span>
                        </div>
                      </div>
                      <div className="crm-detail-actions">
                        {g.phone && (
                          <button className="btn ghost small" onClick={function (e) { e.stopPropagation(); waContact(g); }}>
                            <i className="ph ph-whatsapp-logo"></i> WhatsApp
                          </button>
                        )}
                        {g.email && (
                          <a className="btn ghost small" href={"mailto:" + g.email} onClick={function (e) { e.stopPropagation(); }}>
                            <i className="ph ph-envelope-simple"></i> Email
                          </a>
                        )}
                      </div>
                    </div>

                    <div className="crm-history">
                      <span className="eyebrow" style={{ marginBottom: 10, display: "block" }}>{t.history}</span>
                      {g.reservations.map(function (r) {
                        var statusCls = r.status === "cancelled" ? "status-cancelled"
                                      : r.status === "noshow"    ? "status-noshow"
                                      : r.status === "confirmed" ? "status-confirmed"
                                      : "";
                        return (
                          <div key={r.id} className="crm-history-row">
                            <span className="crm-history-date">{fmtDateTime(r.reserved_at)}</span>
                            <span className="crm-history-pax">{r.pax} {t.pax}</span>
                            <span className={"status-badge " + statusCls}>{statusLabel(r.status)}</span>
                            {r.feedback_rating && (
                              <span className="crm-history-rating">
                                {r.feedback_rating}<i className="ph-fill ph-star" style={{ fontSize: 10, marginLeft: 1 }}></i>
                              </span>
                            )}
                            {r.notes && <span className="crm-history-note">{r.notes}</span>}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                )}
              </React.Fragment>
            );
          })}
        </div>
      )}

      <div className="crm-footer">
        <span className="t-caption">
          {filtered.length} {filtered.length === 1 ? t.guestSingular : t.guestPlural}
          {search ? " · " + t.filtered : ""}
        </span>
      </div>
    </div>
  );
}

window.CRM = CRM;