function Analytics({ lang }) {
  const { useState, useEffect, useRef } = React;
  const T = window.T;
  const t = T[lang].analytics || {};

  function tr(ca, es, en, fr) {
    if (lang === "es") return es;
    if (lang === "en") return en || es;
    if (lang === "fr") return fr || en || es;
    return ca;
  }

  const [reservations, setReservations] = useState(null);
  const [period, setPeriod] = useState(30);
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(function () { loadData(); }, [period]);

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

    var since = new Date();
    since.setDate(since.getDate() - period);
    since.setHours(0, 0, 0, 0);

    var { data, error } = await window.SB
      .from("reservations")
      .select("id, reserved_at, pax, status, source, created_at")
      .eq("client_id", client.id)
      .gte("reserved_at", since.toISOString())
      .order("reserved_at", { ascending: true });

    if (error) {
      console.error("[Analytics] load:", error);
      window.SVX.toast(tr("Error carregant dades", "Error cargando datos", "Error loading data", "Erreur de chargement"), "error");
      setReservations([]);
      return;
    }
    setReservations(data || []);
  }

  // ── Computed stats ────────────────────────────────────────────────────
  function getStats() {
    if (!reservations || reservations.length === 0) return null;

    var total = reservations.length;
    var confirmed = 0, cancelled = 0, noshow = 0, pending = 0, totalPax = 0;
    var byDay = {};
    var byHour = {};
    var byDow = [0, 0, 0, 0, 0, 0, 0];
    var bySource = { web_form: 0, whatsapp_bot: 0, manual: 0 };

    for (var i = 0; i < reservations.length; i++) {
      var r = reservations[i];
      if (r.status === "confirmed") confirmed++;
      else if (r.status === "cancelled") cancelled++;
      else if (r.status === "noshow") noshow++;
      else if (r.status === "pending") pending++;

      totalPax += r.pax || 0;

      var d = new Date(r.reserved_at);
      var dk = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
      byDay[dk] = (byDay[dk] || 0) + 1;

      var h = d.getHours();
      byHour[h] = (byHour[h] || 0) + 1;

      byDow[d.getDay()]++;

      var src = r.source || "manual";
      if (bySource[src] !== undefined) bySource[src]++;
      else bySource.manual++;
    }

    var attended = confirmed + noshow;
    var noshowRate = attended > 0 ? Math.round((noshow / attended) * 100) : 0;
    var avgPax = total > 0 ? (totalPax / total).toFixed(1) : 0;

    var peakHour = Object.keys(byHour).sort(function (a, b) { return byHour[b] - byHour[a]; })[0];
    var dowLabels = tr(
      ["Dg", "Dl", "Dt", "Dc", "Dj", "Dv", "Ds"],
      ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"],
      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"]
    );
    var peakDay = byDow.indexOf(Math.max.apply(null, byDow));

    return {
      total, confirmed, cancelled, noshow, pending, totalPax,
      noshowRate, avgPax, peakHour, peakDay, dowLabels,
      byDay, byHour, byDow, bySource,
    };
  }

  // ── Chart ────────────────────────────────────────────────────────────
  useEffect(function () {
    if (!reservations || reservations.length === 0 || !chartRef.current || !window.Chart) return;

    var stats = getStats();
    if (!stats) return;

    var labels = [];
    var values = [];
    var d = new Date();
    d.setDate(d.getDate() - period);
    for (var i = 0; i <= period; i++) {
      d.setDate(d.getDate() + 1);
      var dk = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
      labels.push(String(d.getDate()) + "/" + String(d.getMonth() + 1));
      values.push(stats.byDay[dk] || 0);
    }

    if (chartInstance.current) chartInstance.current.destroy();

    chartInstance.current = new window.Chart(chartRef.current, {
      type: "bar",
      data: {
        labels: labels,
        datasets: [{
          label: tr("Reserves", "Reservas", "Reservations", "Réservations"),
          data: values,
          backgroundColor: "rgba(45, 74, 34, 0.6)",
          borderRadius: 4,
        }],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
          y: { beginAtZero: true, ticks: { stepSize: 1 } },
          x: { ticks: { maxRotation: 0, autoSkip: true, maxTicksLimit: 15 } },
        },
      },
    });

    return function () {
      if (chartInstance.current) { chartInstance.current.destroy(); chartInstance.current = null; }
    };
  }, [reservations, period]);

  // ── Render ──────────────────────────────────────────────────────────
  if (reservations === null) return (
    <div style={{ padding: 32, color: "var(--ink-3)", fontSize: 14 }}>—</div>
  );

  var stats = getStats();

  var cardStyle = {
    background: "var(--paper-1, #FAFAF8)", borderRadius: 12,
    padding: "20px 24px", border: "1px solid var(--line)",
  };
  var bigNum = { fontSize: 32, fontWeight: 700, color: "var(--ink-1)", lineHeight: 1 };
  var label = { fontSize: 12, color: "var(--ink-3)", marginTop: 4, textTransform: "uppercase", letterSpacing: "0.05em" };

  var periodBtns = [
    { d: 7,  label: "7d" },
    { d: 30, label: "30d" },
    { d: 90, label: "90d" },
  ];

  return (
    <div>
      <header className="srv-page-head" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <h1 className="t-h1">{tr("Estadístiques", "Estadísticas", "Analytics", "Statistiques")}</h1>
        <div style={{ display: "flex", gap: 4 }}>
          {periodBtns.map(function (p) {
            return (
              <button key={p.d} className={"chip " + (period === p.d ? "on" : "")}
                onClick={function () { setPeriod(p.d); }}>
                {p.label}
              </button>
            );
          })}
        </div>
      </header>

      {!stats ? (
        <p className="empty-hint">
          {tr(
            "No hi ha reserves en aquest període.",
            "No hay reservas en este período.",
            "No reservations in this period.",
            "Aucune réservation sur cette période."
          )}
        </p>
      ) : (
        <>
          {/* KPI cards */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 12, marginBottom: 24 }}>
            <div style={cardStyle}>
              <div style={bigNum}>{stats.total}</div>
              <div style={label}>{tr("Total reserves", "Total reservas", "Total reservations", "Total réservations")}</div>
            </div>
            <div style={cardStyle}>
              <div style={Object.assign({}, bigNum, { color: stats.noshowRate > 15 ? "var(--danger, #dc3545)" : "var(--ink-1)" })}>
                {stats.noshowRate}%
              </div>
              <div style={label}>No-show</div>
            </div>
            <div style={cardStyle}>
              <div style={bigNum}>{stats.avgPax}</div>
              <div style={label}>{tr("Pax mitjà", "Pax medio", "Avg guests", "Pax moyen")}</div>
            </div>
            <div style={cardStyle}>
              <div style={bigNum}>{stats.totalPax}</div>
              <div style={label}>{tr("Total comensals", "Total comensales", "Total guests", "Total convives")}</div>
            </div>
          </div>

          {/* Chart */}
          <div style={Object.assign({}, cardStyle, { marginBottom: 24, height: 260 })}>
            <canvas ref={chartRef}></canvas>
          </div>

          {/* Secondary stats */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 24 }}>
            {/* By day of week */}
            <div style={cardStyle}>
              <div style={Object.assign({}, label, { marginTop: 0, marginBottom: 12 })}>
                {tr("Per dia de la setmana", "Por día de la semana", "By day of week", "Par jour de la semaine")}
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", height: 80 }}>
                {stats.byDow.map(function (count, idx) {
                  var max = Math.max.apply(null, stats.byDow) || 1;
                  var pct = Math.round((count / max) * 100);
                  return (
                    <div key={idx} style={{ textAlign: "center", flex: 1 }}>
                      <div style={{
                        height: Math.max(pct * 0.6, 2),
                        background: idx === stats.peakDay ? "var(--primary, #2D4A22)" : "var(--line)",
                        borderRadius: 3, margin: "0 2px",
                      }}></div>
                      <div style={{ fontSize: 10, color: "var(--ink-3)", marginTop: 4 }}>{stats.dowLabels[idx]}</div>
                      <div style={{ fontSize: 10, color: "var(--ink-2)" }}>{count}</div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* By source */}
            <div style={cardStyle}>
              <div style={Object.assign({}, label, { marginTop: 0, marginBottom: 12 })}>
                {tr("Per font", "Por fuente", "By source", "Par source")}
              </div>
              {[
                { key: "web_form", label: "Web", color: "#2D4A22" },
                { key: "whatsapp_bot", label: "WhatsApp Bot", color: "#25D366" },
                { key: "manual", label: "Manual", color: "#888" },
              ].map(function (s) {
                var count = stats.bySource[s.key] || 0;
                var pct = stats.total > 0 ? Math.round((count / stats.total) * 100) : 0;
                return (
                  <div key={s.key} style={{ marginBottom: 8 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 2 }}>
                      <span style={{ color: "var(--ink-2)" }}>{s.label}</span>
                      <span style={{ color: "var(--ink-1)", fontWeight: 500 }}>{count} ({pct}%)</span>
                    </div>
                    <div style={{ height: 6, background: "var(--line)", borderRadius: 3, overflow: "hidden" }}>
                      <div style={{ height: "100%", width: pct + "%", background: s.color, borderRadius: 3 }}></div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Status breakdown */}
          <div style={Object.assign({}, cardStyle, { marginBottom: 24 })}>
            <div style={Object.assign({}, label, { marginTop: 0, marginBottom: 12 })}>
              {tr("Estat de les reserves", "Estado de las reservas", "Reservation status", "État des réservations")}
            </div>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
              {[
                { key: "confirmed", label: tr("Confirmades", "Confirmadas", "Confirmed", "Confirmées"), color: "#2D4A22" },
                { key: "pending", label: tr("Pendents", "Pendientes", "Pending", "En attente"), color: "#D4A017" },
                { key: "cancelled", label: tr("Cancel·lades", "Canceladas", "Cancelled", "Annulées"), color: "#888" },
                { key: "noshow", label: "No-show", color: "#dc3545" },
              ].map(function (s) {
                var count = stats[s.key] || 0;
                var pct = stats.total > 0 ? Math.round((count / stats.total) * 100) : 0;
                return (
                  <div key={s.key} style={{ textAlign: "center", minWidth: 80 }}>
                    <div style={{ fontSize: 24, fontWeight: 700, color: s.color }}>{count}</div>
                    <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{s.label} ({pct}%)</div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Peak hour */}
          {stats.peakHour && (
            <div style={cardStyle}>
              <div style={Object.assign({}, label, { marginTop: 0, marginBottom: 8 })}>
                {tr("Hora punta", "Hora punta", "Peak hour", "Heure de pointe")}
              </div>
              <div style={bigNum}>{stats.peakHour}:00</div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

window.Analytics = Analytics;