/* panel-analytics.jsx — Analítica avanzada (Premium/Elite) con DATOS REALES
   (F2 Punto 9): pedidos por día/hora/barrio, tiempos de entrega, calificaciones,
   multas y consumo del plan del propio restaurante (RLS acota los datos).
   El estado bloqueado (Gourmet Express) usa una vista previa estática. */
const { useState: anState, useEffect: anPEffect, useMemo: anPMemo } = React;

const AN_HOURS = ["10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm"];
const AN_HORA0 = 10; /* primera franja del heatmap/barras */
const AN_TDAYS = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];

/* Carga los datos reales del restaurante (últimos 90 días) una sola vez. */
function usarDatosAnalitica() {
  const [datos, setDatos] = anState(undefined); /* undefined = cargando */
  anPEffect(() => {
    let on = true;
    (async () => {
      if (!window.treego_db) { if (on) setDatos(null); return; }
      const desde = new Date(Date.now() - 90 * 86400000).toISOString();
      const [peds, muls] = await Promise.all([
        window.treego_db.from("pedidos")
          .select("id, fecha_creacion, fecha_cierre, estado_actual, valor_pedido, origen, direcciones(barrio), calificaciones(puntuacion, fuente)")
          .gte("fecha_creacion", desde)
          .order("fecha_creacion", { ascending: true })
          .limit(2000)
          .then(({ data }) => data || []),
        window.treego_db.from("multas")
          .select("valor_multa, fecha_generacion, estado")
          .gte("fecha_generacion", desde)
          .then(({ data }) => data || []),
      ]);
      if (on) setDatos({ peds, muls });
    })();
    return () => { on = false; };
  }, []);
  return datos;
}

/* Agregaciones puras sobre los pedidos reales. */
function agregarAnalitica(peds, muls) {
  const hoy = new Date(); hoy.setHours(0, 0, 0, 0);
  const dia = (d) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; };
  const difDias = (d) => Math.round((hoy - dia(d)) / 86400000);

  /* KPIs */
  const semana = peds.filter((p) => difDias(p.fecha_creacion) < 7).length;
  const semanaPrev = peds.filter((p) => { const n = difDias(p.fecha_creacion); return n >= 7 && n < 14; }).length;
  const deltaSem = semanaPrev > 0 ? Math.round((semana - semanaPrev) / semanaPrev * 100) : null;
  const entregados = peds.filter((p) => p.estado_actual === "entregado" && p.fecha_cierre);
  const duraciones = entregados
    .map((p) => (new Date(p.fecha_cierre) - new Date(p.fecha_creacion)) / 60000)
    .filter((m) => m > 0 && m < 240);
  const entregaProm = duraciones.length ? duraciones.reduce((a, b) => a + b, 0) / duraciones.length : null;
  const tickets = peds.map((p) => Number(p.valor_pedido || 0)).filter((v) => v > 0);
  const ticketProm = tickets.length ? tickets.reduce((a, b) => a + b, 0) / tickets.length : null;
  const califs = peds.flatMap((p) => (p.calificaciones || []).map((c) => Number(c.puntuacion)));
  const califProm = califs.length ? califs.reduce((a, b) => a + b, 0) / califs.length : null;
  const multasMes = muls.filter((m) => difDias(m.fecha_generacion) < 30);
  const multasValor = multasMes.reduce((a, m) => a + Number(m.valor_multa || 0), 0);

  /* Serie: pedidos por día, últimos 14 días */
  const serie = [], sLabels = [];
  for (let i = 13; i >= 0; i--) {
    const d = new Date(hoy); d.setDate(d.getDate() - i);
    serie.push(peds.filter((p) => dia(p.fecha_creacion).getTime() === d.getTime()).length);
    sLabels.push(String(d.getDate()));
  }

  /* Origen: marketplace (pedidos en línea del cliente) vs directos (los que
     el restaurante carga en "Pedir domiciliario") — total 90 días + serie 14 días */
  const esMk = (p) => p.origen === "marketplace";
  const mkTotal = peds.filter(esMk).length;
  const dirTotal = peds.length - mkTotal;
  const serieMk = [], serieDir = [];
  for (let i = 13; i >= 0; i--) {
    const d = new Date(hoy); d.setDate(d.getDate() - i);
    const delDia = peds.filter((p) => dia(p.fecha_creacion).getTime() === d.getTime());
    serieMk.push(delDia.filter(esMk).length);
    serieDir.push(delDia.length - delDia.filter(esMk).length);
  }

  /* Barras: pedidos por hora (franjas 10am–9pm) */
  const barras = AN_HOURS.map((_, i) =>
    peds.filter((p) => new Date(p.fecha_creacion).getHours() === AN_HORA0 + i).length);

  /* Barrios: ranking + heatmap barrio×hora (top 5) */
  const porBarrio = {};
  peds.forEach((p) => {
    const b = (p.direcciones && p.direcciones.barrio) || "Sin barrio";
    porBarrio[b] = porBarrio[b] || [];
    porBarrio[b].push(p);
  });
  const ranking = Object.entries(porBarrio)
    .map(([b, arr]) => [b, arr.length]).sort((a, b) => b[1] - a[1]).slice(0, 5);
  const zonas = ranking.map(([b]) => b);
  const heat = zonas.map((b) => AN_HOURS.map((_, i) =>
    porBarrio[b].filter((p) => new Date(p.fecha_creacion).getHours() === AN_HORA0 + i).length));
  const heatMax = Math.max(1, ...heat.flat());

  /* Tendencias por día de semana: entrega (min) y calificación (prom) */
  const porDow = (dow) => entregados.filter((p) => (new Date(p.fecha_creacion).getDay() + 6) % 7 === dow);
  const tEntrega = AN_TDAYS.map((_, dw) => {
    const ds = porDow(dw).map((p) => (new Date(p.fecha_cierre) - new Date(p.fecha_creacion)) / 60000).filter((m) => m > 0 && m < 240);
    return ds.length ? Number((ds.reduce((a, b) => a + b, 0) / ds.length).toFixed(1)) : null;
  });
  const tCalif = AN_TDAYS.map((_, dw) => {
    const cs = porDow(dw).flatMap((p) => (p.calificaciones || []).map((c) => Number(c.puntuacion)));
    return cs.length ? Number((cs.reduce((a, b) => a + b, 0) / cs.length).toFixed(2)) : null;
  });

  /* franja pico */
  const peakIdx = barras.indexOf(Math.max(...barras));
  const franjaPico = Math.max(...barras) > 0 ? AN_HOURS[peakIdx] : null;

  return {
    total: peds.length, semana, deltaSem, entregaProm, ticketProm, califProm,
    multasN: multasMes.length, multasValor, serie, sLabels, barras,
    zonas, heat, heatMax, ranking, tEntrega, tCalif, franjaPico,
    barrioTop: ranking.length ? ranking[0][0] : null,
    mkTotal, dirTotal, serieMk, serieDir,
  };
}

/* ---------------- gráficos SVG (interactivos) ---------------- */
function AnArea({ data, labels }) {
  const w = 660, h = 220, padX = 14, padT = 18, padB = 30;
  const max = Math.max(...data) * 1.14;
  const x = (i) => padX + i * (w - padX * 2) / (data.length - 1);
  const y = (v) => h - padB - (v / max) * (h - padT - padB);
  const line = data.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(" ");
  const area = `${line} L${x(data.length - 1).toFixed(1)} ${h - padB} L${x(0).toFixed(1)} ${h - padB} Z`;
  const [hi, setHi] = anState(null);
  const move = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const i = Math.round((e.clientX - r.left) / r.width * (data.length - 1));
    setHi(Math.max(0, Math.min(data.length - 1, i)));
  };
  return (
    <div className="an-plot" onMouseMove={move} onMouseLeave={() => setHi(null)}>
      <svg className="an-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="anAreaG" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={window.TREEGO_BRAND.light} stopOpacity="0.42" />
            <stop offset="1" stopColor={window.TREEGO_BRAND.dark} stopOpacity="0" />
          </linearGradient>
          <linearGradient id="anLineG" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor={window.TREEGO_BRAND.light} /><stop offset="1" stopColor={window.TREEGO_BRAND.dark} />
          </linearGradient>
        </defs>
        {[0, .5, 1].map((g) => (
          <line key={g} className="an-grid" x1={padX} x2={w - padX} y1={y(max * g / 1.14)} y2={y(max * g / 1.14)} strokeWidth="1" />
        ))}
        <path d={area} fill="url(#anAreaG)" />
        <path d={line} fill="none" stroke="url(#anLineG)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        {data.map((v, i) => (
          <circle key={i} className={i === data.length - 1 ? "" : "an-dot"} cx={x(i)} cy={y(v)} r={i === data.length - 1 ? 4.5 : 2.6} fill={i === data.length - 1 ? window.TREEGO_BRAND.primary : undefined} stroke={window.TREEGO_BRAND.primary} strokeWidth="1.8" />
        ))}
        {labels.map((l, i) => (i % 2 === 0 || i === labels.length - 1) && (
          <text key={i} className="an-axis" x={x(i)} y={h - 9} textAnchor="middle" fontSize="11" fontFamily="DM Mono, monospace">{l}</text>
        ))}
      </svg>
      {hi !== null && (
        <React.Fragment>
          <span className="an-guide" style={{ left: x(hi) / w * 100 + "%" }}></span>
          <span className="an-marker" style={{ left: x(hi) / w * 100 + "%", top: y(data[hi]) / h * 100 + "%" }}></span>
          <div className="an-tip" style={{ left: x(hi) / w * 100 + "%", top: y(data[hi]) / h * 100 + "%" }}>
            <b>{data[hi]} pedido{data[hi] === 1 ? "" : "s"}</b><span>día {labels[hi]}</span>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function AnBars({ data, labels }) {
  const max = Math.max(...data);
  const peak = data.indexOf(max);
  const [hi, setHi] = anState(null);
  return (
    <div className="an-bars">
      {data.map((v, i) => (
        <div className={"an-bar-col" + (hi === i ? " hot" : "")} key={i} onMouseEnter={() => setHi(i)} onMouseLeave={() => setHi(null)}>
          <div className="an-bar-track">
            <div className={"an-bar-fill" + (i === peak ? " peak" : "")} style={{ height: (v / max * 100) + "%" }}>
              {hi === i && <div className="an-tip an-tip-bar"><b>{v} pedidos</b><span>{labels[i]}</span></div>}
            </div>
          </div>
          <span className="an-bar-lbl">{labels[i]}</span>
        </div>
      ))}
    </div>
  );
}

function AnLines({ s1, s2, labels, l1 = "Llegada", l2 = "Puntualidad", u1 = " min", u2 = "%" }) {
  const w = 660, h = 200, padX = 16, padT = 16, padB = 28;
  const norm = (arr) => { const mn = Math.min(...arr), mx = Math.max(...arr); return arr.map((v) => (v - mn) / (mx - mn || 1)); };
  const n1 = norm(s1), n2 = norm(s2);
  const x = (i) => padX + i * (w - padX * 2) / (labels.length - 1);
  const y = (t) => h - padB - t * (h - padT - padB);
  const path = (n) => n.map((t, i) => `${i ? "L" : "M"}${x(i).toFixed(1)} ${y(t).toFixed(1)}`).join(" ");
  const [hi, setHi] = anState(null);
  const move = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const i = Math.round((e.clientX - r.left) / r.width * (labels.length - 1));
    setHi(Math.max(0, Math.min(labels.length - 1, i)));
  };
  return (
    <div className="an-plot" onMouseMove={move} onMouseLeave={() => setHi(null)}>
      <svg className="an-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
        {[0, .5, 1].map((g) => <line key={g} className="an-grid" x1={padX} x2={w - padX} y1={y(g)} y2={y(g)} strokeWidth="1" />)}
        <path d={path(n2)} fill="none" stroke="#5bbf73" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="5 5" />
        <path d={path(n1)} fill="none" stroke={window.TREEGO_BRAND.primary} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        {n1.map((t, i) => <circle key={"a" + i} className="an-dot" cx={x(i)} cy={y(t)} r="3.2" stroke={window.TREEGO_BRAND.primary} strokeWidth="1.8" />)}
        {n2.map((t, i) => <circle key={"b" + i} className="an-dot" cx={x(i)} cy={y(t)} r="3.2" stroke="#5bbf73" strokeWidth="1.8" />)}
        {labels.map((l, i) => <text key={i} className="an-axis" x={x(i)} y={h - 8} textAnchor="middle" fontSize="11" fontFamily="DM Mono, monospace">{l}</text>)}
      </svg>
      {hi !== null && (
        <React.Fragment>
          <span className="an-guide" style={{ left: x(hi) / w * 100 + "%" }}></span>
          <span className="an-marker" style={{ left: x(hi) / w * 100 + "%", top: y(n1[hi]) / h * 100 + "%" }}></span>
          <span className="an-marker g" style={{ left: x(hi) / w * 100 + "%", top: y(n2[hi]) / h * 100 + "%" }}></span>
          <div className="an-tip an-tip-multi" style={{ left: x(hi) / w * 100 + "%", top: Math.min(y(n1[hi]), y(n2[hi])) / h * 100 + "%" }}>
            <span className="an-tip-ttl">{labels[hi]}</span>
            <div className="an-tip-row"><i style={{ background: "var(--color-primary)" }}></i>{l1}<b>{s1[hi] ? String(s1[hi]).replace(".", ",") + u1 : "—"}</b></div>
            <div className="an-tip-row"><i style={{ background: "#5bbf73" }}></i>{l2}<b>{s2[hi] ? String(s2[hi]).replace(".", ",") + u2 : "—"}</b></div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

/* Origen de los pedidos: barra dividida marketplace vs directos */
function AnOrigen({ mk, dir }) {
  const total = mk + dir;
  const pMk = total ? Math.round(mk / total * 100) : 0;
  return (
    <div>
      <div style={{ display: "flex", gap: 22, marginBottom: 16 }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 30, lineHeight: 1 }}>{mk}</div>
          <div className="muted" style={{ fontSize: 12.5, marginTop: 5 }}>
            <i style={{ display: "inline-block", width: 9, height: 9, borderRadius: 3, background: "var(--grad)", marginRight: 6 }}></i>
            Marketplace · {pMk}%
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 30, lineHeight: 1 }}>{dir}</div>
          <div className="muted" style={{ fontSize: 12.5, marginTop: 5 }}>
            <i style={{ display: "inline-block", width: 9, height: 9, borderRadius: 3, background: "var(--ink-3)", marginRight: 6 }}></i>
            Directos · {100 - pMk}%
          </div>
        </div>
      </div>
      <div style={{ height: 14, borderRadius: 999, overflow: "hidden", display: "flex", background: "var(--panel-3)" }}
        aria-label={`Marketplace ${pMk}% · directos ${100 - pMk}%`}>
        {total > 0 && (
          <React.Fragment>
            <div style={{ width: pMk + "%", background: "var(--grad)" }}></div>
            <div style={{ flex: 1, background: "var(--ink-3)", opacity: .55 }}></div>
          </React.Fragment>
        )}
      </div>
      <p className="muted" style={{ fontSize: 12.5, marginTop: 12 }}>
        Marketplace = pedidos que el cliente hizo en línea en tu página pública.
        Directos = los que registras tú con "Pedir domiciliario".
      </p>
    </div>
  );
}

/* ---------------- cuerpo de la analítica (DATOS REALES) ---------------- */
function AnalyticsBody() {
  const [hcell, setHcell] = anState(null);
  const datos = usarDatosAnalitica();
  const a = anPMemo(() => (datos && datos.peds ? agregarAnalitica(datos.peds, datos.muls) : null), [datos]);

  if (datos === undefined) {
    return <div className="card card-pad" style={{ textAlign: "center", padding: 48 }}><p className="muted">Cargando tu analítica…</p></div>;
  }
  if (!a || a.total === 0) return <AnalyticsEmpty />;

  const kpis = [
    ["pkg", String(a.semana), "Pedidos esta semana", a.deltaSem != null ? (a.deltaSem >= 0 ? "+" : "") + a.deltaSem + "%" : "", a.deltaSem >= 0 ? "up" : "down"],
    ["clock", a.entregaProm != null ? Math.round(a.entregaProm) + " min" : "—", "Entrega promedio", "", ""],
    ["pin", a.barrioTop || "—", "Barrio top (90 días)", "", ""],
    ["chart", a.ticketProm != null ? fmtCOP(Math.round(a.ticketProm)) : "—", "Ticket promedio", "", ""],
    ["star", a.califProm != null ? a.califProm.toFixed(2) + " ★" : "—", "Calificación de tus entregas", "", ""],
    ["flag", a.multasN ? `${a.multasN} · ${fmtCOP(a.multasValor)}` : "0", "Multas últimos 30 días", "", ""],
    ["layers", S.plan ? String(S.plan.used || 0) : "—", "Pedidos del mes", "", ""],
    ["zap", a.franjaPico || "—", "Franja pico", "", ""],
  ];

  return (
    <div className="an-page">
      <div className="kpis" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        {kpis.map(([ic, n, l, d, dir]) => (
          <div className="kpi" key={l}>
            <div className="top"><span className="ic"><Icon name={ic} /></span>{d && <span className={"delta " + dir}>{d}</span>}</div>
            <div className="n" style={{ fontSize: String(n).length > 8 ? 19 : 30 }}>{n}</div>
            <div className="l">{l}</div>
          </div>
        ))}
      </div>

      {/* Mapa de calor real: pedidos por barrio × franja (90 días) */}
      <div className="card card-pad an-card">
        <div className="an-head">
          <div><div className="eyebrow-s">Mapa de calor</div><h3>Demanda por barrio y franja horaria · últimos 90 días</h3></div>
          <div className="an-legend"><span>Menos</span><span className="an-grad"></span><span>Más</span></div>
        </div>
        {a.zonas.length === 0 ? (
          <p className="muted" style={{ fontSize: 13 }}>Aún no hay pedidos con barrio identificado.</p>
        ) : (
          <div className="heat">
            <div className="heat-corner"></div>
            <div className="heat-cols">{AN_HOURS.map((hh) => <span key={hh}>{hh}</span>)}</div>
            {a.heat.map((row, r) => (
              <React.Fragment key={r}>
                <div className="heat-zone">{a.zonas[r]}</div>
                <div className="heat-row">
                  {row.map((n, c) => {
                    const t = n / a.heatMax;
                    return (
                      <span key={c} className="heat-cell"
                        onMouseEnter={() => setHcell(r + "-" + c)} onMouseLeave={() => setHcell(null)}
                        style={{ background: `rgba(var(--color-primary-rgb),${(0.05 + t * 0.92).toFixed(3)})`, color: t > .6 ? "#fff" : "transparent" }}>
                        {n}
                        {hcell === r + "-" + c && (
                          <div className="an-tip an-tip-cell">
                            <b>{n} pedido{n === 1 ? "" : "s"}</b><span>{a.zonas[r]} · {AN_HOURS[c]}</span>
                          </div>
                        )}
                      </span>
                    );
                  })}
                </div>
              </React.Fragment>
            ))}
          </div>
        )}
      </div>

      <div className="an-grid2">
        <div className="card card-pad an-card">
          <div className="an-head">
            <div><div className="eyebrow-s">Serie de tiempo</div><h3>Pedidos por día · últimos 14 días</h3></div>
            {a.deltaSem != null && (
              <span className={"pill " + (a.deltaSem >= 0 ? "pill-ok" : "pill-warn")}>
                <Icon name="chart" style={{ width: 12, height: 12 }} />{(a.deltaSem >= 0 ? "+" : "") + a.deltaSem}% vs. semana previa
              </span>
            )}
          </div>
          <div className="an-chart">
            {a.serie.some((v) => v > 0)
              ? <AnArea data={a.serie} labels={a.sLabels} />
              : <p className="muted" style={{ fontSize: 13, padding: 24 }}>Sin pedidos en los últimos 14 días.</p>}
          </div>
        </div>
        <div className="card card-pad an-card">
          <div className="an-head"><div><div className="eyebrow-s">Ranking</div><h3>Barrios con más pedidos</h3></div></div>
          <div className="an-rank">
            {a.ranking.length === 0 && <p className="muted" style={{ fontSize: 13 }}>Sin datos de barrios todavía.</p>}
            {a.ranking.map(([z, v], i) => (
              <div className="an-rank-row" key={z}>
                <span className="an-rank-n">{i + 1}</span>
                <div className="an-rank-body">
                  <div className="between" style={{ marginBottom: 6 }}><span className="an-rank-z">{z}</span><b>{v}</b></div>
                  <div className="an-rank-track"><div className="an-rank-fill" style={{ width: (v / a.ranking[0][1] * 100) + "%" }}></div></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="an-grid2">
        <div className="card card-pad an-card">
          <div className="an-head"><div><div className="eyebrow-s">Origen</div><h3>Marketplace vs. domicilios directos · 90 días</h3></div></div>
          {a.total > 0
            ? <AnOrigen mk={a.mkTotal} dir={a.dirTotal} />
            : <p className="muted" style={{ fontSize: 13, padding: 24 }}>Aún no hay pedidos para comparar el origen.</p>}
        </div>
        <div className="card card-pad an-card">
          <div className="an-head">
            <div><div className="eyebrow-s">Origen · serie</div><h3>Pedidos por día según origen · 14 días</h3></div>
            <div className="an-legend2">
              <span><i style={{ background: "var(--color-primary)" }}></i>Directos</span>
              <span><i style={{ background: "#5bbf73" }}></i>Marketplace</span>
            </div>
          </div>
          <div className="an-chart">
            {(a.serieMk.some((v) => v > 0) || a.serieDir.some((v) => v > 0))
              ? <AnLines s1={a.serieDir} s2={a.serieMk} labels={a.sLabels}
                  l1="Directos" l2="Marketplace" u1=" pedidos" u2=" pedidos" />
              : <p className="muted" style={{ fontSize: 13, padding: 24 }}>Sin pedidos en los últimos 14 días.</p>}
          </div>
        </div>
      </div>

      <div className="an-grid2">
        <div className="card card-pad an-card">
          <div className="an-head"><div><div className="eyebrow-s">Distribución</div><h3>Pedidos por hora del día</h3></div></div>
          {a.barras.some((v) => v > 0)
            ? <AnBars data={a.barras} labels={AN_HOURS} />
            : <p className="muted" style={{ fontSize: 13, padding: 24 }}>Sin pedidos en las franjas 10 a. m. – 9 p. m. todavía.</p>}
        </div>
        <div className="card card-pad an-card">
          <div className="an-head">
            <div><div className="eyebrow-s">Tendencias</div><h3>Entrega y calificación por día de semana</h3></div>
            <div className="an-legend2">
              <span><i style={{ background: "var(--color-primary)" }}></i>Entrega (min)</span>
              <span><i style={{ background: "#5bbf73" }}></i>Calificación (★)</span>
            </div>
          </div>
          <div className="an-chart">
            {a.tEntrega.some((v) => v != null)
              ? <AnLines s1={a.tEntrega.map((v) => v ?? 0)} s2={a.tCalif.map((v) => v ?? 0)} labels={AN_TDAYS}
                  l1="Entrega" l2="Calificación" u1=" min" u2=" ★" />
              : <p className="muted" style={{ fontSize: 13, padding: 24 }}>Aún no hay entregas suficientes para la tendencia.</p>}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- estado bloqueado (Gourmet Express) ---------------- */
const AN_LOCK_FEATS = [
  ["map", "Mapas de calor de demanda por barrio y hora"],
  ["chart", "Series de tiempo y tendencias de pedidos"],
  ["gauge", "Análisis de tiempos de llegada y puntualidad"],
  ["layers", "Ranking de barrios y franjas pico"],
];

function LockedAnalytics() {
  const [open, setOpen] = anState(false);
  return (
    <div className="fade-in">
      <div className="lock-wrap">
        <div className="lock-preview" aria-hidden="true"><AnalyticsBody /></div>
        <div className="lock-overlay">
          <div className="lock-card">
            <span className="lock-ico"><Icon name="lock" /></span>
            <div className="eyebrow-s" style={{ color: "var(--g2)" }}>Función Premium</div>
            <h2>Analítica avanzada bloqueada</h2>
            <p>Los mapas de calor, series de tiempo y tendencias están disponibles en los planes <b>Premium Partner</b> y <b>Elite Gastro</b>.</p>
            <div className="lock-feats">
              {AN_LOCK_FEATS.map(([ic, t]) => (
                <div className="lf" key={t}><span className="ck"><Icon name={ic} /></span>{t}</div>
              ))}
            </div>
            <button className="btn btn-primary" onClick={() => setOpen(true)}><Icon name="zap" />Desbloquear analítica</button>
            <div className="lock-plan">Tu plan actual: <b>{S.plan.name}</b></div>
          </div>
        </div>
      </div>
      {open && <UpgradeModal onClose={() => setOpen(false)} />}
    </div>
  );
}

function UpgradeModal({ onClose }) {
  const [sent, setSent] = anState(null);
  const PLANS = [
    { key: "premium", tag: "Más popular", info: PLAN_INFO.premium },
    { key: "elite", tag: "Todo incluido", info: PLAN_INFO.elite },
  ];
  return (
    <React.Fragment>
      <div className="drawer-bg" onClick={onClose}></div>
      <div className="an-modal">
        <button className="dx" onClick={onClose}>✕</button>
        {!sent ? (
          <React.Fragment>
            <div className="eyebrow-s" style={{ color: "var(--g2)" }}>Mejora tu plan</div>
            <h2 style={{ fontSize: 24, margin: "8px 0 6px" }}>Desbloquea la analítica avanzada</h2>
            <p className="muted" style={{ fontSize: 14, marginBottom: 22 }}>Elige el plan con el que quieres potenciar tu operación. Te contactamos para activarlo.</p>
            <div className="up-plans">
              {PLANS.map(({ key, tag, info }) => (
                <div className="up-plan" key={key} onClick={() => setSent(info.name)}>
                  <span className="pill pill-brand">{tag}</span>
                  <h3 style={{ fontSize: 20, marginTop: 12 }}>{info.name}</h3>
                  <div className="up-price"><b>{fmtCOP(info.price)}</b><span>/ mes</span></div>
                  <div className="up-feats">
                    {info.feats.slice(0, 3).map((f) => <div className="upf" key={f}><Icon name="check" style={{ width: 13, height: 13, color: "var(--g1)" }} />{f}</div>)}
                  </div>
                  <button className="btn btn-primary full"><Icon name="zap" />Elegir {info.name}</button>
                </div>
              ))}
            </div>
          </React.Fragment>
        ) : (
          <div className="up-done">
            <span className="up-check"><Icon name="check" /></span>
            <h2 style={{ fontSize: 23, margin: "16px 0 8px" }}>¡Solicitud enviada!</h2>
            <p className="muted" style={{ fontSize: 14.5, maxWidth: "34ch", margin: "0 auto" }}>Un asesor de Treego te contactará para activar <b style={{ color: "var(--ink)" }}>{sent}</b> y desbloquear tu analítica avanzada.</p>
            <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={onClose}>Entendido</button>
          </div>
        )}
      </div>
    </React.Fragment>
  );
}

function AnalyticsEmpty() {
  return (
    <div className="fade-in">
      <div className="card card-pad" style={{ textAlign: "center", padding: 64 }}>
        <div style={{ width: 60, height: 60, margin: "0 auto 18px", borderRadius: 16, background: "var(--grad)", display: "grid", placeItems: "center", color: "#fff" }}>
          <Icon name="chart" style={{ width: 28, height: 28 }} />
        </div>
        <h3 style={{ fontSize: 20, marginBottom: 8 }}>Aún no hay datos para analizar</h3>
        <p className="muted" style={{ maxWidth: "46ch", margin: "0 auto" }}>
          Cuando empieces a despachar domicilios verás aquí mapas de calor por barrio, franjas pico, tendencias de pedidos y tiempos de llegada de tu restaurante.
        </p>
      </div>
    </div>
  );
}

function AnaliticaAvanzada({ hasData }) {
  if (!S.plan.advanced) return <LockedAnalytics />;
  if (!hasData) return <AnalyticsEmpty />;
  return <div className="fade-in"><AnalyticsBody /></div>;
}

Object.assign(window, { AnaliticaAvanzada });