// ===== Orders list with stage tabs + table =====
function Orders({ orders, query, setQuery, onOpen, onNav, isMobile }){
  const [stage, setStage] = React.useState("entrada");
  const [prio, setPrio] = React.useState("todas");
  const [sort, setSort] = React.useState({ key:"num", dir:"desc" });

  const active = orders.filter(o=>!o.deleted);
  const counts = {
    entrada: active.filter(o=>STATUSES[o.status].stage==="entrada").length,
    reparacion: active.filter(o=>STATUSES[o.status].stage==="reparacion").length,
    salida: active.filter(o=>STATUSES[o.status].stage==="salida").length,
    eliminadas: orders.filter(o=>o.deleted).length,
  };
  const tabs = [
    { id:"entrada", label:"Entrada", count:counts.entrada },
    { id:"reparacion", label:"Reparación", count:counts.reparacion },
    { id:"salida", label:"Salida", count:counts.salida },
    ...(counts.eliminadas>0 ? [{ id:"eliminadas", label:"Eliminadas", count:counts.eliminadas }] : []),
  ];

  let rows = stage==="eliminadas" ? orders.filter(o=>o.deleted) : active.filter(o => STATUSES[o.status].stage === stage);
  if(prio !== "todas") rows = rows.filter(o => o.priority === prio);
  if(query.trim()){
    const q = query.toLowerCase();
    rows = rows.filter(o => {
      const c = getClient(o.clientId);
      return [o.num, o.brand, o.model, o.serial, (c.name&&c.name!=="—")?c.name:(o.clientName||"")].join(" ").toLowerCase().includes(q);
    });
  }
  rows = [...rows].sort((a,b)=>{
    let av, bv;
    if(sort.key==="num"){ av=+a.num; bv=+b.num; }
    else if(sort.key==="cliente"){ av=getClient(a.clientId).name; bv=getClient(b.clientId).name; }
    else if(sort.key==="precio"){ av=a.estimate; bv=b.estimate; }
    else { av=a[sort.key]; bv=b[sort.key]; }
    if(av<bv) return sort.dir==="asc"?-1:1;
    if(av>bv) return sort.dir==="asc"?1:-1;
    return 0;
  });

  function toggleSort(key){
    setSort(s => s.key===key ? { key, dir: s.dir==="asc"?"desc":"asc" } : { key, dir:"asc" });
  }

  const Th = ({ label, k, align="left", w }) => (
    <th style={{ textAlign:align, padding:"0 14px", width:w }}>
      <button onClick={()=>k&&toggleSort(k)} style={{ display:"inline-flex", alignItems:"center", gap:5, border:"none", background:"transparent",
        fontSize:11.5, fontWeight:700, letterSpacing:"0.04em", textTransform:"uppercase", color: sort.key===k?"var(--ink-2)":"var(--faint)", cursor:k?"pointer":"default" }}>
        {label}
        {k && <Icon name="chevronDown" size={13} style={{ opacity: sort.key===k?1:0.35, transform: sort.key===k&&sort.dir==="asc"?"rotate(180deg)":"none", transition:"transform .15s" }} />}
      </button>
    </th>
  );

  return (
    <div style={{ display:"flex", flexDirection:"column", gap:16, animation:"fadeUp .35s ease" }}>
      {/* mini status row */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14 }}>
        {[
          { icon:"check", t:"Estado del taller", s:"¡Todo en orden!", hue:155 },
          { icon:"orders", t:"Órdenes abiertas", s:`${counts.entrada+counts.reparacion} abiertas`, hue:256 },
          { icon:"sms", t:"Notificaciones SMS", s:"0 créditos · Recargar", hue:70 },
        ].map(c=>(
          <Card key={c.t} pad={15} style={{ display:"flex", alignItems:"center", gap:13 }}>
            <div style={{ width:40, height:40, borderRadius:11, display:"flex", alignItems:"center", justifyContent:"center", background:`oklch(0.95 0.04 ${c.hue})`, color:`oklch(0.5 0.13 ${c.hue})` }}><Icon name={c.icon} size={20} /></div>
            <div>
              <div style={{ fontSize:14, fontWeight:700 }}>{c.t}</div>
              <div style={{ fontSize:13, color:"var(--muted)", marginTop:1 }}>{c.s}</div>
            </div>
          </Card>
        ))}
      </div>

      <Card pad={0}>
        {/* tabs */}
        <div style={{ display:"flex", alignItems:"center", gap:4, padding:"6px 8px", borderBottom:"1px solid var(--line)" }}>
          {tabs.map(t=>{
            const active = stage===t.id;
            return (
              <button key={t.id} onClick={()=>setStage(t.id)}
                style={{ display:"flex", alignItems:"center", gap:8, padding:"10px 16px", border:"none", background:"transparent",
                  borderRadius:9, fontSize:14, fontWeight: active?700:600, color: active?"var(--accent-ink)":"var(--muted)",
                  position:"relative", transition:"color .14s" }}>
                {t.label}
                <span style={{ minWidth:20, height:20, padding:"0 6px", borderRadius:99, fontSize:11.5, fontWeight:700,
                  display:"flex", alignItems:"center", justifyContent:"center",
                  background: active?"var(--accent-soft)":"var(--surface-2)", color: active?"var(--accent-ink)":"var(--muted)" }}>{t.count}</span>
                {active && <span style={{ position:"absolute", left:12, right:12, bottom:-7, height:3, borderRadius:99, background:"var(--accent)" }} />}
              </button>
            );
          })}
          <div style={{ marginLeft:"auto", display:"flex", alignItems:"center", gap:8, paddingRight:8 }}>
            <div style={{ position:"relative" }}>
              <select value={prio} onChange={e=>setPrio(e.target.value)}
                style={{ appearance:"none", padding:"8px 30px 8px 12px", fontSize:13, fontWeight:600, color:"var(--ink-2)", border:"1px solid var(--line)", borderRadius:9, background:"var(--surface)", cursor:"pointer" }}>
                <option value="todas">Toda prioridad</option>
                {Object.values(PRIORITIES).map(p=><option key={p.id} value={p.id}>{p.label}</option>)}
              </select>
              <Icon name="chevronDown" size={14} style={{ position:"absolute", right:10, top:"50%", transform:"translateY(-50%)", color:"var(--faint)", pointerEvents:"none" }} />
            </div>
            <IconBtn icon="refresh" title="Actualizar" />
            <Btn variant="secondary" size="sm" icon="doc" onClick={()=>exportOrders(rows)} title="Exportar a CSV (Excel)">Exportar</Btn>
          </div>
        </div>

        {/* count line */}
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"11px 20px", fontSize:13, color:"var(--muted)", borderBottom:"1px solid var(--line-2)" }}>
          <span>Cantidad: <strong style={{ color:"var(--ink)" }}>{rows.length}</strong> {rows.length===1?"orden":"órdenes"}{query&&<span> · filtrando "{query}"</span>}</span>
          <span style={{ display:"flex", alignItems:"center", gap:6 }}><Icon name="clock" size={15} /> Tiempo tareas: 0 min restantes</span>
        </div>

        {/* lista: tarjetas en móvil, tabla en escritorio */}
        {isMobile ? (
          <div style={{ display:"flex", flexDirection:"column" }}>
            {rows.length===0 && (
              <div style={{ padding:"48px 20px", textAlign:"center", color:"var(--faint)" }}>
                <Icon name="orders" size={32} style={{ opacity:0.4 }} />
                <div style={{ fontSize:14.5, fontWeight:600, color:"var(--muted)", marginTop:10 }}>Sin órdenes en esta etapa</div>
              </div>
            )}
            {rows.map(o=>{
              const c = getClient(o.clientId);
              return (
                <button key={o.id} onClick={()=>onOpen(o.id)} style={{ textAlign:"left", border:"none", background:"transparent", borderBottom:"1px solid var(--line-2)", padding:"14px 16px", display:"flex", flexDirection:"column", gap:9, cursor:"pointer", width:"100%" }}>
                  <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", gap:8 }}>
                    <span style={{ display:"inline-flex", alignItems:"center", gap:6 }}><Icon name="tools" size={14} style={{ color:"var(--faint)" }} /><span className="mono" style={{ fontWeight:700, color:"var(--accent-ink)" }}>#{o.num}</span></span>
                    <StatusBadge status={o.status} size="sm" />
                  </div>
                  <div style={{ display:"flex", alignItems:"center", gap:11 }}>
                    <DeviceGlyph type={o.device} size={38} />
                    <div style={{ minWidth:0, flex:1 }}>
                      <div style={{ fontSize:14.5, fontWeight:700, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{o.model}</div>
                      <div style={{ fontSize:12.5, color:"var(--muted)" }}>{o.brand} · {getDevice(o.device).label}</div>
                    </div>
                    <PriorityTag priority={o.priority} />
                  </div>
                  <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", gap:8, fontSize:12.5 }}>
                    <span style={{ color:"var(--ink-2)", fontWeight:600, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{(c.name&&c.name!=="—")?c.name:(o.clientName||"—")}</span>
                    <span className="mono" style={{ fontWeight:700, color: o.estimate>0?"var(--ink)":"var(--faint)" }}>{fmtMoney(o.estimate)}</span>
                  </div>
                </button>
              );
            })}
          </div>
        ) : (
        <div style={{ overflowX:"auto" }}>
          <table style={{ width:"100%", borderCollapse:"collapse", minWidth:780 }}>
            <thead>
              <tr style={{ height:40, background:"var(--surface-2)" }}>
                <Th label="N°" k="num" w={92} />
                <Th label="Prioridad" k="priority" w={120} />
                <Th label="Estado" k="status" w={150} />
                <Th label="Equipo" k="model" />
                <Th label="Cliente" k="cliente" />
                <Th label="Responsable" w={150} />
                <Th label="Precio" k="precio" align="right" w={100} />
                <th style={{ width:110 }}></th>
              </tr>
            </thead>
            <tbody>
              {rows.length===0 && (
                <tr><td colSpan={8}>
                  <div style={{ padding:"54px 20px", textAlign:"center", color:"var(--faint)" }}>
                    <Icon name="orders" size={34} style={{ opacity:0.4 }} />
                    <div style={{ fontSize:14.5, fontWeight:600, color:"var(--muted)", marginTop:10 }}>Sin órdenes en esta etapa</div>
                    <div style={{ fontSize:13, marginTop:3 }}>Crea una nueva orden de ingreso para empezar.</div>
                  </div>
                </td></tr>
              )}
              {rows.map(o=>{
                const c = getClient(o.clientId); const t = getTech(o.techId);
                return (
                  <tr key={o.id} onClick={()=>onOpen(o.id)}
                    style={{ height:62, borderBottom:"1px solid var(--line-2)", cursor:"pointer", transition:"background .12s" }}
                    onMouseEnter={e=>e.currentTarget.style.background="var(--surface-2)"}
                    onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                    <td style={{ padding:"0 14px" }}>
                      <span style={{ display:"inline-flex", alignItems:"center", gap:7 }}>
                        <Icon name="tools" size={15} style={{ color:"var(--faint)" }} />
                        <span className="mono" style={{ fontSize:13.5, fontWeight:600, color:"var(--accent-ink)" }}>{o.num}</span>
                      </span>
                    </td>
                    <td style={{ padding:"0 14px" }}><PriorityTag priority={o.priority} /></td>
                    <td style={{ padding:"0 14px" }}><StatusBadge status={o.status} size="sm" /></td>
                    <td style={{ padding:"0 14px" }}>
                      <div style={{ display:"flex", alignItems:"center", gap:11 }}>
                        <DeviceGlyph type={o.device} size={36} />
                        <div style={{ minWidth:0 }}>
                          <div style={{ fontSize:14, fontWeight:700, whiteSpace:"nowrap" }}>{o.model}</div>
                          <div style={{ fontSize:12, color:"var(--muted)" }}>{o.brand} · {getDevice(o.device).label}</div>
                        </div>
                      </div>
                    </td>
                    <td style={{ padding:"0 14px" }}>
                      <div style={{ fontSize:13.5, fontWeight:600 }}>{(c.name&&c.name!=="—")?c.name:(o.clientName||"—")}</div>
                      <div style={{ fontSize:12, color:"var(--muted)" }} className="mono">{c.phone||o.clientPhone||""}</div>
                    </td>
                    <td style={{ padding:"0 14px" }}>
                      <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                        <Avatar name={t?.name || o.responsible || "—"} initials={t?.initials} hue={t?.hue||256} size={28} />
                        <span style={{ fontSize:13, fontWeight:600, color:"var(--ink-2)" }}>{t ? t.name.split(" ")[0] : (o.responsible ? o.responsible.split(" ")[0] : "—")}</span>
                      </div>
                    </td>
                    <td style={{ padding:"0 14px", textAlign:"right" }}>
                      <span className="mono" style={{ fontSize:13.5, fontWeight:600, color: o.estimate>0?"var(--ink)":"var(--faint)" }}>{fmtMoney(o.estimate)}</span>
                    </td>
                    <td style={{ padding:"0 12px" }} onClick={e=>e.stopPropagation()}>
                      <div style={{ display:"flex", alignItems:"center", gap:2, justifyContent:"flex-end" }}>
                        <IconBtn icon="eye" size={16} title="Ver detalle" onClick={()=>onOpen(o.id)} />
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        )}
      </Card>
    </div>
  );
}

Object.assign(window, { Orders });