const { useState, useEffect, useCallback, useMemo } = React;

// ============ Helpers para exportar CSV ============
function downloadCSV(filename, headers, rows) {
  const escape = (v) => {
    const s = String(v ?? "");
    return s.includes(",") || s.includes('"') || s.includes("\n") ? `"${s.replace(/"/g, '""')}"` : s;
  };
  const lines = [headers.map(escape).join(",")];
  rows.forEach((r) => lines.push(r.map(escape).join(",")));
  const bom = "";
  const blob = new Blob([bom + lines.join("\n")], { type: "text/csv;charset=utf-8;" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// ============ Reports View ============
const ReportsView = ({ user, showToast }) => {
  const [data, setData] = useState(null);
  const [productDetail, setProductDetail] = useState(null);
  const [kitchen, setKitchen] = useState(null);
  const [kitchenArea, setKitchenArea] = useState("all"); // "all" | "cocina" | "bebidas"
  const [loading, setLoading] = useState(true);
  const [tab, setTab] = useState("resumen"); // "resumen" | "productos" | "cocina"
  const [stores, setStores] = useState([]);
  const [selectedStore, setSelectedStore] = useState(user.storeId || "all");
  const [selectedPlatform, setSelectedPlatform] = useState("all");
  const [dateFrom, setDateFrom] = useState(() => {
    const d = new Date(); d.setDate(d.getDate() - 7);
    return d.toISOString().slice(0, 10);
  });
  const [dateTo, setDateTo] = useState(() => new Date().toISOString().slice(0, 10));

  const isAdmin = user.role === "admin" || user.role === "gerente";

  // Cargar tiendas para el filtro
  useEffect(() => {
    if (!isAdmin) return;
    fetchWithAuth(`${API_BASE}/admin/stores`).then(async (res) => {
      if (res.ok) { const d = await res.json(); setStores(d.stores || []); }
    }).catch(() => {});
  }, [isAdmin]);

  const fetchReport = useCallback(async () => {
    setLoading(true);
    try {
      const storeParam = selectedStore && selectedStore !== "all" ? `&store_id=${selectedStore}` : (user.storeId ? `&store_id=${user.storeId}` : "");
      const platParam = selectedPlatform && selectedPlatform !== "all" ? `&platform=${selectedPlatform}` : "";
      const [resSummary, resDetail, resKitchen] = await Promise.all([
        fetchWithAuth(`${API_BASE}/reports/summary?from=${dateFrom}&to=${dateTo}${storeParam}${platParam}`),
        fetchWithAuth(`${API_BASE}/reports/products-detail?from=${dateFrom}&to=${dateTo}${storeParam}${platParam}`),
        fetchWithAuth(`${API_BASE}/reports/kitchen?from=${dateFrom}&to=${dateTo}${storeParam}${kitchenArea !== "all" ? `&area=${kitchenArea}` : ""}`),
      ]);
      if (resSummary.ok) setData(await resSummary.json());
      if (resDetail.ok) setProductDetail(await resDetail.json()); else setProductDetail(null);
      if (resKitchen.ok) setKitchen(await resKitchen.json()); else setKitchen(null);
    } catch {}
    setLoading(false);
  }, [dateFrom, dateTo, selectedStore, selectedPlatform, kitchenArea, user.storeId]);

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

  // Nombre de tienda seleccionada para el CSV
  const storeName = useMemo(() => {
    if (selectedStore === "all" || !selectedStore) return "Todas";
    const s = stores.find((st) => st.id === Number(selectedStore));
    return s ? s.name : `Tienda ${selectedStore}`;
  }, [selectedStore, stores]);

  const commission = { rappi: 0.25, uber_eats: 0.30, didi_food: 0.22 };

  // -- Funciones de descarga --
  const downloadFullReport = () => {
    if (!data) return;
    const t = data.totals || {};
    const headers = ["Seccion", "Concepto", "Valor"];
    const rows = [];

    // Resumen
    rows.push(["Resumen", "Periodo", `${dateFrom} a ${dateTo}`]);
    rows.push(["Resumen", "Sucursal", storeName]);
    rows.push(["Resumen", "Plataforma", selectedPlatform === "all" ? "Todas" : (PLATFORMS[selectedPlatform]?.label || selectedPlatform)]);
    rows.push(["Resumen", "Pedidos totales", t.total_orders || 0]);
    rows.push(["Resumen", "Ingresos totales", t.total_revenue || 0]);
    rows.push(["Resumen", "Ticket promedio", t.avg_ticket || 0]);
    rows.push(["Resumen", "Tiempo promedio (min)", Math.round(t.avg_time_min || 0)]);
    rows.push(["", "", ""]);

    // Por plataforma
    (data.byPlatform || []).forEach((p) => {
      const commRate = commission[p.platform] || 0.25;
      const commAmount = Number(p.revenue) * commRate;
      const net = Number(p.revenue) - commAmount;
      rows.push(["Por Plataforma", p.platform, ""]);
      rows.push(["", "Pedidos", p.total_orders]);
      rows.push(["", "Entregados", p.delivered]);
      rows.push(["", "Cancelados", p.cancelled]);
      rows.push(["", "Ingresos", Number(p.revenue).toFixed(2)]);
      rows.push(["", "Ticket promedio", Number(p.avg_ticket).toFixed(2)]);
      rows.push(["", `Comision (${Math.round(commRate*100)}%)`, commAmount.toFixed(2)]);
      rows.push(["", "Neto estimado", net.toFixed(2)]);
    });
    rows.push(["", "", ""]);

    // Por día
    (data.byDay || []).forEach((d) => {
      rows.push(["Por Dia", d.date, `${d.orders} pedidos, $${Number(d.revenue).toFixed(2)}`]);
    });
    rows.push(["", "", ""]);

    // Top productos
    (data.topProducts || []).forEach((p, i) => {
      rows.push(["Top Productos", `#${i+1} ${p.product_name}`, `${p.total_qty} unidades en ${p.in_orders} pedidos`]);
    });

    downloadCSV(`reporte_ventas_${dateFrom}_${dateTo}.csv`, headers, rows);
    showToast("Reporte descargado");
  };

  const downloadPlatformCSV = () => {
    if (!data?.byPlatform) return;
    const headers = ["Plataforma", "Pedidos", "Entregados", "Cancelados", "Ingresos", "Ticket Prom.", "Comision %", "Comision $", "Neto Est."];
    const rows = (data.byPlatform || []).map((p) => {
      const commRate = commission[p.platform] || 0.25;
      const commAmount = Number(p.revenue) * commRate;
      const net = Number(p.revenue) - commAmount;
      return [p.platform, p.total_orders, p.delivered, p.cancelled, Number(p.revenue).toFixed(2), Number(p.avg_ticket).toFixed(2), `${Math.round(commRate*100)}%`, commAmount.toFixed(2), net.toFixed(2)];
    });
    downloadCSV(`ventas_plataforma_${dateFrom}_${dateTo}.csv`, headers, rows);
    showToast("CSV descargado");
  };

  const downloadDailyCSV = () => {
    if (!data?.byDay) return;
    const headers = ["Fecha", "Pedidos", "Ingresos"];
    const rows = (data.byDay || []).map((d) => [d.date, d.orders, Number(d.revenue).toFixed(2)]);
    downloadCSV(`ventas_diarias_${dateFrom}_${dateTo}.csv`, headers, rows);
    showToast("CSV descargado");
  };

  const downloadTopProductsCSV = () => {
    if (!data?.topProducts) return;
    const headers = ["#", "Producto", "Cantidad", "En pedidos"];
    const rows = (data.topProducts || []).map((p, i) => [i+1, p.product_name, p.total_qty, p.in_orders]);
    downloadCSV(`top_productos_${dateFrom}_${dateTo}.csv`, headers, rows);
    showToast("CSV descargado");
  };

  // Formato de tiempo de preparación: segundos → "Xs" / "X.Y min"
  const fmtPrep = (sec) => {
    const s = Math.round(Number(sec) || 0);
    if (s <= 0) return "-";
    if (s < 60) return `${s}s`;
    return `${(s / 60).toFixed(1)} min`;
  };

  const downloadKitchenCSV = () => {
    if (!kitchen) return;
    const headers = ["Seccion", "Nombre", "Area", "Cantidad", "Tiempo prom."];
    const rows = [];
    (kitchen.byCook || []).forEach((c) => rows.push(["Colaborador", c.name || "—", "cocina:" + (c.cocina_items || 0) + " bebidas:" + (c.bebidas_items || 0), c.items, fmtPrep(c.avg_sec)]));
    (kitchen.byProduct || []).forEach((p) => rows.push(["Producto", p.name, p.area, p.items, fmtPrep(p.avg_sec)]));
    (kitchen.byCookProduct || []).forEach((cp) => rows.push(["Colaborador×Producto", `${cp.cook} → ${cp.product}`, cp.area, cp.items, fmtPrep(cp.avg_sec)]));
    downloadCSV(`reporte_cocina_${dateFrom}_${dateTo}.csv`, headers, rows);
    showToast("CSV descargado");
  };

  const downloadProductDetailCSV = () => {
    if (!productDetail?.categories?.length) return;
    const grand = productDetail.categories.reduce((s, c) => s + (c.totalRevenue || 0), 0) || 1;
    const headers = ["Categoria", "Producto", "Codigo", "Cantidad", "% Categoria", "Ingresos"];
    const rows = [];
    productDetail.categories.forEach((cat) => {
      cat.items.forEach((it) => {
        const pct = cat.totalQty > 0 ? (it.qty / cat.totalQty * 100).toFixed(1) : "0";
        rows.push([cat.category, it.name, it.code || "", it.qty, pct + "%", Number(it.revenue).toFixed(2)]);
      });
      const catPct = (cat.totalRevenue / grand * 100).toFixed(1);
      rows.push([cat.category, "TOTAL " + cat.category, "", cat.totalQty, catPct + "% del total", Number(cat.totalRevenue).toFixed(2)]);
    });
    downloadCSV(`productos_detalle_${dateFrom}_${dateTo}.csv`, headers, rows);
    showToast("CSV descargado");
  };

  if (loading || !data) {
    return (
      <div className="reports-wrap">
        <div className="reports-header"><h1><Icon name="barChart" size={20} /> Reportes de Ventas</h1></div>
        <div className="empty"><div className="empty-icon"><Icon name="refresh" size={26} /></div><div className="empty-text">Cargando...</div></div>
      </div>
    );
  }

  const t = data.totals || {};

  return (
    <div className="reports-wrap">
      <div className="reports-header">
        <h1><Icon name="barChart" size={20} /> Reportes de Ventas</h1>
        <div className="reports-filters-bar">
          {isAdmin && stores.length > 0 && (
            <select className="reports-select" value={selectedStore} onChange={(e) => setSelectedStore(e.target.value)}>
              <option value="all">Todas las sucursales</option>
              {stores.map((s) => <option key={s.id} value={s.id}>{s.name} ({s.code})</option>)}
            </select>
          )}
          <select className="reports-select" value={selectedPlatform} onChange={(e) => setSelectedPlatform(e.target.value)}>
            <option value="all">Todas las plataformas</option>
            {Object.keys(PLATFORMS).map((k) => <option key={k} value={k}>{PLATFORMS[k].label}</option>)}
          </select>
          <div className="reports-date-filter">
            <input type="date" value={dateFrom} onChange={(e) => setDateFrom(e.target.value)} />
            <span>a</span>
            <input type="date" value={dateTo} onChange={(e) => setDateTo(e.target.value)} />
          </div>
          <button className="btn btn-sm" onClick={fetchReport}><Icon name="refresh" size={14} /> Actualizar</button>
          <button className="btn btn-action btn-sm" onClick={downloadFullReport}><Icon name="download" size={14} /> Descargar</button>
        </div>
      </div>

      {/* Indicador de sucursal seleccionada */}
      {isAdmin && selectedStore !== "all" && selectedStore && (
        <div className="report-store-badge">
          <Icon name="store" size={13} />
          <span>Mostrando datos de: <strong>{storeName}</strong></span>
          <button className="icon-btn-sm" onClick={() => setSelectedStore("all")} title="Ver todas"><Icon name="x" size={12} /></button>
        </div>
      )}

      {/* Pestañas */}
      <div className="admin-tabs" style={{ marginBottom: 16 }}>
        <button className={`admin-tab ${tab === "resumen" ? "is-active" : ""}`} onClick={() => setTab("resumen")}>
          <Icon name="barChart" size={15} /> Resumen de Ventas
        </button>
        <button className={`admin-tab ${tab === "productos" ? "is-active" : ""}`} onClick={() => setTab("productos")}>
          <Icon name="list" size={15} /> Productos a Detalle
        </button>
        <button className={`admin-tab ${tab === "cocina" ? "is-active" : ""}`} onClick={() => setTab("cocina")}>
          <Icon name="chef" size={15} /> Cocina y Bebidas
        </button>
      </div>

      {tab === "resumen" && (<React.Fragment>
      {/* KPI Cards */}
      <div className="kpi-grid">
        <div className="kpi-card">
          <div className="kpi-icon" style={{ background: "#EEF2FF" }}><Icon name="layers" size={20} /></div>
          <div className="kpi-data">
            <div className="kpi-value">{t.total_orders || 0}</div>
            <div className="kpi-label">Pedidos totales</div>
          </div>
        </div>
        <div className="kpi-card">
          <div className="kpi-icon" style={{ background: "#F0FDF4" }}><Icon name="money" size={20} /></div>
          <div className="kpi-data">
            <div className="kpi-value">{fmtMoney(t.total_revenue)}</div>
            <div className="kpi-label">Ingresos totales</div>
          </div>
        </div>
        <div className="kpi-card">
          <div className="kpi-icon" style={{ background: "#FFF7ED" }}><Icon name="trendingUp" size={20} /></div>
          <div className="kpi-data">
            <div className="kpi-value">{fmtMoney(t.avg_ticket)}</div>
            <div className="kpi-label">Ticket promedio</div>
          </div>
        </div>
        <div className="kpi-card">
          <div className="kpi-icon" style={{ background: "#FEF2F2" }}><Icon name="timer" size={20} /></div>
          <div className="kpi-data">
            <div className="kpi-value">{Math.round(t.avg_time_min || 0)} min</div>
            <div className="kpi-label">Tiempo promedio</div>
          </div>
        </div>
      </div>

      {/* By Platform Table */}
      <div className="report-section">
        <div className="report-section-head">
          <h2>Ventas por Plataforma</h2>
          <button className="btn-icon-text" onClick={downloadPlatformCSV} title="Descargar CSV"><Icon name="download" size={13} /> CSV</button>
        </div>
        <div className="admin-table">
          <div className="admin-table-head">
            <div>Plataforma</div>
            <div>Pedidos</div>
            <div>Entregados</div>
            <div>Cancelados</div>
            <div>Ingresos</div>
            <div>Ticket Prom.</div>
            <div>Comision Est.</div>
            <div>Neto Est.</div>
          </div>
          {(data.byPlatform || []).map((p) => {
            const plat = PLATFORMS[p.platform] || { label: p.platform, color: "#666" };
            const commRate = commission[p.platform] || 0.25;
            const commAmount = Number(p.revenue) * commRate;
            const net = Number(p.revenue) - commAmount;
            return (
              <div key={p.platform} className="admin-table-row">
                <div><span className="platform-chip-sm" style={{ "--p-color": plat.color }}><span className="pdot" /> {plat.label}</span></div>
                <div className="mono">{p.total_orders}</div>
                <div className="mono" style={{ color: "#16a34a" }}>{p.delivered}</div>
                <div className="mono" style={{ color: "#dc2626" }}>{p.cancelled}</div>
                <div className="mono" style={{ fontWeight: 600 }}>{fmtMoney(p.revenue)}</div>
                <div className="mono">{fmtMoney(p.avg_ticket)}</div>
                <div className="mono" style={{ color: "#dc2626" }}>-{fmtMoney(commAmount)} ({Math.round(commRate*100)}%)</div>
                <div className="mono" style={{ fontWeight: 600, color: "#16a34a" }}>{fmtMoney(net)}</div>
              </div>
            );
          })}
          {(!data.byPlatform || data.byPlatform.length === 0) && (
            <div className="admin-table-row"><div style={{ gridColumn: "1/-1", textAlign: "center", color: "var(--text-3)" }}>Sin datos en el periodo seleccionado</div></div>
          )}
        </div>
      </div>

      {/* Two column: Daily chart + Top Products */}
      <div className="report-two-col">
        <div className="report-section">
          <div className="report-section-head">
            <h2>Ventas por Dia</h2>
            <button className="btn-icon-text" onClick={downloadDailyCSV} title="Descargar CSV"><Icon name="download" size={13} /> CSV</button>
          </div>
          <div className="daily-chart">
            {(data.byDay || []).map((d) => {
              const maxRev = Math.max(...(data.byDay || []).map((x) => Number(x.revenue)), 1);
              const pct = (Number(d.revenue) / maxRev) * 100;
              const rawDate = typeof d.date === "string" && d.date.includes("T") ? d.date : d.date + "T12:00:00";
              const dateLabel = new Date(rawDate).toLocaleDateString("es-MX", { day: "numeric", month: "short" });
              return (
                <div key={d.date} className="daily-bar-row" title={`${dateLabel}: ${d.orders} pedidos, ${fmtMoney(d.revenue)}`}>
                  <span className="daily-label">{dateLabel}</span>
                  <div className="daily-bar-track">
                    <div className="daily-bar" style={{ width: `${pct}%` }}></div>
                  </div>
                  <span className="daily-value">{fmtMoney(d.revenue)}</span>
                  <span className="daily-count">{d.orders}p</span>
                </div>
              );
            })}
            {(!data.byDay || data.byDay.length === 0) && <div className="muted" style={{ padding: 20, textAlign: "center" }}>Sin datos</div>}
          </div>
        </div>

        <div className="report-section">
          <div className="report-section-head">
            <h2>Top 10 Productos</h2>
            <button className="btn-icon-text" onClick={downloadTopProductsCSV} title="Descargar CSV"><Icon name="download" size={13} /> CSV</button>
          </div>
          <div className="top-products">
            {(data.topProducts || []).map((p, i) => (
              <div key={i} className="top-product-row">
                <span className="top-rank">{i + 1}</span>
                <span className="top-name">{p.product_name}</span>
                <span className="top-qty mono">{p.total_qty}x</span>
                <span className="top-orders muted">en {p.in_orders} pedidos</span>
              </div>
            ))}
            {(!data.topProducts || data.topProducts.length === 0) && <div className="muted" style={{ padding: 20, textAlign: "center" }}>Sin datos</div>}
          </div>
        </div>
      </div>
      </React.Fragment>)}

      {tab === "productos" && (
      <div className="report-section">
        <div className="report-section-head">
          <h2>Productos a Detalle (por categoría)</h2>
          <button className="btn-icon-text" onClick={downloadProductDetailCSV} title="Descargar CSV" disabled={!productDetail?.categories?.length}><Icon name="download" size={13} /> CSV</button>
        </div>
        {(!productDetail || !productDetail.categories || productDetail.categories.length === 0) ? (
          <div className="muted" style={{ padding: 20, textAlign: "center" }}>Sin datos en el periodo</div>
        ) : (() => {
          const grandRevenue = productDetail.categories.reduce((s, c) => s + (c.totalRevenue || 0), 0) || 1;
          const PALETTE = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#0ea5e9", "#8b5cf6", "#ec4899", "#14b8a6", "#f97316", "#64748b"];
          return (
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="muted" style={{ fontSize: 12 }}>Cada barra muestra cuánto representa el producto dentro de su categoría (por unidades). La barra del encabezado es el % de la categoría sobre el ingreso total.</div>
            {productDetail.categories.map((cat, catIdx) => {
              const catPct = (cat.totalRevenue / grandRevenue) * 100;
              const color = PALETTE[catIdx % PALETTE.length];
              const maxQty = Math.max.apply(null, cat.items.map((x) => x.qty).concat([1]));
              return (
              <div key={cat.category} style={{ border: "1px solid var(--border)", borderRadius: 10, overflow: "hidden", background: "var(--surface)" }}>
                {/* Encabezado de categoría con barra de participación */}
                <div style={{ padding: "11px 14px", borderBottom: "1px solid var(--border)", borderLeft: `3px solid ${color}` }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                    <span style={{ display: "flex", alignItems: "center", gap: 8, fontWeight: 700, fontSize: 14 }}>
                      <span style={{ width: 9, height: 9, borderRadius: 3, background: color }} />
                      {cat.category}
                    </span>
                    <span className="muted" style={{ fontWeight: 600, fontSize: 12 }}>{cat.totalQty} uds · {fmtMoney(cat.totalRevenue)} · <strong style={{ color }}>{catPct.toFixed(1)}%</strong> del total</span>
                  </div>
                  <div style={{ marginTop: 9, height: 5, background: "var(--surface-2)", borderRadius: 3, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: `${Math.min(catPct, 100)}%`, background: color, borderRadius: 3, transition: "width 450ms ease" }} />
                  </div>
                </div>
                {/* Encabezado de columnas */}
                <div style={{ display: "grid", gridTemplateColumns: "26px minmax(140px, 1.4fr) auto 52px minmax(90px, 1fr) 96px", gap: 10, padding: "7px 14px", borderBottom: "1px solid var(--border)", background: "var(--surface-2)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-3)" }}>
                  <span>#</span>
                  <span>Producto</span>
                  <span>Código</span>
                  <span style={{ textAlign: "right" }}>Cant.</span>
                  <span>% Categoría</span>
                  <span style={{ textAlign: "right" }}>Venta</span>
                </div>
                {/* Productos con barra de participación dentro de la categoría */}
                <div style={{ maxHeight: 320, overflowY: "auto" }}>
                {cat.items.map((it, i) => {
                  const itemPct = cat.totalQty > 0 ? (it.qty / cat.totalQty) * 100 : 0;
                  const barW = (it.qty / maxQty) * 100;
                  return (
                  <div key={i} className="pd-row" style={{ display: "grid", gridTemplateColumns: "26px minmax(140px, 1.4fr) auto 52px minmax(90px, 1fr) 96px", gap: 10, padding: "9px 14px", borderTop: i ? "1px solid var(--border)" : "none", fontSize: 13, alignItems: "center" }}>
                    <span className="mono" style={{ color: "var(--text-3)", fontSize: 12, fontWeight: 700 }}>{i + 1}</span>
                    <span style={{ fontWeight: 500 }}>{it.name}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, padding: "2px 7px", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 5, color: "var(--text-2)", justifySelf: "start", whiteSpace: "nowrap" }}>{it.code || "—"}</span>
                    <span className="mono" style={{ textAlign: "right", fontWeight: 700 }}>{it.qty}<span className="muted" style={{ fontWeight: 400 }}>x</span></span>
                    <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ flex: 1, height: 6, background: "var(--surface-2)", borderRadius: 4, overflow: "hidden" }}>
                        <span style={{ display: "block", height: "100%", width: `${barW}%`, background: color, opacity: 0.85, borderRadius: 4, transition: "width 450ms ease" }} />
                      </span>
                      <span className="mono muted" style={{ fontSize: 11, width: 30, textAlign: "right" }}>{itemPct.toFixed(0)}%</span>
                    </span>
                    <span className="mono" style={{ textAlign: "right", fontWeight: 600 }}>{fmtMoney(it.revenue)}</span>
                  </div>
                  );
                })}
                </div>
              </div>
              );
            })}
          </div>
          );
        })()}
      </div>
      )}

      {tab === "cocina" && (() => {
        const cardStyle = { border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden", background: "var(--surface)" };
        const headStyle = { padding: "10px 14px", background: "var(--surface-2)", fontWeight: 700, fontSize: 13, borderBottom: "1px solid var(--border)" };
        const bodyStyle = { maxHeight: 360, overflowY: "auto" };
        const rowBase = { padding: "8px 14px", borderBottom: "1px solid var(--border)", fontSize: 13, alignItems: "center" };
        const thStyle = { padding: "8px 14px", background: "var(--surface)", borderBottom: "1px solid var(--border)", fontSize: 11, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.04em", position: "sticky", top: 0, zIndex: 1 };
        const k = kitchen;
        const hasData = k && k.summary && k.summary.total_items;
        return (
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}>
            <h2 style={{ margin: 0, fontSize: 16 }}>Preparación: Cocina y Bebidas</h2>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ display: "flex", gap: 4, background: "var(--surface-2)", padding: 3, borderRadius: 8 }}>
                {[["all", "Todas"], ["cocina", "Cocina"], ["bebidas", "Bebidas"]].map(([v, lbl]) => (
                  <button key={v} className="btn btn-sm" style={kitchenArea === v ? { background: "var(--accent)", color: "#fff", borderColor: "var(--accent)" } : { background: "transparent", border: "none" }} onClick={() => setKitchenArea(v)}>{lbl}</button>
                ))}
              </div>
              <button className="btn-icon-text" onClick={downloadKitchenCSV} disabled={!hasData} title="Descargar CSV"><Icon name="download" size={13} /> CSV</button>
            </div>
          </div>

          {!hasData ? (
            <div className="muted" style={{ padding: 30, textAlign: "center", ...cardStyle }}>
              Aún no hay datos de preparación en el periodo{kitchenArea !== "all" ? ` (área ${kitchenArea})` : ""}.<br />
              Se registran automáticamente cuando los colaboradores marcan los productos como listos en el KDS.
            </div>
          ) : (
          <React.Fragment>
            {/* KPIs */}
            <div className="kpi-grid">
              <div className="kpi-card"><div className="kpi-icon" style={{ background: "#EEF2FF" }}><Icon name="bag" size={20} /></div>
                <div className="kpi-data"><div className="kpi-value">{k.summary.total_items}</div><div className="kpi-label">Productos preparados</div></div></div>
              <div className="kpi-card"><div className="kpi-icon" style={{ background: "#FEF3C7" }}><Icon name="timer" size={20} /></div>
                <div className="kpi-data"><div className="kpi-value">{fmtPrep(k.summary.avg_sec)}</div><div className="kpi-label">Tiempo promedio</div></div></div>
              <div className="kpi-card"><div className="kpi-icon" style={{ background: "#FFE4E6" }}><Icon name="chef" size={20} /></div>
                <div className="kpi-data"><div className="kpi-value">{k.summary.cocina_items || 0}</div><div className="kpi-label">Cocina · {fmtPrep(k.summary.cocina_avg_sec)}</div></div></div>
              <div className="kpi-card"><div className="kpi-icon" style={{ background: "#E0F2FE" }}><Icon name="coffee" size={20} /></div>
                <div className="kpi-data"><div className="kpi-value">{k.summary.bebidas_items || 0}</div><div className="kpi-label">Bebidas · {fmtPrep(k.summary.bebidas_avg_sec)}</div></div></div>
            </div>

            {/* Ranking de colaboradores */}
            <div style={cardStyle}>
              <div style={headStyle}>Colaboradores (quién prepara más)</div>
              <div style={bodyStyle}>
                <div style={{ ...thStyle, display: "grid", gridTemplateColumns: "40px 1fr 80px 100px 80px 80px", gap: 8 }}>
                  <span>#</span><span>Colaborador</span><span style={{ textAlign: "right" }}>Total</span><span style={{ textAlign: "right" }}>T.prom</span><span style={{ textAlign: "right" }}>Cocina</span><span style={{ textAlign: "right" }}>Bebidas</span>
                </div>
                {(k.byCook || []).map((c, i) => (
                  <div key={c.cook_id || i} style={{ ...rowBase, display: "grid", gridTemplateColumns: "40px 1fr 80px 100px 80px 80px", gap: 8 }}>
                    <span className="mono" style={{ fontWeight: 700 }}>{i + 1}</span>
                    <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 24, height: 24, flexShrink: 0, borderRadius: "50%", background: c.color || "#2a4fb8", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700 }}>{c.initials || "?"}</span>
                      <span style={{ fontWeight: 500 }}>{c.name || "—"}</span>
                    </span>
                    <span className="mono" style={{ textAlign: "right", fontWeight: 600 }}>{c.items}</span>
                    <span className="mono" style={{ textAlign: "right" }}>{fmtPrep(c.avg_sec)}</span>
                    <span className="mono muted" style={{ textAlign: "right" }}>{c.cocina_items || 0}</span>
                    <span className="mono muted" style={{ textAlign: "right" }}>{c.bebidas_items || 0}</span>
                  </div>
                ))}
                {(!k.byCook || k.byCook.length === 0) && <div className="muted" style={{ padding: 16, textAlign: "center" }}>Sin colaboradores registrados</div>}
              </div>
            </div>

            {/* Por producto (tiempos) */}
            <div style={cardStyle}>
              <div style={headStyle}>Por producto (tiempo de preparación)</div>
              <div style={bodyStyle}>
                <div style={{ ...thStyle, display: "grid", gridTemplateColumns: "1fr 100px 80px 100px", gap: 8 }}>
                  <span>Producto</span><span>Área</span><span style={{ textAlign: "right" }}>Cantidad</span><span style={{ textAlign: "right" }}>T.prom</span>
                </div>
                {(k.byProduct || []).map((p, i) => (
                  <div key={i} style={{ ...rowBase, display: "grid", gridTemplateColumns: "1fr 100px 80px 100px", gap: 8 }}>
                    <span style={{ fontWeight: 500 }}>{p.name}</span>
                    <span className="muted" style={{ fontSize: 12 }}>{p.area === "bebidas" ? "🥤 Bebidas" : "🍳 Cocina"}</span>
                    <span className="mono" style={{ textAlign: "right", fontWeight: 600 }}>{p.items}</span>
                    <span className="mono" style={{ textAlign: "right" }}>{fmtPrep(p.avg_sec)}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Detalle cocinero × producto */}
            <div style={cardStyle}>
              <div style={headStyle}>Detalle: qué prepara cada colaborador</div>
              <div style={bodyStyle}>
                <div style={{ ...thStyle, display: "grid", gridTemplateColumns: "1fr 1fr 90px 80px 100px", gap: 8 }}>
                  <span>Colaborador</span><span>Producto</span><span>Área</span><span style={{ textAlign: "right" }}>Cantidad</span><span style={{ textAlign: "right" }}>T.prom</span>
                </div>
                {(k.byCookProduct || []).map((cp, i) => (
                  <div key={i} style={{ ...rowBase, display: "grid", gridTemplateColumns: "1fr 1fr 90px 80px 100px", gap: 8 }}>
                    <span style={{ fontWeight: 500 }}>{cp.cook || "—"}</span>
                    <span>{cp.product}</span>
                    <span className="muted" style={{ fontSize: 12 }}>{cp.area}</span>
                    <span className="mono" style={{ textAlign: "right", fontWeight: 600 }}>{cp.items}</span>
                    <span className="mono" style={{ textAlign: "right" }}>{fmtPrep(cp.avg_sec)}</span>
                  </div>
                ))}
              </div>
            </div>
          </React.Fragment>
          )}
        </div>
        );
      })()}
    </div>
  );
};

// ============ Order History View ============
// Modal de detalle de un pedido del historial (solo lectura)
const OrderDetailModal = ({ data, onClose }) => {
  const [rawJson, setRawJson] = useState(null);
  const [loadingJson, setLoadingJson] = useState(false);
  const [showJson, setShowJson] = useState(false);

  useEffect(() => {
    if (!data) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [data, onClose]);

  // Reiniciar el JSON al cambiar de pedido
  useEffect(() => { setRawJson(null); setShowJson(false); }, [data && data.order && data.order.id]);

  if (!data) return null;
  const { order: o, raw } = data;

  const PAY_LABEL = { card: "Tarjeta", cash: "Efectivo", online: "En línea", other: "Otro" };
  const payMethod = raw.payment?.method ? (PAY_LABEL[raw.payment.method] || raw.payment.method) : "—";

  const toggleJson = async () => {
    if (showJson) { setShowJson(false); return; }
    if (rawJson) { setShowJson(true); return; }
    setLoadingJson(true);
    try {
      const res = await fetchWithAuth(`${API_BASE}/history/${o.id}/platform-payload`);
      const d = await res.json().catch(() => ({}));
      setRawJson(res.ok ? (d.platform_raw_payload || { aviso: "Sin JSON original guardado para este pedido" }) : { error: d.error || "No se pudo obtener" });
      setShowJson(true);
    } catch (e) {
      setRawJson({ error: "Error de conexión" });
      setShowJson(true);
    }
    setLoadingJson(false);
  };
  const plat = PLATFORMS[o.platform] || { label: o.platform, color: "#666" };
  const items = raw.items || [];
  const cust = raw.customer || {};
  const addr = cust.deliveryAddress || {};
  const created = new Date(o.created_at);
  const money = (n) => fmtMoney(n || 0);

  const Row = ({ label, value, strong }) => (
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "2px 0", fontWeight: strong ? 700 : 400 }}>
      <span className={strong ? "" : "muted"}>{label}</span>
      <span className="mono">{value}</span>
    </div>
  );

  return (
    <div className="adm-modal-backdrop" style={{ zIndex: 80 }} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="confirm-modal" style={{ maxWidth: 560, textAlign: "left", maxHeight: "85vh", overflowY: "auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12 }}>
          <div>
            <h3 style={{ margin: 0 }}>Pedido #{o.pos_cm_num_doc || o.id}</h3>
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 6 }}>
              <span className="platform-chip-sm" style={{ "--p-color": plat.color }}><span className="pdot" /> {plat.label}</span>
              <span className="muted" style={{ fontSize: 12 }}>{created.toLocaleString("es-MX", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" })}</span>
              <span className="status-badge" style={{ "--s-color": "#666" }}>{o.status}</span>
            </div>
          </div>
          <button className="icon-btn-sm" onClick={onClose} title="Cerrar"><Icon name="x" size={16} /></button>
        </div>

        {/* Cliente */}
        <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, padding: "10px 12px", marginBottom: 12 }}>
          <div style={{ fontWeight: 600, fontSize: 13 }}><Icon name="user" size={13} /> {cust.name || "Cliente"}</div>
          {cust.phone && <div className="muted" style={{ fontSize: 12 }}><Icon name="phone" size={12} /> {cust.phone}</div>}
          {addr.street && <div className="muted" style={{ fontSize: 12 }}><Icon name="pin" size={12} /> {addr.street}</div>}
          {addr.references && <div className="muted" style={{ fontSize: 12 }}>Ref: {addr.references}</div>}
          <div className="muted" style={{ fontSize: 12, marginTop: 4, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <span><Icon name="card" size={12} /> Pago: <strong>{payMethod}</strong></span>
            {o.pos_cm_num_doc && <span><Icon name="bag" size={12} /> Comanda POS: <strong className="mono">#{o.pos_cm_num_doc}</strong></span>}
          </div>
        </div>

        {raw.notes && (
          <div style={{ background: "color-mix(in oklab, #f59e0b 10%, var(--surface))", border: "1px solid color-mix(in oklab, #f59e0b 30%, var(--border))", borderRadius: 8, padding: "8px 12px", marginBottom: 12, fontSize: 13 }}>
            <Icon name="note" size={13} /> <strong>Nota:</strong> {raw.notes}
          </div>
        )}

        {/* Items */}
        <div style={{ fontWeight: 600, fontSize: 13, margin: "0 0 8px" }}>Productos ({items.length})</div>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
          {items.map((it, idx) => (
            <li key={idx} style={{ border: "1px solid var(--border)", borderRadius: 8, padding: "8px 11px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                <span style={{ fontWeight: 600, fontSize: 13 }}><span className="mono">{it.quantity || 1}×</span> {it.name}</span>
                <span className="mono" style={{ fontSize: 13 }}>{money(it.unitPrice)}</span>
              </div>
              {it.posCode && <div className="muted" style={{ fontSize: 11 }}>Código: <span className="mono">{it.posCode}</span></div>}
              {(it.modifiers || []).map((m, mi) => (
                <div key={mi} className="muted" style={{ fontSize: 12, paddingLeft: 12 }}>
                  + {m.name}{m.quantity > 1 ? ` x${m.quantity}` : ""}{m.price > 0 ? ` (${money(m.price)})` : ""}
                  {m.posCode ? <span className="mono"> · {m.posCode}</span> : ""}
                </div>
              ))}
              {it.notes && <div className="muted" style={{ fontSize: 12, paddingLeft: 12, fontStyle: "italic" }}>“{it.notes}”</div>}
            </li>
          ))}
        </ul>

        {/* Totales */}
        <div style={{ marginTop: 14, borderTop: "1px solid var(--border)", paddingTop: 10 }}>
          <Row label="Subtotal" value={money(raw.subtotal)} />
          <Row label="IVA" value={money(raw.tax)} />
          {raw.deliveryFee > 0 && <Row label="Envío" value={money(raw.deliveryFee)} />}
          {raw.tip > 0 && <Row label="Propina" value={money(raw.tip)} />}
          {raw.discount > 0 && <Row label="Descuento" value={`- ${money(raw.discount)}`} />}
          <Row label="Total" value={money(raw.total)} strong />
        </div>

        <div className="muted" style={{ fontSize: 11, marginTop: 10 }}>ID externo: <span className="mono">{o.external_id}</span></div>

        {/* JSON original de la plataforma (bajo demanda) */}
        <div style={{ marginTop: 12, borderTop: "1px solid var(--border)", paddingTop: 10 }}>
          <button className="btn btn-sm" onClick={toggleJson} disabled={loadingJson}>
            <Icon name={loadingJson ? "refresh" : "list"} size={13} /> {loadingJson ? "Cargando..." : (showJson ? "Ocultar JSON original" : "Ver JSON original de la plataforma")}
          </button>
          {showJson && rawJson && (
            <pre style={{ marginTop: 10, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, padding: 12, fontSize: 11, lineHeight: 1.5, maxHeight: 320, overflow: "auto", whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
              {JSON.stringify(rawJson, null, 2)}
            </pre>
          )}
        </div>
      </div>
    </div>
  );
};

const OrderHistoryView = ({ user, showToast }) => {
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);
  const [stores, setStores] = useState([]);
  const [selectedStore, setSelectedStore] = useState(user.storeId || "all");
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [total, setTotal] = useState(0);
  const [detail, setDetail] = useState(null); // { order, raw } para el modal de detalle
  const [filters, setFilters] = useState({
    search: "",
    platform: "all",
    status: "all",
    from: "",
    to: "",
  });

  const isAdmin = user.role === "admin" || user.role === "gerente";

  useEffect(() => {
    if (!isAdmin) return;
    fetchWithAuth(`${API_BASE}/admin/stores`).then(async (res) => {
      if (res.ok) { const d = await res.json(); setStores(d.stores || []); }
    }).catch(() => {});
  }, [isAdmin]);

  const fetchHistory = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set("page", String(page));
      params.set("limit", "20");
      const storeId = selectedStore && selectedStore !== "all" ? selectedStore : user.storeId;
      if (storeId) params.set("store_id", storeId);
      if (filters.search) params.set("search", filters.search);
      if (filters.platform !== "all") params.set("platform", filters.platform);
      if (filters.status !== "all") params.set("status", filters.status);
      if (filters.from) params.set("from", filters.from);
      if (filters.to) params.set("to", filters.to);

      const res = await fetchWithAuth(`${API_BASE}/history?${params.toString()}`);
      if (res.ok) {
        const data = await res.json();
        setOrders(data.orders || []);
        setTotalPages(data.pagination?.totalPages || 1);
        setTotal(data.pagination?.total || 0);
      }
    } catch {}
    setLoading(false);
  }, [page, filters, selectedStore, user.storeId]);

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

  const updateFilter = (key, val) => {
    setFilters((prev) => ({ ...prev, [key]: val }));
    setPage(1);
  };

  const downloadHistoryCSV = () => {
    if (!orders.length) return;
    const headers = ["#", "Cliente", "Plataforma", "Total", "Fecha", "Estado", "Tiempo (min)"];
    const rows = orders.map((o) => {
      const raw = typeof o.raw_payload === "string" ? JSON.parse(o.raw_payload || "{}") : (o.raw_payload || {});
      const customer = raw.customer?.name || "Cliente";
      const totalAmt = raw.total || 0;
      const created = new Date(o.created_at);
      const dateStr = created.toLocaleDateString("es-MX", { day: "numeric", month: "short", year: "numeric" });
      const elapsed = o.updated_at ? Math.round((new Date(o.updated_at) - created) / 60000) : 0;
      return [o.pos_cm_num_doc || o.id, customer, o.platform, totalAmt, dateStr, o.status, elapsed > 0 ? elapsed : "-"];
    });
    downloadCSV(`historial_pedidos_pag${page}.csv`, headers, rows);
    showToast("CSV descargado");
  };

  const statusOptions = [
    { value: "all", label: "Todos" },
    { value: "received", label: "Recibido" },
    { value: "accepted", label: "Aceptado" },
    { value: "preparing", label: "Preparando" },
    { value: "ready", label: "Listo" },
    { value: "picked_up", label: "En camino" },
    { value: "delivered", label: "Entregado" },
    { value: "cancelled", label: "Cancelado" },
  ];

  const statusColor = {
    received: "#3b82f6", accepted: "#8b5cf6", preparing: "#f59e0b",
    ready: "#10b981", picked_up: "#0ea5e9", delivered: "#16a34a", cancelled: "#dc2626",
  };

  return (
    <div className="history-wrap">
      <div className="history-header">
        <h1><Icon name="history" size={20} /> Historial de Pedidos</h1>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span className="muted">{total} pedidos</span>
          <button className="btn btn-sm" onClick={downloadHistoryCSV} disabled={!orders.length}>
            <Icon name="download" size={13} /> CSV
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="history-filters">
        <div className="filter-group">
          <Icon name="search" size={14} />
          <input
            type="text"
            placeholder="Buscar por ID, POS doc, cliente..."
            value={filters.search}
            onChange={(e) => updateFilter("search", e.target.value)}
          />
        </div>
        {isAdmin && stores.length > 0 && (
          <select value={selectedStore} onChange={(e) => { setSelectedStore(e.target.value); setPage(1); }}>
            <option value="all">Todas las sucursales</option>
            {stores.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        )}
        <select value={filters.platform} onChange={(e) => updateFilter("platform", e.target.value)}>
          <option value="all">Todas las plataformas</option>
          <option value="rappi">Rappi</option>
          <option value="uber_eats">Uber Eats</option>
          <option value="didi_food">DiDi Food</option>
        </select>
        <select value={filters.status} onChange={(e) => updateFilter("status", e.target.value)}>
          {statusOptions.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}
        </select>
        <input type="date" value={filters.from} onChange={(e) => updateFilter("from", e.target.value)} />
        <input type="date" value={filters.to} onChange={(e) => updateFilter("to", e.target.value)} />
      </div>

      {/* Table */}
      {loading ? (
        <div className="empty"><div className="empty-icon"><Icon name="refresh" size={26} /></div><div className="empty-text">Cargando...</div></div>
      ) : (
        <div className="history-table">
          <div className="admin-table">
            <div className="admin-table-head" style={{ gridTemplateColumns: "80px 1fr 100px 100px 140px 100px 90px 60px" }}>
              <div>#</div>
              <div>Cliente</div>
              <div>Plataforma</div>
              <div>Total</div>
              <div>Fecha</div>
              <div>Estado</div>
              <div>Tiempo</div>
              <div>Ver</div>
            </div>
            {orders.map((o) => {
              const raw = typeof o.raw_payload === "string" ? JSON.parse(o.raw_payload || "{}") : (o.raw_payload || {});
              const customer = raw.customer?.name || "Cliente";
              const totalAmt = raw.total || 0;
              const plat = PLATFORMS[o.platform] || { label: o.platform, color: "#666" };
              const created = new Date(o.created_at);
              const dateStr = created.toLocaleDateString("es-MX", { day: "numeric", month: "short", year: "numeric" });
              const timeStr = created.toLocaleTimeString("es-MX", { hour: "2-digit", minute: "2-digit" });
              const elapsed = o.updated_at ? Math.round((new Date(o.updated_at) - created) / 60000) : 0;
              const sColor = statusColor[o.status] || "#666";

              return (
                <div key={o.id} className="admin-table-row" style={{ gridTemplateColumns: "80px 1fr 100px 100px 140px 100px 90px 60px", cursor: "pointer" }}
                  onClick={() => setDetail({ order: o, raw })} title="Ver detalle del pedido">
                  <div className="mono">#{o.pos_cm_num_doc || o.id}</div>
                  <div style={{ fontWeight: 500 }}>{customer}</div>
                  <div><span className="platform-chip-sm" style={{ "--p-color": plat.color }}><span className="pdot" /> {plat.label}</span></div>
                  <div className="mono" style={{ fontWeight: 600 }}>{fmtMoney(totalAmt)}</div>
                  <div style={{ fontSize: 12 }}><div>{dateStr}</div><div className="muted">{timeStr}</div></div>
                  <div><span className="status-badge" style={{ "--s-color": sColor }}>{o.status}</span></div>
                  <div className="mono muted">{elapsed > 0 ? fmtTime(elapsed) : "-"}</div>
                  <div style={{ textAlign: "center" }}><Icon name="eye" size={15} /></div>
                </div>
              );
            })}
            {orders.length === 0 && (
              <div className="admin-table-row"><div style={{ gridColumn: "1/-1", textAlign: "center", padding: 40, color: "var(--text-3)" }}>No se encontraron pedidos con los filtros seleccionados</div></div>
            )}
          </div>

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="pagination">
              <button disabled={page <= 1} onClick={() => setPage(page - 1)}>&larr; Anterior</button>
              <span className="muted">Pagina {page} de {totalPages}</span>
              <button disabled={page >= totalPages} onClick={() => setPage(page + 1)}>Siguiente &rarr;</button>
            </div>
          )}
        </div>
      )}

      <OrderDetailModal data={detail} onClose={() => setDetail(null)} />
    </div>
  );
};

Object.assign(window, { ReportsView, OrderHistoryView });