function Stat({label,value,note}){
  return <Card padding="20px">
    <div style={{fontSize:11,fontWeight:700,letterSpacing:".14em",textTransform:"uppercase",color:"var(--text-muted)"}}>{label}</div>
    <div style={{fontSize:36,fontWeight:700,letterSpacing:"-.01em",marginTop:6}}>{value}</div>
    {note&&<div style={{fontSize:12,color:"var(--text-subtle)",marginTop:2}}>{note}</div>}
  </Card>;
}

function DashboardScreen({go,abrir,role}){
  const O=window.ORDENES;
  const cols=[
    {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:"Due",width:80,render:r=>r.due||"—"},
    {key:"total",label:"Total",align:"right",width:90,render:r=>O.total(r)}
  ];
  const esperando=window.DATA.orders.filter(o=>o.status==="proof").length;
  const produciendo=window.DATA.orders.filter(o=>["ordered","production"].includes(o.status)).length;
  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(180px,1fr))",gap:16}}>
      <Stat label="Open jobs" value={window.DATA.orders.filter(o=>o.status!=="shipped").length} note="Across every team"/>
      <Stat label="Awaiting approval" value={esperando} note={esperando?"Waiting on the customer":"Nothing pending"}/>
      <Stat label="In production" value={produciendo} note="On schedule"/>
      <Stat label="Quoted this month" value="$38.4k" note="+12% vs July"/>
    </div>
    <Card padding="0" style={{overflow:"hidden"}}>
      <div style={{display:"flex",alignItems:"center",gap:12,flexWrap:"wrap",padding:"16px 20px",borderBottom:"1px solid var(--border-hairline)"}}>
        <span style={{flex:1,fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>Active jobs</span>
        <SearchInput placeholder="Search orders" width={200}/>
        <Button size="sm" variant="outline" onClick={()=>go("orders")}>View all</Button>
      </div>
      <div style={{overflowX:"auto"}}>
        {/* La fila abre ESE pedido, no la lista. */}
        <Table dense columns={cols} rows={window.DATA.orders} onRowClick={r=>abrir(r.id)} style={{border:"none",borderRadius:0,minWidth:640}}/>
      </div>
    </Card>
  </div>;
}
window.DashboardScreen=DashboardScreen;