/* Curio — auth & onboarding. window.AuthFlow, window.OnboardFlow */
const {useState:useAuthState} = React;

function Logo({size=40,light=false,wordmark=true}){
  return <span style={{display:'inline-flex',alignItems:'center',gap:10}}>
    <img src="img/logo.svg" alt="" style={{width:size,height:size,borderRadius:size*0.22,display:'block',boxShadow:SHmd,flexShrink:0}}/>
    {wordmark&&<span style={{fontFamily:FW,fontWeight:400,fontSize:size*0.92,letterSpacing:'0',color:light?'#FFFFFF':T.ink}}>Curio</span>}
  </span>;
}

function LangToggle(){
  const{lang,setLang}=useApp();
  return <div role="group" aria-label="Language" style={{display:'inline-flex',background:'rgba(255,255,255,.18)',border:'1px solid rgba(255,255,255,.3)',borderRadius:100,padding:3,backdropFilter:'blur(8px)'}}>
    {['en','de'].map(l=>
      <button key={l} type="button" onClick={()=>setLang(l)} style={{minWidth:42,minHeight:34,padding:'6px 12px',borderRadius:100,border:'none',cursor:'pointer',background:lang===l?'#FFFFFF':'transparent',color:lang===l?T.text:'rgba(255,255,255,.9)',fontSize:13,fontWeight:800,fontFamily:F}}>{l.toUpperCase()}</button>
    )}
  </div>;
}

/* ── AUTH ── */
function AuthFlow(){
  const{t,lang,actions}=useApp();
  const[screen,setScreen]=useAuthState('intro');
  const[name,setName]=useAuthState('');
  const[email,setEmail]=useAuthState('');
  const[pass,setPass]=useAuthState('');
  const[err,setErr]=useAuthState('');
  const[showInstall,setShowInstall]=useAuthState(false);

  React.useEffect(()=>{
    if(screen!=='intro') return;
    const tm=setTimeout(()=>setScreen('splash'),2000);
    return ()=>clearTimeout(tm);
  },[screen]);

  React.useEffect(()=>{
    if(screen!=='splash'){ setShowInstall(false); return; }
    const ci=window.CurioInstall;
    if(!ci||ci.isStandalone()||ci.isDismissed()) return;
    const tm=setTimeout(()=>setShowInstall(true),400);
    return ()=>clearTimeout(tm);
  },[screen]);

  function doSignup(){
    if(!name.trim()){setErr('name');return;}
    const r=actions.signup({name,email,pass});
    if(r.error==='exists'){setErr('exists');return;}
  }
  function doLogin(){
    const r=actions.login(email,pass);
    if(r.error){setErr(r.error);return;}
  }

  /* brand splash — logo + app name, auto-advances */
  if(screen==='intro'){
    return <button type="button" onClick={()=>setScreen('splash')} aria-label={t('getStarted')} className="cu-fill" style={{position:'relative',width:'100%',background:'#FFFFFF',border:'none',cursor:'pointer',display:'flex',flexDirection:'column',alignItems:'stretch',justifyContent:'flex-start',overflow:'hidden',padding:0}}>
      
      <div className="cu-pop" style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
        <img src="img/logo.svg" alt="" style={{width:132,height:132,borderRadius:30,boxShadow:SHmd,display:'block'}}/>
        <span style={{fontFamily:FW,fontWeight:400,fontSize:fz(40),color:T.ink,marginTop:26,lineHeight:1}}>Curio</span>
        <span style={{fontFamily:F,fontWeight:600,fontSize:fz(13),color:T.muted,marginTop:8,letterSpacing:'.3px'}}>{t('taglineSub')}</span>
      </div>
      <span style={{position:'absolute',bottom:38,left:0,right:0,textAlign:'center',fontFamily:F,fontSize:fz(12),color:T.muted}}>{t('appName')}</span>
    </button>;
  }

  if(screen==='splash'){
    return <div className="cu-fill" style={{position:'relative',background:GRAD,display:'flex',flexDirection:'column',overflow:'hidden'}}>
      <Confetti n={0}/>
      <div aria-hidden="true" style={{position:'absolute',top:-120,right:-80,width:340,height:340,borderRadius:'50%',background:'radial-gradient(circle,rgba(255,255,255,.32),transparent 70%)'}}></div>
      <div aria-hidden="true" style={{position:'absolute',bottom:120,left:-100,width:300,height:300,borderRadius:'50%',background:'radial-gradient(circle,rgba(255,200,90,.3),transparent 70%)'}}></div>
      
      <div style={{padding:'18px 26px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <Logo size={34} light/>
        <LangToggle/>
      </div>
      <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',padding:'0 28px'}}>
        <div className="cu-rise">
          <h1 style={{color:'#FFFFFF',fontFamily:FD,fontSize:fz(42),fontWeight:800,letterSpacing:'-1.4px',lineHeight:1.05,margin:'0 0 16px',textWrap:'balance'}}>{t('tagline')}</h1>
          <p style={{color:'rgba(255,255,255,.9)',fontSize:fz(16),fontFamily:F,lineHeight:1.55,margin:0,maxWidth:320}}>{t('taglineSub')}</p>
        </div>
      </div>
      <div style={{padding:'0 26px 38px',display:'flex',flexDirection:'column',gap:11}}>
        <Btn label={t('getStarted')} variant="onGradient" onClick={()=>{setScreen('signup');setErr('');}}/>
        <Btn label={t('logIn')} variant="ghost" onClick={()=>{setScreen('login');setErr('');}} style={{color:'#FFFFFF',border:'1.5px solid rgba(255,255,255,.4)'}}/>
        <button type="button" onClick={()=>actions.guest()} style={{background:'transparent',border:'none',color:'rgba(255,255,255,.85)',fontSize:fz(13.5),fontWeight:600,fontFamily:F,cursor:'pointer',padding:8,marginTop:2}}>{t('continueGuest')}</button>
      </div>
      <InstallPrompt lang={lang} visible={showInstall} onClose={()=>setShowInstall(false)}/>
    </div>;
  }

  const isSignup=screen==='signup';
  return <div className="cu-fill" style={{background:T.bg,display:'flex',flexDirection:'column',overflowY:'auto'}}>
    
    <div style={{padding:'6px 14px 0'}}>
      <button type="button" onClick={()=>{setScreen('splash');setErr('');}} aria-label="Back" className="cu-press" style={{width:44,height:44,borderRadius:22,background:'transparent',border:'none',color:T.text,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center',marginLeft:-8}}><Ic k="arrowL" size={24}/></button>
    </div>
    <div style={{padding:'10px 28px 28px',flex:1}}>
      <Logo size={34}/>
      <h1 style={{color:T.text,fontFamily:FD,fontSize:fz(30),fontWeight:800,letterSpacing:'-0.8px',margin:'24px 0 6px'}}>{isSignup?t('createAccount'):t('welcomeBack')}</h1>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,margin:'0 0 26px'}}>{isSignup?t('taglineSub'):t('tagline')}</p>
      {isSignup&&<Field label={t('yourName')} id="su-name" value={name} onChange={setName} placeholder="Mara" icon="user"/>}
      <Field label={t('email')} id="au-email" type="email" value={email} onChange={setEmail} placeholder="you@email.com"/>
      <Field label={t('password')} id="au-pass" type="password" value={pass} onChange={setPass} placeholder="••••••••" icon="lock"/>
      {err&&<p role="alert" style={{color:'#D63A4A',fontSize:fz(13),fontFamily:F,margin:'-4px 0 16px',fontWeight:600}}>
        {err==='exists'?'That email is already registered. Try logging in.':err==='nouser'?'No account with that email yet.':err==='badpass'?'Wrong password. Try again.':err==='name'?'Please enter your name.':'Something went wrong.'}
      </p>}
      <Gap n={6}/>
      <Btn label={isSignup?t('createAccount'):t('logIn')} onClick={isSignup?doSignup:doLogin}/>
      <Gap n={18}/>
      <p style={{textAlign:'center',color:T.muted,fontSize:fz(13.5),fontFamily:F}}>
        {isSignup?t('alreadyMember'):t('noAccount')}{' '}
        <button type="button" onClick={()=>{setScreen(isSignup?'login':'signup');setErr('');}} style={{background:'transparent',border:'none',color:'var(--ink-deep)',fontWeight:800,fontFamily:F,fontSize:fz(13.5),cursor:'pointer',padding:0}}>{isSignup?t('logIn'):t('signUp')}</button>
      </p>
    </div>
  </div>;
}

/* ── ONBOARDING ── */
function OnboardFlow(){
  const{t,lang,state,actions}=useApp();
  const[step,setStep]=useAuthState(0);
  const[name,setName]=useAuthState(state.name||'');
  const[avatar,setAvatar]=useAuthState(state.avatar||0);
  const[photo,setPhoto]=useAuthState(state.photo||'');
  const fileRef = React.useRef(null);
  const[interests,setInterests]=useAuthState(state.interests||[]);
  const[modes,setModes]=useAuthState(state.modes||['friends']);
  const[meetEnabled,setMeetEnabled]=useAuthState(!!state.meetEnabled);
  const[meetLooking,setMeetLooking]=useAuthState(state.meetLooking||'friends');
  const[busy,setBusy]=useAuthState(false);

  const MODES=[
    {id:'family',emoji:'👨‍👩‍👧',k:'mFamily',d:'mFamilyD'},
    {id:'friends',emoji:'🎉',k:'mFriends',d:'mFriendsD'},
    {id:'solo',emoji:'🧭',k:'mSolo',d:'mSoloD'},
  ];
  const LOOK=[
    {id:'friends',emoji:'🤝',k:'lookFriends',d:'lookFriendsD'},
    {id:'date',emoji:'💘',k:'lookDate',d:'lookDateD'},
    {id:'both',emoji:'✨',k:'lookBoth',d:'lookBothD'},
  ];
  const toggle=(arr,set,v)=>set(arr.includes(v)?arr.filter(x=>x!==v):[...arr,v]);

  function finish(){
    setBusy(true);
    setTimeout(()=>actions.completeOnboarding({avatar,interests,modes,meetEnabled,meetLooking,name:name.trim()||'Explorer',photo:photo||null}),1100);
  }

  const steps=[
    /* avatar */
    <div key="0">
      <h1 style={{color:T.text,fontFamily:FD,fontSize:fz(28),fontWeight:800,letterSpacing:'-0.7px',margin:'0 0 6px'}}>{t('setupProfile')}</h1>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,margin:'0 0 24px'}}>{t('setupProfileSub')}</p>
      <div style={{display:'flex',justifyContent:'center',marginBottom:20}}>
        <button type="button" onClick={()=>fileRef.current&&fileRef.current.click()} className="cu-press" style={{border:'none',background:'transparent',padding:0,cursor:'pointer',position:'relative'}} aria-label={lang==='de'?'Foto hochladen':'Upload photo'}>
          <Av n={name||state.name||'You'} ci={avatar} sz={120} photo={photo}/>
          <span style={{position:'absolute',bottom:4,right:4,width:34,height:34,borderRadius:'50%',background:'var(--ink)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:SHmd,border:'2px solid #fff'}}><Ic k="camera" size={16}/></span>
        </button>
        <input ref={fileRef} type="file" accept="image/*" style={{display:'none'}} onChange={e=>{const f=e.target.files&&e.target.files[0]; if(!f)return; const r=new FileReader(); r.onload=()=>setPhoto(r.result); r.readAsDataURL(f); e.target.value='';}}/>
      </div>
      <div style={{marginBottom:22}}>
        <Field label={lang==='de'?'Dein Name':'Your name'} value={name} onChange={setName} placeholder={lang==='de'?'z. B. Sara':'e.g. Sara'} autoComplete="name"/>
      </div>
      <p style={{color:T.muted,fontSize:fz(12.5),fontWeight:700,fontFamily:F,textTransform:'uppercase',letterSpacing:'.4px',margin:'0 0 12px'}}>{lang==='de'?'Oder Farbe wählen':'Or pick a colour'}</p>
      <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:10}}>
        {AV_GRADS.map((g,i)=>
          <button key={i} type="button" onClick={()=>setAvatar(i)} aria-label={`Avatar ${i+1}`} className="cu-press" style={{aspectRatio:'1',borderRadius:'50%',border:avatar===i?`3px solid var(--ink)`:`2px solid ${T.line}`,background:`linear-gradient(135deg,${g[0]},${g[1]})`,cursor:'pointer',padding:0}}></button>
        )}
      </div>
    </div>,
    /* interests */
    <div key="1">
      <h1 style={{color:T.text,fontFamily:FD,fontSize:fz(28),fontWeight:800,letterSpacing:'-0.7px',margin:'0 0 6px'}}>{t('whatInterests')}</h1>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,margin:'0 0 24px'}}>{t('interestsSub')}</p>
      <div style={{display:'flex',flexWrap:'wrap',gap:10}}>
        {window.DATA.INTERESTS.map(it=>{
          const on=interests.includes(it.id);
          return <button key={it.id} type="button" onClick={()=>toggle(interests,setInterests,it.id)} className="cu-press" style={{display:'inline-flex',alignItems:'center',gap:8,padding:'12px 16px',borderRadius:100,border:on?`2px solid var(--ink)`:`1.5px solid ${T.lineMd}`,background:on?tint(10):T.card,color:on?'var(--ink-deep)':T.text,fontSize:fz(14.5),fontWeight:700,fontFamily:F,cursor:'pointer',boxShadow:SH}}>
            <span style={{fontSize:18}}>{it.icon}</span>{it[lang]||it.en}
          </button>;
        })}
      </div>
    </div>,
    /* modes */
    <div key="2">
      <h1 style={{color:T.text,fontFamily:FD,fontSize:fz(28),fontWeight:800,letterSpacing:'-0.7px',margin:'0 0 6px'}}>{t('whoWith')}</h1>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,margin:'0 0 24px'}}>{t('whoWithSub')}</p>
      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {MODES.map(m=><ListRow key={m.id} emoji={m.emoji} title={t(m.k)} sub={t(m.d)} selected={modes.includes(m.id)} onClick={()=>toggle(modes,setModes,m.id)}
          trailing={<span aria-hidden="true" style={{width:24,height:24,borderRadius:8,border:modes.includes(m.id)?'none':`2px solid ${T.lineMd}`,background:modes.includes(m.id)?'var(--ink)':'transparent',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#FFFFFF',flexShrink:0}}>{modes.includes(m.id)&&<Ic k="check" size={15} stroke={3}/>}</span>}/>)}
      </div>
    </div>,
    /* meet opt-in */
    <div key="3">
      <h1 style={{color:T.text,fontFamily:FD,fontSize:fz(28),fontWeight:800,letterSpacing:'-0.7px',margin:'0 0 6px'}}>{t('meetTitle')}</h1>
      <p style={{color:T.muted,fontSize:fz(14),fontFamily:F,margin:'0 0 22px',lineHeight:1.55}}>{t('meetSub')}</p>
      <button type="button" role="switch" aria-checked={meetEnabled} onClick={()=>setMeetEnabled(v=>!v)} className="cu-press" style={{display:'flex',gap:13,alignItems:'center',width:'100%',textAlign:'left',padding:'16px',borderRadius:18,background:meetEnabled?tint(8):T.card,border:`1.5px solid ${meetEnabled?tint(42):'rgba(60,60,67,.16)'}`,boxShadow:SH,cursor:'pointer'}}>
        <span aria-hidden="true" style={{width:46,height:46,borderRadius:14,background:meetEnabled?GRAD:T.cardAlt,display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:22,flexShrink:0}}>👋</span>
        <span style={{flex:1,minWidth:0}}>
          <span style={{display:'block',color:T.text,fontSize:fz(15),fontWeight:800,fontFamily:F}}>{t('meetSetting')}</span>
          <span style={{display:'block',color:T.muted,fontSize:fz(12.5),fontFamily:F,marginTop:2}}>{t('meetOnNote')}</span>
        </span>
        <Switch checked={meetEnabled} decorative/>
      </button>
      {meetEnabled&&<div className="cu-rise" style={{marginTop:24}}>
        <h3 style={{color:T.text,fontSize:fz(16),fontWeight:800,fontFamily:F,margin:'0 0 4px'}}>{t('meetLookingQ')}</h3>
        <p style={{color:T.muted,fontSize:fz(13),fontFamily:F,margin:'0 0 14px',lineHeight:1.5}}>{t('meetLookingSub')}</p>
        <div role="radiogroup" style={{display:'flex',flexDirection:'column',gap:12}}>
          {LOOK.map(o=><ListRow key={o.id} role="radio" ariaChecked={meetLooking===o.id} emoji={o.emoji} title={t(o.k)} sub={t(o.d)} selected={meetLooking===o.id} onClick={()=>setMeetLooking(o.id)}
            trailing={<span aria-hidden="true" style={{width:22,height:22,borderRadius:'50%',border:meetLooking===o.id?'none':`2px solid #C7C7CC`,background:meetLooking===o.id?'var(--ink)':'transparent',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#fff',flexShrink:0}}>{meetLooking===o.id&&<Ic k="check" size={14} stroke={3}/>}</span>}/>)}
        </div>
      </div>}
    </div>,
  ];

  if(busy) return <div className="cu-fill" style={{background:T.bg,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:20}}>
    <span className="cu-spin" style={{width:46,height:46,borderRadius:'50%',border:`4px solid ${tint(22)}`,borderTopColor:'var(--ink)',display:'block'}}></span>
    <p style={{color:T.sub,fontSize:fz(15),fontWeight:700,fontFamily:F}}>{t('buildingProfile')}</p>
  </div>;

  const canNext = step===0?name.trim().length>0:step===1?interests.length>0:step===2?modes.length>0:true;
  return <StepShell label="Onboarding"
    header={<div style={{padding:'8px 24px 0',display:'flex',gap:6}}>
      {[0,1,2,3].map(i=><span key={i} style={{flex:1,height:5,borderRadius:5,background:i<=step?'var(--ink)':T.line,transition:'background .3s'}}></span>)}
    </div>}
    footer={<>
      {step>0&&<Btn label={t('back')} variant="secondary" full={false} onClick={()=>setStep(step-1)} style={{flex:1}}/>}
      <Btn label={step<3?t('next'):t('finishSetup')} disabled={!canNext} onClick={()=>step<3?setStep(step+1):finish()} style={{flex:2}}/>
    </>}>
    <div key={step} className="cu-rise" style={{padding:'26px 24px 16px'}}>{steps[step]}</div>
  </StepShell>;
}

Object.assign(window,{AuthFlow,OnboardFlow,Logo,LangToggle});