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

// ============ Sidebar ============
const Sidebar = ({ active, onChange, user, onLogout, badges = {} }) => {
  const allItems = [
    { id: "orders",      icon: "layers",    label: "Pedidos" },
    { id: "kds",         icon: "chef",      label: "KDS" },
    { id: "history",     icon: "history",   label: "Historial" },
    { id: "reports",     icon: "barChart",  label: "Reportes" },
    { id: "menu",        icon: "menu",      label: "Menu" },
    { id: "storeconfig", icon: "printer",   label: "Config" },
    { id: "admin",       icon: "shield",    label: "Admin" },
  ];

  const allowed = SIDEBAR_BY_ROLE[user?.role] || ["orders"];
  const items = allItems.filter((it) => allowed.includes(it.id));

  return (
    <aside className="sidebar">
      <div className="sidebar-logo" title="MyM's Pizza">M</div>
      <div className="sidebar-nav">
        {items.map((it) => {
          const badge = badges[it.id] || 0;
          return (
            <button
              key={it.id}
              className={`nav-item ${active === it.id ? "is-active" : ""}`}
              title={badge > 0 ? `${it.label} (${badge} nuevo${badge > 1 ? "s" : ""})` : it.label}
              onClick={() => onChange(it.id)}
            >
              <Icon name={it.icon} size={20} />
              {badge > 0 && <span className="nav-badge">{badge > 99 ? "99+" : badge}</span>}
            </button>
          );
        })}
      </div>
      <div className="sidebar-nav" style={{ flex: 0 }}>
        <button className="nav-item" title="Cerrar sesion" onClick={onLogout}>
          <Icon name="logout" size={20} />
        </button>
      </div>
    </aside>
  );
};

// ============ Header ============
const Header = ({ platform, setPlatform, counts, theme, setTheme, layout, setLayout, user }) => {
  const [now, setNow] = useState(new Date());
  const [soundOn, setSoundOn] = useState(AudioAlert.isEnabled());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const time = now.toLocaleTimeString("es-MX", { hour: "2-digit", minute: "2-digit", hour12: false });
  const date = now.toLocaleDateString("es-MX", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
  const total = Object.values(counts).reduce((a, b) => a + b, 0);

  const filters = [
    { id: "all",       label: "Todas",     count: total,                color: "#1A1A17" },
    { id: "didi_food", label: "DiDi Food", count: counts.didi_food||0,  color: PLATFORMS.didi_food.color },
    { id: "rappi",     label: "Rappi",     count: counts.rappi||0,      color: PLATFORMS.rappi.color },
    { id: "uber_eats", label: "Uber Eats", count: counts.uber_eats||0,  color: PLATFORMS.uber_eats.color },
  ];

  return (
    <header className="header">
      <div className="brand">
        <div className="brand-logo">
          <img src="assets/logo-mym.png" alt="MyM" />
        </div>
        <div className="brand-meta">
          <div className="brand-name">MyM's Pizza</div>
          <div className="brand-sub">{user?.storeName || "Global"} - {user?.displayName || user?.username || "Usuario"}</div>
        </div>
      </div>

      <div className="platform-filter" role="tablist" aria-label="Filtrar por plataforma">
        {filters.map((f) => (
          <button
            key={f.id}
            role="tab"
            aria-selected={platform === f.id}
            className={`platform-pill ${platform === f.id ? "is-active" : ""}`}
            style={{ "--p-color": f.color }}
            onClick={() => setPlatform(f.id)}
          >
            {f.id !== "all" && <span className="dot" style={{ background: f.color }} />}
            <span>{f.label}</span>
            <span className="count">{f.count}</span>
          </button>
        ))}
      </div>

      <div className="header-spacer" />

      <div className="header-status">
        <div className="sync">
          <span className="pulse" />
          <span>Auto-sync - 10s</span>
        </div>

        <button
          className={`icon-btn ${soundOn ? "" : "sound-off"}`}
          title={soundOn ? "Sonido activado" : "Sonido desactivado"}
          onClick={() => setSoundOn(AudioAlert.toggle())}
        >
          <Icon name={soundOn ? "volume" : "volumeOff"} size={16} />
        </button>

        <button
          className="icon-btn"
          title={layout === "kanban" ? "Vista de lista" : "Vista kanban"}
          onClick={() => setLayout(layout === "kanban" ? "list" : "kanban")}
        >
          <Icon name={layout === "kanban" ? "list" : "grid"} size={16} />
        </button>

        <button
          className="icon-btn"
          title={theme === "dark" ? "Modo claro" : "Modo oscuro"}
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        >
          <Icon name={theme === "dark" ? "sun" : "moon"} size={16} />
        </button>

        <div className="clock">
          <div className="time">{time}</div>
          <div className="date">{date}</div>
        </div>
      </div>
    </header>
  );
};

// ============ Helpers ============
const fmtMoney = (v) => "$" + Number(v || 0).toLocaleString("es-MX", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const fmtTime = (m) => {
  if (m < 1)  return "Recien";
  if (m === 1) return "1 min";
  if (m < 60) return `${m} min`;
  const h = Math.floor(m / 60), mm = m % 60;
  return `${h}h ${mm}m`;
};

const PlatformAvatar = ({ platform, size = 36 }) => {
  const p = PLATFORMS[platform] || { short: "?" };
  return (
    <div className="plat-avatar" style={{ width: size, height: size, background: "#1A1A17" }}>
      {p.short[0]}
    </div>
  );
};

// ============ OrderCard ============
const OrderCard = ({ order, onSelect, selected, onAdvance, isNew, onPrint }) => {
  const p = PLATFORMS[order.platform] || PLATFORMS.uber_eats;
  const pay = PAYMENT[order.payment] || PAYMENT.other;
  const flow = STATUS_FLOW[order.status];
  const col = COLUMNS.find((c) => c.id === order.status) || COLUMNS.find((c) => c.id === "ready");
  const visibleItems = (order.items || []).slice(0, 2);
  const more = (order.items || []).length - visibleItems.length;
  const isUrgent = order.status !== "ready" && order.status !== "dispatched" && order.elapsedMin >= 10;
  const isDispatched = order.status === "dispatched";

  // Verificar si las áreas bloquean el avance a "ready"
  const areas = order.areaStatus || [];
  const hasAreas = areas.length > 0;
  const allAreasReady = hasAreas ? areas.every((a) => a.status === "ready") : true;
  const pendingAreas = areas.filter((a) => a.status !== "ready").map((a) => a.area);
  const blockedByAreas = order.status === "progress" && hasAreas && !allAreasReady;

  if (!flow) return null;

  return (
    <article
      className={`card ${selected ? "is-selected" : ""} ${isUrgent ? "is-urgent" : ""} ${isNew ? "is-new" : ""}`}
      onClick={() => onSelect(order.id)}
    >
      <header className="card-head">
        <div className="card-head-left">
          <span className="card-type">
            <Icon name={order.type === "Delivery" ? "moto" : "bag"} size={12} />
            {order.type}
          </span>
          <span className="card-ref">#{order.posDoc || order.id}</span>
        </div>
        <span className="sub-status" style={{ "--col-color": isDispatched ? "#0EA37A" : col.color }}>
          <span className="dot" /> {isDispatched ? "EN CAMINO" : col.subLabel}
        </span>
      </header>

      <div className="card-customer-row">
        <PlatformAvatar platform={order.platform} size={32} />
        <div className="card-customer-info">
          <div className="customer-name">{order.customer}</div>
          <div className="customer-meta">
            <span className="platform-chip-sm" style={{ "--p-color": p.color }}>
              <span className="pdot" /> {p.label}
            </span>
            <span className="pay-chip" style={{ "--pay-color": pay.color }}>
              <Icon name={pay.icon} size={11} /> {pay.label}
            </span>
          </div>
        </div>
      </div>

      <ul className="card-items">
        {visibleItems.map((it, i) => (
          <li key={i} className="card-item-line">
            <span className="card-item-qty">{it.qty}x</span>
            <span className="card-item-name">{it.name}</span>
            {it.note && <span className="card-item-flag" title={it.note}>*</span>}
          </li>
        ))}
        {more > 0 && <li className="card-item-more">+ {more} producto{more > 1 ? "s" : ""} mas</li>}
      </ul>

      <footer className="card-foot">
        <SLATimer minutes={order.elapsedMin} status={order.status} />
        <span className="card-total">{fmtMoney(order.total)}</span>
        <div className="card-actions">
          <button
            className="icon-btn-sm"
            title="Imprimir"
            onClick={(e) => { e.stopPropagation(); onPrint(order.id); }}
          >
            <Icon name="printer" size={14} />
          </button>
          {!isDispatched && (
            <button
              className={`card-action ${blockedByAreas ? "is-disabled" : ""}`}
              style={{ background: blockedByAreas ? "#9CA3AF" : flow.color }}
              title={blockedByAreas ? `Esperando: ${pendingAreas.join(", ")}` : flow.action}
              disabled={blockedByAreas}
              onClick={(e) => { e.stopPropagation(); if (!blockedByAreas) onAdvance(order.id); }}
            >
              {blockedByAreas ? `Esperando ${pendingAreas.join(", ")}` : flow.action}
              <Icon name={blockedByAreas ? "clock" : flow.actionIcon} size={13} />
            </button>
          )}
        </div>
      </footer>
    </article>
  );
};

// ============ Column ============
const KanbanColumn = ({ col, orders, selected, onSelect, onAdvance, newIds, onPrint }) => {
  return (
    <section className="column" style={{ "--col-color": col.color }}>
      <header className="column-header">
        <div className="column-title">
          <span className="swatch" />
          {col.title}
        </div>
        <div className="column-count">{orders.length}</div>
      </header>
      <div className="column-body">
        {orders.length === 0 && (
          <div className="empty">
            <div className="empty-icon"><Icon name="box" size={26} stroke={1.4} /></div>
            <div className="empty-text">
              {col.id === "new" && "Sin pedidos nuevos"}
              {col.id === "progress" && "Sin pedidos en proceso"}
              {col.id === "ready" && "Sin pedidos listos"}
            </div>
          </div>
        )}
        {orders.map((o) => (
          <OrderCard
            key={o.id}
            order={o}
            selected={selected === o.id}
            onSelect={onSelect}
            onAdvance={onAdvance}
            onPrint={onPrint}
            isNew={newIds.has(o.id)}
          />
        ))}
      </div>
    </section>
  );
};

// ============ List View ============
const ListView = ({ orders, onSelect, onAdvance, selected }) => {
  return (
    <div className="list-view">
      <div className="list-table">
        <div className="list-row head">
          <div>Ref</div>
          <div>Cliente</div>
          <div>Productos</div>
          <div>Plataforma</div>
          <div>Tipo</div>
          <div>Tiempo</div>
          <div>Total</div>
          <div>Estado</div>
        </div>
        {orders.map((o) => {
          const p = PLATFORMS[o.platform] || PLATFORMS.uber_eats;
          const col = COLUMNS.find((c) => c.id === o.status);
          if (!col) return null;
          return (
            <div
              key={o.id}
              className={`list-row ${selected === o.id ? "is-selected" : ""}`}
              onClick={() => onSelect(o.id)}
              style={{ "--col-color": col.color }}
            >
              <div className="card-ref">#{o.posDoc || o.id}</div>
              <div style={{ fontWeight: 600 }}>{o.customer}</div>
              <div style={{ color: "var(--text-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                {(o.items||[]).map((i) => `${i.qty}x ${i.name}`).join(" - ")}
              </div>
              <div>
                <span className="platform-chip-sm" style={{ "--p-color": p.color }}>
                  <span className="pdot" />{p.label}
                </span>
              </div>
              <div style={{ color: "var(--text-2)" }}>{o.type}</div>
              <div style={{ fontFamily: "var(--font-mono)" }}>{fmtTime(o.elapsedMin)}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{fmtMoney(o.total)}</div>
              <div className="list-status">
                <span className="swatch" />
                {col.subLabel}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ============ Order Modal ============
const OrderModal = ({ order, onClose, onAdvance, onCancel, onPrint, onAdjustTime }) => {
  const [renderOrder, setRenderOrder] = useState(order);
  useEffect(() => {
    if (order) setRenderOrder(order);
    else {
      const t = setTimeout(() => setRenderOrder(null), 200);
      return () => clearTimeout(t);
    }
  }, [order]);

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

  if (!renderOrder) return null;
  const open = !!order;
  const o = renderOrder;
  const p = PLATFORMS[o.platform] || PLATFORMS.uber_eats;
  const pay = PAYMENT[o.payment] || PAYMENT.other;
  const flow = STATUS_FLOW[o.status] || STATUS_FLOW.new;
  const isDispatched = o.status === "dispatched";
  const col = COLUMNS.find((c) => c.id === o.status) || (isDispatched ? { color: "#0EA37A", subLabel: "EN CAMINO" } : null);

  return (
    <div className={`modal-backdrop ${open ? "is-open" : ""}`} onClick={onClose}>
      <div
        className={`modal ${open ? "is-open" : ""}`}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
      >
        <header className="modal-head">
          <PlatformAvatar platform={o.platform} size={44} />
          <div className="modal-title-block">
            <div className="modal-title" id="modal-title">
              <span className="muted">N de pedido:</span>{" "}
              <span className="mono">{o.externalId}</span>{" "}
              <span className="modal-shortref">(#{o.posDoc || o.id})</span>
            </div>
            <div className="modal-sub">
              <span className="platform-chip-sm" style={{ "--p-color": p.color }}>
                <span className="pdot" /> {p.label}
              </span>
              <span className="modal-sub-dot">-</span>
              <span>{o.type}</span>
              {col && (
                <>
                  <span className="modal-sub-dot">-</span>
                  <span className="sub-status" style={{ "--col-color": col.color }}>
                    <span className="dot" /> {col.subLabel}
                  </span>
                </>
              )}
            </div>
          </div>
          <div className="modal-head-actions">
            <button className="icon-btn-sm" title="Imprimir" onClick={() => onPrint(o.id)}>
              <Icon name="printer" size={15} />
            </button>
            <button className="icon-btn-sm" title="Cerrar" onClick={onClose}>
              <Icon name="x" size={15} />
            </button>
          </div>
        </header>

        <div className="modal-body">
          <section className="modal-products">
            {o.orderNote && (
              <div className="order-note-banner">
                <Icon name="note" size={14} />
                <div><strong>Nota del pedido:</strong> {o.orderNote}</div>
              </div>
            )}
            <h3 className="section-label">Productos del pedido</h3>
            <div className="products-table">
              <div className="products-row head">
                <div>Cant</div>
                <div>Producto</div>
                <div className="text-right">Precio</div>
              </div>
              {(o.items || []).map((it, i) => (
                <div key={i} className="products-row">
                  <div className="qty">{it.qty}x</div>
                  <div>
                    <div className="prod-name">{(it.name || "").toUpperCase()}</div>
                    {it.opts && <div className="prod-opts">{it.opts}</div>}
                    {it.note && <div className="prod-note">* {it.note}</div>}
                  </div>
                  <div className="prod-price">{fmtMoney(it.price * it.qty)}</div>
                </div>
              ))}
            </div>
            <div className="totals">
              <div className="totals-row"><span>Subtotal</span><span className="v">{fmtMoney(o.subtotal)}</span></div>
              {o.discount > 0 && <div className="totals-row"><span>Descuento</span><span className="v" style={{ color: "#16a34a" }}>-{fmtMoney(o.discount)}</span></div>}
              {o.deliveryFee > 0 && <div className="totals-row"><span>Envío</span><span className="v">{fmtMoney(o.deliveryFee)}</span></div>}
              {o.tip > 0 && <div className="totals-row"><span>Propina</span><span className="v">{fmtMoney(o.tip)}</span></div>}
              <div className="totals-row"><span>Impuestos</span><span className="v">{fmtMoney(o.tax || 0)}</span></div>
              <div className="totals-row grand"><span>Total</span><span className="v">{fmtMoney(o.total)}</span></div>
            </div>
          </section>

          <aside className="modal-info">
            <h3 className="section-label">Informacion</h3>
            <ul className="info-list">
              <li className="info-row">
                <Icon name="clock" size={15} />
                <div>
                  <div className="info-label">Tiempo de la orden</div>
                  <div className="info-value">{o.receivedAt}</div>
                </div>
              </li>
              {o.estimatedReady && (
                <li className="info-row">
                  <Icon name="timer" size={15} />
                  <div>
                    <div className="info-label">Listo estimado</div>
                    <div className="info-value" style={{ color: "#D97706", fontWeight: 600 }}>{o.estimatedReady}</div>
                  </div>
                </li>
              )}
              <li className="info-row">
                <Icon name="card" size={15} />
                <div>
                  <div className="info-label">Pago con</div>
                  <div className="info-value link" style={{ color: pay.color }}>{pay.label}</div>
                </div>
              </li>
              <li className="info-row">
                <Icon name="package" size={15} />
                <div>
                  <div className="info-label">Tipo de orden</div>
                  <div className="info-value">{o.type}</div>
                </div>
              </li>
              <li className="info-row">
                <Icon name="timer" size={15} />
                <div>
                  <div className="info-label">POS Doc #</div>
                  <div className="info-value mono">#{o.posDoc}</div>
                </div>
              </li>
            </ul>

            <h3 className="section-label" style={{ marginTop: 24 }}>Cliente</h3>
            <ul className="info-list">
              <li className="info-row">
                <Icon name="user" size={15} />
                <div>
                  <div className="info-label">Nombre</div>
                  <div className="info-value">{o.customer}</div>
                </div>
              </li>
              <li className="info-row">
                <Icon name="phone" size={15} />
                <div>
                  <div className="info-label">Telefono</div>
                  <div className="info-value mono">{o.phone || "N/A"}</div>
                </div>
              </li>
              {o.address && o.address !== "Recoge en tienda" && (
                <li className="info-row">
                  <Icon name="pin" size={15} />
                  <div>
                    <div className="info-label">Direccion</div>
                    <div className="info-value" style={{ fontSize: 13, fontWeight: 500 }}>{o.address}</div>
                  </div>
                </li>
              )}
            </ul>
          </aside>
        </div>

        <footer className="modal-foot">
          {!isDispatched && (
            <button className="btn btn-cancel" onClick={() => { onCancel(o.id); onClose(); }}>
              <Icon name="trash" size={14} /> Cancelar
            </button>
          )}
          {/* Ajustar tiempo: solo en pedidos ya aceptados/en preparación que lo permitan */}
          {o.status === "progress" && o.canAdjustPrepTime !== false && onAdjustTime && (
            <button className="btn" style={{ borderColor: "#D97706", color: "#D97706" }}
              onClick={() => { onAdjustTime(o.id); onClose(); }}>
              <Icon name="timer" size={14} /> Ajustar tiempo
            </button>
          )}
          <button
            className="btn btn-action"
            style={{ background: flow.color }}
            onClick={() => { onAdvance(o.id); onClose(); }}
          >
            <Icon name={flow.actionIcon} size={15} />
            {flow.action}
          </button>
        </footer>
      </div>
    </div>
  );
};

// ============ Modal de tiempo de preparación ============
// data: { id, mode: "accept"|"adjust", suggested } | null
const PrepTimeModal = ({ data, onConfirm, onCancel }) => {
  const [minutes, setMinutes] = useState(20);

  useEffect(() => {
    if (data) setMinutes(data.suggested || 20);
  }, [data]);

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

  if (!data) return null;
  const isAccept = data.mode === "accept";
  const presets = [10, 15, 20, 30, 45];
  const clamp = (v) => Math.max(1, Math.min(120, v));

  return (
    <div className="adm-modal-backdrop" style={{ zIndex: 80 }} onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
      <div className="confirm-modal" style={{ maxWidth: 420 }}>
        <div className="confirm-modal-icon" style={{ background: "color-mix(in oklab, var(--accent) 12%, var(--surface))" }}>
          <Icon name="timer" size={26} style={{ color: "var(--accent)" }} />
        </div>
        <h3 className="confirm-modal-title">{isAccept ? "Tiempo de preparación" : "Ajustar tiempo de preparación"}</h3>
        <p className="confirm-modal-msg">
          {isAccept
            ? "¿En cuántos minutos estará listo el pedido? Se le informa a Uber para coordinar al repartidor."
            : "Actualiza el tiempo restante para que el pedido esté listo (la cocina se atrasó)."}
          {data.suggested ? ` Uber sugiere ${data.suggested} min.` : ""}
        </p>

        <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap", margin: "8px 0 14px" }}>
          {presets.map((m) => (
            <button key={m} type="button"
              className={`btn ${minutes === m ? "btn-action" : ""}`}
              style={minutes === m ? {} : { borderColor: "var(--border)" }}
              onClick={() => setMinutes(m)}>
              {m} min
            </button>
          ))}
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, marginBottom: 8 }}>
          <button type="button" className="btn" style={{ borderColor: "var(--border)" }} onClick={() => setMinutes((v) => clamp(v - 5))}>−5</button>
          <input type="number" min="1" max="120" value={minutes}
            onChange={(e) => setMinutes(clamp(parseInt(e.target.value) || 1))}
            style={{ width: 90, textAlign: "center", fontSize: 20, fontWeight: 700, padding: "8px", borderRadius: 8, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--text)" }} />
          <span className="muted" style={{ fontWeight: 600 }}>min</span>
          <button type="button" className="btn" style={{ borderColor: "var(--border)" }} onClick={() => setMinutes((v) => clamp(v + 5))}>+5</button>
        </div>

        <div className="confirm-modal-actions">
          <button className="btn btn-cancel" onClick={onCancel}>Cancelar</button>
          <button className="btn btn-action" onClick={() => onConfirm(minutes)}>
            <Icon name="check" size={14} /> {isAccept ? "Aceptar pedido" : "Actualizar tiempo"}
          </button>
        </div>
      </div>
    </div>
  );
};

// ============ Toast ============
const Toast = ({ message }) => {
  if (!message) return null;
  return (
    <div className="toast-wrap">
      <div className="toast">
        <Icon name="check" size={14} /> {message}
      </div>
    </div>
  );
};

Object.assign(window, { Sidebar, Header, OrderCard, KanbanColumn, ListView, OrderModal, PrepTimeModal, Toast, fmtMoney, fmtTime, PlatformAvatar, FormField: window.FormField });