// Lo que comparten la lista, el dialogo, el detalle y la vista del cliente.
// El estado visible sale de PASOS; el punto azul marca que te toca a ti.
function EstadoPedido({status,role,style}){
  const p=window.PASOS[status]||window.PASOS.draft;
  return <StatusPill status={role&&p.actua===role?"review":"draft"} label={p.label} style={style}/>;
}

function Dato({label,value,grande}){
  return <div style={{display:"flex",flexDirection:"column",gap:grande?4:2,minWidth:0}}>
    <span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-muted)"}}>{label}</span>
    <span style={{fontSize:grande?28:13,fontWeight:grande?700:600,letterSpacing:grande?"-.01em":"normal",lineHeight:1.2,
      color:value==="—"?"var(--text-muted)":"inherit"}}>{value}</span>
  </div>;
}

function Bloque({title,children,action}){
  return <Card padding="20px" overflow="visible" style={{display:"flex",flexDirection:"column",gap:14}}>
    {(title||action)&&<div style={{display:"flex",alignItems:"center",gap:8,flexWrap:"wrap"}}>
      <span style={{flex:1,fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>{title}</span>
      {action}
    </div>}
    {children}
  </Card>;
}

// Entrada del hilo: eventos en gris, comentarios en negro.
function Entrada({who,text,when,kind}){
  return <div style={{display:"flex",alignItems:"flex-start",gap:10,padding:"10px 0",borderBottom:"1px solid var(--gray-100)"}}>
    <Avatar name={who} size="sm"/>
    <div style={{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:2}}>
      <span style={{fontSize:13,color:kind==="event"?"var(--text-muted)":"var(--text-body)"}}>{text}</span>
      <span style={{fontSize:11,color:"var(--text-subtle)"}}>{who} · {when}</span>
    </div>
  </div>;
}

// El arte del pedido: el preview de su plantilla. Sin preview (o sobre mockup,
// que no existe aun) queda el hueco con su nota.
const arteDe=design=>(window.DATA.designs.find(d=>d.name===design)||{}).preview;
function Lienzo({label,note,height=240,aspect,src}){
  const caja=aspect?{aspectRatio:aspect,width:"100%"}:{height};
  return <div style={{...caja,background:"var(--gray-100)",borderRadius:8,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",
    gap:8,padding:16,boxSizing:"border-box",textAlign:"center",minWidth:0}}>
    {src&&<img src={src} alt="" style={{flex:1,minHeight:0,maxWidth:"100%",objectFit:"contain"}}/>}
    <span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-muted)"}}>{label}</span>
    {!src&&<span style={{fontSize:12,color:"var(--text-subtle)",maxWidth:280,lineHeight:1.5}}>{note}</span>}
  </div>;
}

// A quien se espera cuando la accion no es tuya. Null si te toca a ti o si ya no queda nada.
function esperaDe(o,role){
  const p=window.PASOS[o.status];
  // La unica espera real es la aprobacion del cliente. El Member conduce todo lo demas,
  // incluida la produccion: Bruce no es un cuello de botella en el flujo.
  if(p.actua==="viewer"&&role!=="viewer")return "Waiting on "+o.team+" to approve the design.";
  return null;
}
function Espera({order,role}){
  const texto=esperaDe(order,role);
  if(!texto)return null;
  return <div style={{display:"flex",alignItems:"flex-start",gap:8,fontSize:13,color:"var(--text-muted)"}}>
    <Icon name="clock" size={16} strokeColor="var(--text-muted)"/><span style={{flex:1}}>{texto}</span></div>;
}

// Las dos puertas (editor y Orders) abren este mismo dialogo y crean el mismo pedido.
function NuevoPedido({open,onClose,onCreate,design}){
  const teams=window.DATA.lockers.map(t=>t.name),designs=window.DATA.designs.map(d=>d.name),garments=Object.keys(window.DATA.precios.garment);
  const inicial=()=>({team:teams[0],design:design||designs[0],garment:garments[0]});
  const [f,setF]=React.useState(inicial);
  React.useEffect(()=>{if(open)setF(inicial())},[open,design]);
  const set=k=>e=>setF(x=>({...x,[k]:e.target.value}));
  return <Dialog open={open} onClose={onClose} title="New order" width={440}
    description={design?"Order "+design+" for a team.":"Pick the team and the design to order."}
    footer={<Button size="sm" onClick={()=>onCreate(f)}>Create order</Button>}>
    <div style={{display:"flex",flexDirection:"column",gap:14,marginTop:8}}>
      <Select label="Team" options={teams} value={f.team} onChange={set("team")}/>
      {!design&&<Select label="Design" options={designs} value={f.design} onChange={set("design")}/>}
      <Select label="Garment" options={garments} value={f.garment} onChange={set("garment")}/>
    </div>
  </Dialog>;
}

Object.assign(window,{EstadoPedido,Dato,Bloque,Entrada,Lienzo,arteDe,Espera,NuevoPedido});