// Ask Bruce: sube una imagen de referencia y muestra los disenos generados a
// partir de ella. Encabezado de equipo activo (ActiveTeamHeader) + carga de
// imagen; al cargar la imagen se entra directo a los resultados.
function StudioCard({src,go}){
  const [hover,setHover]=React.useState(false);
  return <button onClick={()=>go("builderEdit")} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
    style={{border:"var(--border-width-hairline) solid var(--border-hairline)",padding:0,cursor:"pointer",font:"inherit",
      textAlign:"left",background:"none",borderRadius:6,overflow:"hidden",position:"relative",
      transform:hover?"scale(1.02)":"scale(1)",transition:"transform .2s ease"}}>
    <div style={{aspectRatio:"1 / 1",background:"#fff",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"}}>
      <img src={src} alt="" style={{width:"100%",height:"100%",objectFit:"contain",padding:20,boxSizing:"border-box"}}/>
    </div>
    {hover&&<div style={{position:"absolute",inset:0,background:"rgba(0,0,0,.04)"}}/>}
  </button>;
}

function AIStudioScreen({go}){
  const {isMobile}=useBreakpoint();
  const [img,setImg]=React.useState(null);
  const [created,setCreated]=React.useState(false);
  const inputRef=React.useRef(null);
  const pad=isMobile?"0 16px":"0 48px";

  // Al cargar la imagen se entra directo a la ventana de trabajo (sin boton Create).
  const cargar=file=>{if(!file)return;const r=new FileReader();r.onload=e=>{setImg(e.target.result);setCreated(true)};r.readAsDataURL(file)};
  const onFile=e=>cargar(e.target.files&&e.target.files[0]);
  const onDrop=e=>{e.preventDefault();cargar(e.dataTransfer.files&&e.dataTransfer.files[0])};

  return <div style={{minHeight:"100%",background:"var(--bruce-white)",display:"flex",flexDirection:"column",gap:32,paddingBottom:48}}>
    <ActiveTeamHeader/>

    <div style={{padding:pad,display:"flex",flexDirection:"column",gap:16,alignItems:"flex-start"}}>
      <input ref={inputRef} type="file" accept="image/*" onChange={onFile} style={{display:"none"}}/>
      <button onClick={()=>inputRef.current&&inputRef.current.click()} onDragOver={e=>e.preventDefault()} onDrop={onDrop}
        style={{width:"100%",maxWidth:360,aspectRatio:"4 / 3",background:"var(--surface-sunken)",borderRadius:10,cursor:"pointer",font:"inherit",
          border:img?"var(--border-width-hairline) solid var(--border-hairline)":"2px dashed var(--border-hairline)",
          display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:12,overflow:"hidden",padding:img?0:24,boxSizing:"border-box"}}>
        {img
          ?<img src={img} alt="" style={{width:"100%",height:"100%",objectFit:"contain"}}/>
          :<React.Fragment>
            <Icon name="image" size={36} strokeColor="var(--text-muted)"/>
            <div style={{fontSize:14,fontWeight:700,color:"var(--text-body)"}}>Click to upload an image</div>
            <div style={{fontSize:12,color:"var(--text-subtle)"}}>or drag and drop · PNG, JPG</div>
          </React.Fragment>}
      </button>
    </div>

    {created&&img&&<div style={{padding:pad}}>
      <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:16,flexWrap:"wrap"}}>
        <span style={{fontSize:17,fontWeight:700,color:"var(--text-body)"}}>Generated designs</span>
        <div style={{flex:1}}/>
        <Button size="sm" variant="outline" onClick={()=>{setImg(null);setCreated(false)}}>New image</Button>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:16}}>
        {[0,1,2,3,4,5,6,7].map(i=><StudioCard key={i} src={img} go={go}/>)}
      </div>
    </div>}
  </div>;
}
window.AIStudioScreen=AIStudioScreen;