const SIZES=["YS","YM","YL","S","M","L","XL","2XL"];

// Lo que ve el cliente del Member: el diseno, su decision y su sitio en el roster.
// Sin sidebar, sin precios, sin pedidos. Es lo que abre el enlace de Share.
function ProofView({order:o,orders,onPick,decidir,addPlayer,comentar,exit,exitLabel}){
  const {isDesktop}=useBreakpoint();
  const O=window.ORDENES;
  const viewer=(window.DATA.users.find(u=>u.role==="Viewer")||{name:"Customer"}).name;
  const [nota,setNota]=React.useState("");
  const [f,setF]=React.useState({name:"",num:"",size:"M",qty:1});
  const [anadido,setAnadido]=React.useState("");
  const [verLista,setVerLista]=React.useState(false);
  const add=()=>{if(!f.name.trim())return;addPlayer(o.id,{...f,name:f.name.trim(),by:"viewer"});setAnadido(f.name.trim());setF({name:"",num:"",size:"M",qty:1})};
  const postear=()=>{if(!nota.trim())return;comentar(o.id,nota.trim(),viewer);setNota("")};
  const decidirCon=estado=>decidir(o.id,estado);
  const n=O.unidades(o.roster);
  const cerrado=["closed","quoted","ordered","production","shipped"].includes(o.status);
  const micro={fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-muted)"};

  return <div style={{minHeight:"100dvh",background:"var(--surface-sunken)",display:"flex",flexDirection:"column"}}>
    {/* El hueco izquierdo del Toolbar no encoge (min-width:auto): el equipo y la prenda van en la cabecera, no aqui. */}
    <Toolbar left={<span style={{fontSize:16,fontWeight:800,letterSpacing:"-.02em"}}>BRUCE</span>}
      right={<Button size="sm" variant="outline" onClick={exit}>{exitLabel}</Button>}/>
    <div style={{padding:isDesktop?"24px 32px":16,display:"flex",flexDirection:"column",gap:20,maxWidth:1100,width:"100%",margin:"0 auto",boxSizing:"border-box"}}>
      {orders&&orders.length>1&&<Tabs tabs={orders.map(x=>"Order "+x.id)} value={"Order "+o.id} onChange={t=>onPick(t.replace("Order ",""))}/>}
      <div style={{display:"flex",flexDirection:"column",gap:4}}>
        <span style={{fontSize:13,color:"var(--text-muted)"}}>{o.team} · {o.garment} · {o.fabric} · {o.decoration}</span>
        <div style={{display:"flex",alignItems:"baseline",gap:12,flexWrap:"wrap"}}>
          <span style={{fontSize:20,fontWeight:700,textTransform:"uppercase",letterSpacing:"-.01em"}}>{o.design}</span>
          <span style={micro}>{O.cliente(o.status)}{o.status==="production"&&o.due?" · ships by "+o.due:""}</span>
        </div>
      </div>
      <div style={{display:"flex",gap:20,alignItems:"flex-start",flexWrap:"wrap"}}>
        <div style={{flex:isDesktop?"2 1 420px":"1 1 100%",minWidth:0,display:"flex",flexDirection:"column",gap:12}}>
          <Lienzo label="Flat artwork" src={arteDe(o.design)} note={o.design+" · the approved art renders here."} height={isDesktop?320:220}/>
          <Lienzo label="On the field" note="Players wearing the kit render here." height={isDesktop?320:220}/>
        </div>
        <div style={{flex:isDesktop?"1 1 320px":"1 1 100%",minWidth:0,display:"flex",flexDirection:"column",gap:16}}>

          {o.status==="proof"&&<Bloque title="Your decision">
            <span style={{fontSize:13,color:"var(--text-muted)"}}>Approve to start collecting the roster, or request changes and tell the designer what to fix in the comments below.</span>
            <Button fullWidth onClick={()=>decidirCon("open")}>Approve the design</Button>
            <Button fullWidth variant="outline" onClick={()=>decidirCon("changes")}>Request changes</Button>
          </Bloque>}

          {o.status==="changes"&&<Bloque title="Changes requested">
            <span style={{fontSize:13,color:"var(--text-muted)"}}>Thanks. {o.owner} is updating the design and will send an updated version.</span>
          </Bloque>}

          {(!cerrado||o.roster.length>0)&&<Bloque title={cerrado?"Roster closed":"Add your players"} action={(!cerrado&&o.closes)?<span style={micro}>Closes {o.closes}</span>:null}>
            {!cerrado&&<>
              {anadido&&<div style={{display:"flex",alignItems:"center",gap:8,fontSize:13}}>
                <Icon name="circle-check" size={16} strokeColor="var(--bruce-black)"/><span style={{flex:1}}>{anadido} is in. Add another?</span></div>}
              <Input label="Player name" value={f.name} onChange={e=>setF({...f,name:e.target.value})} placeholder="Juan Perez"/>
              <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
                <Input label="Number" value={f.num} onChange={e=>setF({...f,num:e.target.value})} placeholder="25" wrapperStyle={{flex:"1 1 90px",minWidth:0}}/>
                <Select label="Size" options={SIZES} value={f.size} onChange={e=>setF({...f,size:e.target.value})} wrapperStyle={{flex:"1 1 110px",minWidth:0}}/>
                <NumberInput label="Quantity" value={f.qty} min={1} onChange={v=>setF({...f,qty:v})} width="auto" style={{flex:"1 1 110px",minWidth:0}}/>
              </div>
              <Button fullWidth disabled={!f.name.trim()} onClick={add}>Add player</Button>
            </>}
            {o.roster.length>0&&<div style={{display:"flex",flexDirection:"column",gap:10,borderTop:!cerrado?"1px solid var(--border-hairline)":"none",paddingTop:!cerrado?12:0}}>
              <button type="button" onClick={()=>setVerLista(v=>!v)} style={{display:"flex",alignItems:"center",gap:8,border:"none",background:"none",padding:0,cursor:"pointer",font:"inherit",textAlign:"left",width:"100%"}}>
                <Icon name="users" size={16} strokeColor="var(--text-muted)"/>
                <span style={{flex:1,fontSize:13,color:"var(--text-muted)"}}>{cerrado?n+" players in · thanks!":n+" players in"}</span>
                <Icon name={verLista?"chevron-up":"chevron-down"} size={16} strokeColor="var(--text-muted)"/>
              </button>
              {verLista&&<div style={{display:"flex",flexWrap:"wrap",gap:8}}>{o.roster.map((r,i)=>
                <span key={i} style={{fontSize:12,padding:"4px 8px",border:"1px solid var(--border-hairline)",borderRadius:4}}>{r.name}{r.num?" · #"+r.num:""}</span>)}</div>}
            </div>}
            {!cerrado&&o.roster.length===0&&<span style={{fontSize:12,color:"var(--text-subtle)"}}>No players yet.</span>}
          </Bloque>}

          <Bloque title="Comments">
            <Textarea label="Add a comment" rows={3} value={nota} onChange={e=>setNota(e.target.value)} placeholder="Anything the designer should know."/>
            <div><Button size="sm" variant="outline" disabled={!nota.trim()} onClick={postear}>Post comment</Button></div>
            <div>{o.log.map((e,i)=><Entrada key={i} {...e}/>)}</div>
          </Bloque>
        </div>
      </div>
    </div>
  </div>;
}
window.ProofView=ProofView;