/* ============================================================
   3DAX — Admin · Orders (view + complete with tracking)
   ============================================================ */
function AdminOrders({ orders }){
  const [filter, setFilter] = useState("all");
  const [open, setOpen] = useState(null);
  const shown = orders.filter((o) => filter === "all" ? true : o.status === filter);

  return (
    <div className="adm__view">
      <div className="adm__filters">
        {[["all", "Todos"], ["pending", "Pendientes"], ["completed", "Enviados"]].map(([k, l]) => (
          <button key={k} className={"adm__filter" + (filter === k ? " on" : "")} onClick={() => setFilter(k)}>
            {l} <span>{k === "all" ? orders.length : orders.filter((o) => o.status === k).length}</span>
          </button>
        ))}
      </div>

      <div className="adm__table adm__table--ord">
        <div className="adm__thead">
          <span>Pedido</span><span>Cliente</span><span>Fecha</span><span>Total</span><span>Estado</span><span></span>
        </div>
        {shown.map((o) => (
          <div className="adm__trow" key={o.id}>
            <div><strong>{o.code}</strong><div className="adm__pchar">{o.items.reduce((a, it) => a + it.qty, 0)} uds</div></div>
            <div><div className="adm__pname">{o.name}</div><div className="adm__pchar">{o.email}</div></div>
            <span className="adm__muted">{new Date(o.createdAt).toLocaleDateString("es-ES")}</span>
            <span>{eur(o.total)}</span>
            <span><span className={"adm__tag " + (o.status === "completed" ? "is-done" : "is-pending")}>{o.status === "completed" ? "Enviado" : "Pendiente"}</span></span>
            <span className="adm__actions"><button onClick={() => setOpen(o)}>Ver →</button></span>
          </div>
        ))}
        {shown.length === 0 && <div className="adm__empty">No hay pedidos en esta vista.</div>}
      </div>

      {open && <OrderDetail order={open} onClose={() => setOpen(null)} />}
    </div>
  );
}

function OrderDetail({ order, onClose }){
  const live = useStoreData(() => Store.orders().find((o) => o.id === order.id) || order, [order.id]);
  const [tracking, setTracking] = useState(live.tracking || "");
  const [err, setErr] = useState("");
  useEffect(() => { document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = ""; }; }, []);

  const complete = () => {
    if(tracking.trim().length < 4){ setErr("Introduce un código de seguimiento válido."); return; }
    Store.completeOrder(live.id, tracking.trim());
  };

  return (
    <div className="ledit" role="dialog" aria-modal="true">
      <div className="ledit__scrim" onClick={onClose} />
      <div className="ledit__panel ledit__panel--sm">
        <div className="ledit__bar">
          <div><h2 className="display">{live.code}</h2><span className={"adm__tag " + (live.status === "completed" ? "is-done" : "is-pending")}>{live.status === "completed" ? "Enviado" : "Pendiente"}</span></div>
          <button className="co__close" onClick={onClose} aria-label="Cerrar">
            <svg width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>

        <div className="ledit__body">
          <div className="od__cust">
            <div><span className="od__k">Cliente</span>{live.name}</div>
            <div><span className="od__k">Email</span>{live.email}</div>
            <div><span className="od__k">Dirección</span>{[live.address, live.city, live.zip, live.country].filter((x) => x && x !== "—").join(", ") || "—"}</div>
            <div><span className="od__k">Fecha</span>{new Date(live.createdAt).toLocaleString("es-ES")}</div>
          </div>

          <div className="od__items">
            {live.items.map((it, i) => (
              <div className="od__item" key={i}>
                <span>{it.qty}× {it.name}{it.way ? " · " + it.way.name : ""}</span>
                <span>{eur(it.price * it.qty)}</span>
              </div>
            ))}
            <div className="od__item od__item--sub"><span>Envío</span><span>{live.shipping === 0 ? "Gratis" : eur(live.shipping)}</span></div>
            <div className="od__item od__item--tot"><span>Total</span><span>{eur(live.total)}</span></div>
          </div>

          <div className="od__fulfil">
            <div className="ledit__label">Completar pedido</div>
            <p className="od__hint">Adjunta el código de seguimiento. El cliente lo verá en su cuenta y por email.</p>
            <div className="od__track">
              <input value={tracking} onChange={(e) => { setTracking(e.target.value); setErr(""); }} placeholder="Ej. ES948271635" />
              {live.status === "completed"
                ? <button className="btn btn-ghost" onClick={() => Store.reopenOrder(live.id)}>Reabrir</button>
                : <button className="btn btn-primary" onClick={complete}>✓ Marcar enviado</button>}
            </div>
            {err && <div className="auth__err">{err}</div>}
            {live.status === "completed" && live.tracking && <div className="od__done">📦 Enviado con seguimiento <strong>{live.tracking}</strong></div>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminOrders, OrderDetail });