function Row({label,value,action}){
  return <div style={{display:"flex",alignItems:"center",gap:16,padding:"14px 0",borderBottom:"1px solid var(--gray-100)",flexWrap:"wrap"}}>
    <span style={{width:170,flex:"0 1 auto",fontSize:12,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em",color:"var(--text-muted)"}}>{label}</span>
    <span style={{flex:1,fontSize:14}}>{value}</span>
    {action}
  </div>;
}

// La foto no es un boton aparte: la accion vive sobre el avatar, que es el
// unico sitio donde el resultado se ve. El distintivo se queda visible porque
// en tactil no hay hover que lo revele.
function Meta({label,value}){
  return <div style={{display:"flex",flexDirection:"column",gap:4,minWidth:0}}>
    <span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-muted)"}}>{label}</span>
    <span style={{fontSize:14,whiteSpace:"nowrap"}}>{value}</span>
  </div>;
}

function PhotoPicker({name}){
  const [src,setSrc]=React.useState("");
  const [on,setOn]=React.useState(false);
  const file=React.useRef(null);
  const pick=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;
    const r=new FileReader();r.onload=()=>setSrc(String(r.result));r.readAsDataURL(f);e.target.value=""};
  return <span style={{position:"relative",flex:"0 0 auto",lineHeight:0}}>
    <button type="button" aria-label={src?"Replace photo":"Add photo"} onClick={()=>file.current.click()}
      onMouseEnter={()=>setOn(true)} onMouseLeave={()=>setOn(false)}
      onFocus={()=>setOn(true)} onBlur={()=>setOn(false)}
      style={{position:"relative",display:"block",padding:0,border:"none",background:"none",
        borderRadius:"var(--radius-circle)",cursor:"pointer"}}>
      <Avatar name={name} src={src||undefined} size={72}/>
      <span aria-hidden style={{position:"absolute",inset:0,borderRadius:"var(--radius-circle)",
        background:"var(--bruce-black)",opacity:on?.3:0,
        transition:"opacity var(--duration-base) var(--ease-standard)"}}/>
      <span aria-hidden style={{position:"absolute",right:-2,bottom:-2,width:26,height:26,
        borderRadius:"var(--radius-circle)",display:"flex",alignItems:"center",justifyContent:"center",
        background:on?"var(--bruce-black)":"var(--bruce-white)",
        border:"var(--border-width-hairline) solid var(--border-hairline)",boxShadow:"var(--shadow-sm)",
        transition:"background var(--duration-base) var(--ease-standard)"}}>
        <Icon name="camera" size={13} strokeColor={on?"var(--bruce-white)":"var(--bruce-black)"}/>
      </span>
    </button>
    <input ref={file} type="file" accept="image/*" onChange={pick} style={{display:"none"}}/>
  </span>;
}

function ProfileScreen({go}){
  const [tab,setTab]=React.useState("Profile");
  const [saved,setSaved]=React.useState(false);
  return <div style={{display:"flex",flexDirection:"column",gap:20,maxWidth:900,margin:"0 auto"}}>
    <Card padding="24px" style={{display:"flex",alignItems:"center",gap:20,flexWrap:"wrap"}}>
      <PhotoPicker name="Ana Ruiz"/>
      <div style={{display:"flex",flexDirection:"column",alignItems:"flex-start",gap:4,minWidth:0}}>
        <div style={{fontSize:22,fontWeight:700,textTransform:"uppercase",letterSpacing:"-.01em"}}>Ana Ruiz</div>
        <div style={{fontSize:14,color:"var(--text-muted)"}}>ana@northsidesports.com</div>
      </div>
      <span style={{flex:1,minWidth:0}}/>
      <div style={{display:"flex",gap:32,flexWrap:"wrap"}}>
        <Meta label="Role" value="Member"/>
        <Meta label="Plan" value="Bruce Premium"/>
      </div>
    </Card>

    <div style={{overflowX:"auto"}}><Tabs tabs={["Profile","Subscription","Notifications","Security"]} value={tab} onChange={setTab}/></div>

    {tab==="Profile"&&<Card padding="24px" style={{display:"flex",flexDirection:"column",gap:20}}>
      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(220px,1fr))",gap:16}}>
        <Input label="Full name" defaultValue="Ana Ruiz"/>
        <Input label="Work email" defaultValue="ana@northsidesports.com"/>
        <Input label="Phone" defaultValue="+1 503 555 0114"/>
      </div>
      <Row label="Role" value="Member" action={<Button size="sm" variant="ghost">Request change</Button>}/>
      <Row label="Teams" value="6 teams managed" action={<Button size="sm" variant="ghost">Open team manager</Button>}/>
      <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
        <Button onClick={()=>setSaved(true)}>Save changes</Button>
        <Button variant="ghost">Cancel</Button>
      </div>
      {saved&&<Toast tone="dark" title="Saved" message="Your profile is up to date." onDismiss={()=>setSaved(false)} style={{minWidth:0}}/>}
    </Card>}

    {tab==="Subscription"&&<div style={{display:"flex",gap:16,alignItems:"flex-start",flexWrap:"wrap"}}>
      <Card padding="24px" style={{flex:"2 1 320px",minWidth:0,display:"flex",flexDirection:"column",gap:14}}>
        <span style={{fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>Bruce Premium</span>
        <Row label="Renews" value="Sep 30, 2026 · billed annually"/>
        <Row label="Payment method" value="Visa ending 4417"/>
        <Row label="Plans available" value={window.DATA.plans.map(p=>p.name).join(" · ")}/>
        <Row label="Billing contact" value="billing@northsidesports.com"/>
        <Row label="Invoices" action={<Button size="sm" variant="ghost">Download</Button>}/>
        <div style={{display:"flex",gap:12,marginTop:6,flexWrap:"wrap"}}>
          <Button>Manage billing account</Button>
          <Button variant="outline">Change plan</Button>
        </div>
      </Card>
      <Card padding="24px" style={{flex:"1 1 220px",minWidth:0,display:"flex",flexDirection:"column",gap:12}}>
        <span style={{fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>This period</span>
        {[["Templates built","48"],["Downloads","213"],["AI designs","36"],["Storage","12.4 GB of 100 GB"]].map(([k,v])=>
          <div key={k} style={{display:"flex",justifyContent:"space-between",fontSize:13}}><span style={{color:"var(--text-muted)"}}>{k}</span><strong>{v}</strong></div>)}
      </Card>
    </div>}

    {tab==="Notifications"&&<Card padding="24px" style={{display:"flex",flexDirection:"column",gap:14}}>
      {["Proof approved or rejected","Order status changes","New template releases","Weekly summary"].map((n,i)=>
        <Switch key={n} label={n} defaultChecked={i<2}/>)}
    </Card>}

    {tab==="Security"&&<Card padding="24px" style={{display:"flex",flexDirection:"column",gap:20}}>
      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(220px,1fr))",gap:16}}>
        <Input label="Current password" type="password" defaultValue="........"/>
        <Input label="New password" type="password"/>
      </div>
      <Switch defaultChecked label="Two-factor authentication"/>
      <Row label="Active sessions" value="3 devices" action={<Button size="sm" variant="ghost">Sign out all</Button>}/>
      <Button variant="outline" style={{alignSelf:"flex-start"}}>Update password</Button>
    </Card>}
  </div>;
}
window.ProfileScreen=ProfileScreen;