// La lista y su resumen. Lo que toca hacer lo decide PASOS; lo que necesita un dato
// (la fecha de cierre, el roster) se resuelve en el detalle, no aqui.
const ARCHIVOS=[
  {format:"SVG",note:"Vector, production ready",icon:"pen-tool"},
  {format:"PNG",note:"Flat preview, transparent",icon:"image"},
  {format:"PDF",note:"Print-ready artwork",icon:"file-text"},
  {format:"Spec sheet",note:"PDF with sizes, colors and placements",icon:"clipboard-list"},
  {format:"ZIP package",note:"All files plus the spec sheet",icon:"package"}
];
function OrdersScreen({role,abrir,avanzar,verCliente}){
  const [tab,setTab]=React.useState("All");
  const [sel,setSel]=React.useState(null);
  const [files,setFiles]=React.useState(false);
  const [seleccion,setSeleccion]=React.useState([]);
  const [,repintar]=React.useReducer(x=>x+1,0);
  const P=window.PASOS,O=window.ORDENES;
  const cerrar=()=>{setSel(null);setFiles(false)};
  const marcar=id=>setSeleccion(l=>l.includes(id)?l.filter(x=>x!==id):[...l,id]);
  const borrar=()=>{window.DATA.orders=window.DATA.orders.filter(o=>!seleccion.includes(o.id));setSeleccion([]);repintar()};
  const rows=window.DATA.orders.filter(o=>tab==="All"
    ||(tab==="In production"&&["ordered","production"].includes(o.status))
    ||(tab==="Needs action"&&P[o.status].actua===role));
  const cols=[
    {key:"pick",label:"",width:40,render:r=><span onClick={e=>e.stopPropagation()} style={{display:"inline-flex"}}><Checkbox checked={seleccion.includes(r.id)} onChange={()=>marcar(r.id)}/></span>},
    {key:"id",label:"Order",width:70},
    {key:"team",label:"Team"},
    {key:"garment",label:"Garment"},
    {key:"qty",label:"Qty",align:"right",width:60,render:r=>O.unidades(r.roster)},
    {key:"status",label:"Status",render:r=><EstadoPedido status={r.status} role={role}/>},
    {key:"due",label:"Ship by",width:80,render:r=>r.due||"—"},
    {key:"total",label:"Total",align:"right",width:90,render:r=>O.total(r)}
  ];
  const paso=sel?P[sel.status]:null;
  const mio=paso&&paso.actua===role;
  // Enviar el proof pide la fecha de cierre: se abre el detalle con ese dialogo.
  const ejecutar=()=>{
    if(["draft","changes"].includes(sel.status)){const id=sel.id;cerrar();abrir(id,true);return}
    avanzar(sel.id,paso.a);
    setSel(window.DATA.orders.find(x=>x.id===sel.id));
    repintar();
  };
  const abrirSel=()=>{const id=sel.id;cerrar();abrir(id)};
  return <div style={{display:"flex",flexDirection:"column",gap:16}}>
    <div style={{display:"flex",alignItems:"center",gap:16,flexWrap:"wrap"}}>
      <Tabs tabs={["All","Needs action","In production"]} value={tab} onChange={setTab}/>
      <div style={{flex:1}}></div>
      <SearchInput placeholder="Search orders" width={240}/>
      {seleccion.length>0&&<Button size="sm" variant="outline" iconLeft={<Icon name="trash-2" size={16}/>} onClick={borrar}>Delete ({seleccion.length})</Button>}
      <Button size="sm" variant="outline" iconLeft={<Icon name="download" size={16}/>}>Export list</Button>
    </div>
    {rows.length?<div style={{overflowX:"auto"}}><Table columns={cols} rows={rows} onRowClick={setSel} style={{minWidth:760}}/></div>
      :<Card padding="0"><EmptyState base="../.." title="Nothing here" body={tab==="Needs action"?"Nothing is waiting on you.":"No orders match this filter yet."} action={<Button size="sm" onClick={()=>setTab("All")}>Show all orders</Button>}/></Card>}
    <Dialog open={!!sel} onClose={cerrar} width={520}
      title={sel?"Order "+sel.id:""}
      description={sel?sel.team+" · "+sel.garment+" · "+O.unidades(sel.roster)+" pcs":""}
      footer={<><Button variant="outline" size="sm" onClick={abrirSel}>Open order</Button>
        {mio&&paso.accion&&<Button size="sm" onClick={ejecutar}>{paso.accion}</Button>}</>}>
      {sel&&<div style={{display:"flex",flexDirection:"column",gap:18,marginTop:8}}>
        <Stepper steps={window.STEPS} current={paso.paso}/>
        <Espera order={sel} role={role}/>
        {paso.actua==="viewer"&&<div><Button size="sm" variant="outline" onClick={()=>{const id=sel.id;cerrar();verCliente(id)}}>Preview as customer</Button></div>}
        {!paso.actua&&<div style={{display:"flex",alignItems:"flex-start",gap:8,fontSize:13,color:"var(--text-muted)"}}>
          <Icon name="circle-check" size={16} strokeColor="var(--bruce-black)"/>
          <span style={{flex:1}}>Shipped on {sel.due}. Nothing left to do.</span></div>}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(110px,1fr))",gap:"16px 24px",alignItems:"start"}}>
          <Dato label="Total" value={O.total(sel)} grande/>
          <Dato label={sel.status==="shipped"?"Shipped":"Ship by"} value={sel.due||"—"}/>
          <Dato label="Owner" value={sel.owner}/>
        </div>
        {/* Los archivos no hacen falta hasta produccion: van plegados, y desplegados
            caben sin scroll en el dialogo: una linea por archivo. */}
        <div style={{display:"flex",flexDirection:"column",gap:4}}>
          <button type="button" onClick={()=>setFiles(!files)} style={{display:"flex",alignItems:"center",gap:6,border:"none",
            background:"none",padding:"14px 0 8px",cursor:"pointer",font:"inherit",fontSize:12,fontWeight:600,color:"var(--text-link)",
            borderTop:"1px solid var(--border-hairline)",width:"100%"}}>
            <Icon name={files?"chevron-up":"chevron-down"} size={14}/>Production files
          </button>
          {files&&ARCHIVOS.map(a=><button key={a.format} type="button" style={{display:"flex",alignItems:"center",gap:10,width:"100%",
              padding:"7px 0",border:"none",borderTop:"1px solid var(--gray-100)",background:"none",cursor:"pointer",font:"inherit",textAlign:"left"}}>
            <Icon name={a.icon} size={16} strokeColor="var(--bruce-blue)"/>
            <span style={{fontSize:13,fontWeight:700,whiteSpace:"nowrap"}}>{a.format}</span>
            <span style={{flex:1,fontSize:12,color:"var(--text-muted)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{a.note}</span>
            <Icon name="download" size={14} strokeColor="var(--text-subtle)"/>
          </button>)}
        </div>
      </div>}
    </Dialog>
  </div>;
}
window.OrdersScreen=OrdersScreen;