const TILE=150;

function PreviewTile({label}){
  return <div style={{aspectRatio:"1 / 1",background:"var(--surface-sunken)",borderRadius:4,display:"flex",alignItems:"center",
    justifyContent:"center",textAlign:"center",padding:16,fontSize:11,color:"var(--text-subtle)",lineHeight:1.5}}>{label}</div>;
}

function CreateCustomTeam({open,onClose}){
  const [school,setSchool]=React.useState("Camelot High School");
  const [mascot,setMascot]=React.useState("Dragons");
  const [colors,setColors]=React.useState(["#1d4289","#f1c400","#ffffff"]);
  // Este modal no usa Dialog por su ancho, pero se cierra igual que los demas.
  React.useEffect(()=>{
    if(!open)return;
    const esc=e=>{if(e.key==="Escape")onClose()};
    document.addEventListener("keydown",esc);
    return ()=>document.removeEventListener("keydown",esc);
  },[open,onClose]);
  if(!open)return null;
  return <div style={{position:"fixed",inset:0,zIndex:60,background:"var(--overlay-scrim)",backdropFilter:"var(--blur-panel)",
    display:"flex",alignItems:"center",justifyContent:"center",padding:24,fontFamily:"var(--font-core)"}} onClick={onClose}>
    <div onClick={e=>e.stopPropagation()} style={{width:1100,maxWidth:"100%",maxHeight:"92vh",overflowY:"auto",
      background:"var(--bruce-white)",borderRadius:8,boxShadow:"var(--shadow-lg)"}}>

      <header style={{display:"flex",alignItems:"center",gap:20,background:"var(--bruce-black)",color:"#fff",padding:"18px 24px"}}>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:18,fontWeight:700,textTransform:"uppercase",letterSpacing:"-.01em"}}>{school||"School name"}</div>
          <div style={{fontSize:13,color:"var(--gray-400)",textTransform:"uppercase",letterSpacing:".06em"}}>{mascot||"Mascot"}</div>
        </div>
        <IconButton label="Close" variant="ghost" onClick={onClose} style={{color:"#fff"}}><Icon name="x"/></IconButton>
      </header>

      <div style={{padding:"28px 32px 24px"}}>
        <h2 style={{margin:"0 0 24px",fontSize:24,fontWeight:700,textTransform:"uppercase",letterSpacing:"-.01em",textAlign:"center"}}>Create custom team</h2>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(300px,1fr))",gap:32,alignItems:"start"}}>
          <div style={{display:"flex",flexDirection:"column",gap:20}}>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(160px,1fr))",gap:16}}>
              <Input label="School name" value={school} onChange={e=>setSchool(e.target.value)}/>
              <Input label="Short team name" placeholder="Camelot"/>
              <Input label="Mascot name" value={mascot} onChange={e=>setMascot(e.target.value)}/>
              <Input label="School initials" placeholder="CHS"/>
            </div>
            <ColorField label="Team colors" value={colors[0]} swatches={colors} onChange={(c,i)=>setColors(colors.map((x,j)=>j===i?c:x))}/>
            <div style={{display:"flex",flexDirection:"column",gap:10}}>
              <span style={{fontSize:12,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>Graphics</span>
              <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))",gap:16,alignItems:"stretch"}}>
                <div style={{display:"flex",flexDirection:"column",gap:8}}>
                  <div style={{position:"relative",height:TILE,border:"2px solid var(--bruce-blue)",borderRadius:8,boxSizing:"border-box",
                    overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center"}}>
                    <img src="../../assets/mascots/bulldogs-mascot.png" alt="Default mascot" style={{width:"100%",height:"100%",objectFit:"contain",padding:8,boxSizing:"border-box"}}/>
                    <span style={{position:"absolute",top:-8,right:-8}}>
                      <IconButton label="Remove graphic" variant="dark" size="sm" shape="circle"><Icon name="x" size={14}/></IconButton></span>
                  </div>
                  <div style={{fontSize:11,color:"var(--text-muted)"}}>Default graphic</div>
                </div>
                <div style={{display:"flex",flexDirection:"column",gap:8}}>
                  <button style={{width:"100%",height:TILE,border:"1px solid var(--border-hairline)",borderRadius:8,boxSizing:"border-box",
                    background:"var(--surface-sunken)",cursor:"pointer",display:"flex",flexDirection:"column",alignItems:"center",
                    justifyContent:"center",gap:8,font:"inherit"}}>
                    <Icon name="images" size={22} strokeColor="var(--text-muted)"/>
                    <span style={{fontSize:12,fontWeight:600}}>Add from library</span>
                  </button>
                  <div style={{fontSize:11,color:"var(--text-muted)"}}>Team library</div>
                </div>
                <div style={{display:"flex",flexDirection:"column",gap:8}}>
                  <UploadBox height={TILE} vectorize={false} title="Drag image here" accept="SVG, PNG"/>
                  <div style={{fontSize:11,color:"var(--text-muted)"}}>Vector SVG or 500×500+</div>
                </div>
              </div>
            </div>
          </div>

          <div style={{display:"flex",flexDirection:"column",gap:12}}>
            <span style={{fontSize:12,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>Live preview</span>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(160px,1fr))",gap:12}}>
              <img src="../../assets/templates/football-champions-helmet.png" alt="Stacked lockup" style={{width:"100%",aspectRatio:"1 / 1",objectFit:"contain",background:"var(--surface-sunken)",borderRadius:4}}/>
              <img src="../../assets/templates/conference-champions-stacked.png" alt="Crest lockup" style={{width:"100%",aspectRatio:"1 / 1",objectFit:"contain",background:"var(--surface-sunken)",borderRadius:4}}/>
              <img src="../../assets/templates/flag-football-badge.png" alt="Game day" style={{width:"100%",aspectRatio:"1 / 1",objectFit:"contain",background:"var(--surface-sunken)",borderRadius:4}}/>
              <img src="../../assets/templates/lock-it-in.png" alt="Wordmark" style={{width:"100%",aspectRatio:"1 / 1",objectFit:"contain",background:"var(--surface-sunken)",borderRadius:4}}/>
            </div>
          </div>
        </div>
      </div>

      <footer style={{display:"flex",alignItems:"center",gap:12,padding:"16px 32px",borderTop:"1px solid var(--border-hairline)",background:"var(--surface-sunken)"}}>
        <div style={{flex:1}}></div>
        <Button size="sm" onClick={onClose}>Apply</Button>
      </footer>
    </div>
  </div>;
}
window.CreateCustomTeam=CreateCustomTeam;