// Settings screen — real user data + sign out
function Settings({ open, onClose, tier, dark, setDark, user, onSignOut, onUpgrade }) {
  const S = window.SOL;
  const [closing, setClosing] = React.useState(false);
  React.useEffect(() => { if (open) setClosing(false); }, [open]);
  if (!open) return null;

  const handleClose = () => {
    setClosing(true);
    setTimeout(() => { onClose(); setClosing(false); }, 220);
  };

  const displayName = user?.display_name || user?.email?.split('@')[0] || 'Guest';
  const initial     = displayName[0]?.toUpperCase() || '?';

  return (
    <div style={{
      position:'absolute', inset:0, zIndex:35, background:S.cream,
      display:'flex', flexDirection:'column',
      animation: closing
        ? 'sol-settings-out 0.22s cubic-bezier(0.4,0,0.6,1) forwards'
        : 'sol-settings-in 0.26s cubic-bezier(0.2,0.8,0.2,1) forwards',
      transformOrigin:'right center',
    }}>
      <div style={{ height:'env(safe-area-inset-top, 44px)', minHeight:44 }}/>
      <div style={{ padding:'8px 16px 10px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <button onClick={handleClose} style={{ width:40, height:40, borderRadius:12, border:'none', background:'transparent', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="chevLeft" size={22} color={S.ink}/>
        </button>
        <div style={{ fontFamily:S.sans, fontSize:16, fontWeight:600, color:S.ink }}>Settings</div>
        <div style={{ width:40 }}/>
      </div>

      <div style={{ flex:1, overflowY:'auto', padding:'10px 16px 40px' }}>
        {/* Account card */}
        <div style={{ background:S.paper, borderRadius:20, padding:'16px', display:'flex', alignItems:'center', gap:12, border:`1px solid ${S.line}` }}>
          <div style={{ width:48, height:48, borderRadius:14, background:`linear-gradient(135deg, ${S.sun}, ${S.amberDeep})`, display:'flex', alignItems:'center', justifyContent:'center', color:S.cream, fontFamily:S.serif, fontSize:22, flexShrink:0 }}>
            {initial}
          </div>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontFamily:S.sans, fontSize:15, fontWeight:600, color:S.ink, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{displayName}</div>
            <div style={{ fontFamily:S.sans, fontSize:12.5, color:S.ink3, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{user?.email || 'Not signed in'}</div>
          </div>
        </div>

        {/* Plan card */}
        <div style={{ marginTop:14, borderRadius:20, background:tier==='plus'?S.ink:S.paper, color:tier==='plus'?S.cream:S.ink, padding:'16px 16px 18px', position:'relative', overflow:'hidden', border:tier==='plus'?'none':`1px solid ${S.line}` }}>
          {tier==='plus'&&<div style={{ position:'absolute', top:-60, right:-60, width:180, height:180, borderRadius:'50%', background:'radial-gradient(circle, rgba(232,155,60,0.35) 0%, rgba(232,155,60,0) 70%)' }}/>}
          <div style={{ display:'flex', alignItems:'center', gap:10, position:'relative' }}>
            <SunMark size={22} variant={tier==='plus'?'apollo':'solus'}/>
            <div style={{ flex:1 }}>
              <div style={{ fontFamily:S.mono, fontSize:10, letterSpacing:0.8, textTransform:'uppercase', opacity:0.6 }}>Current plan</div>
              <div style={{ fontFamily:S.serif, fontSize:22, letterSpacing:-0.4, marginTop:2 }}>
                {tier==='plus'?'Solunce Plus':tier==='trial'?'Trial (Apollo)':'Solunce Free'}
              </div>
            </div>
          </div>
          <div style={{ fontFamily:S.sans, fontSize:13, marginTop:10, lineHeight:1.5, color:tier==='plus'?'rgba(245,239,228,0.7)':S.ink2, position:'relative' }}>
            {tier==='plus'
              ? 'Apollo 1 unlocked. Unlimited Solus X5, video uploads, priority speed.'
              : tier==='trial'
              ? `Apollo trial — ${user?.apollo_trial_remaining || 0} messages remaining.`
              : 'Unlimited Solus X5 with daily caps. Upgrade to unlock Apollo 1 and video.'}
          </div>
          {tier!=='plus'&&(
            <button onClick={onUpgrade} style={{ marginTop:14, width:'100%', height:46, borderRadius:14, border:'none', background:S.ink, color:S.cream, fontFamily:S.sans, fontSize:14.5, fontWeight:500, cursor:'pointer' }}>
              Upgrade to Plus — $10
            </button>
          )}
        </div>

        <SettingsGroup label="Appearance">
          <ToggleRow icon={dark?'moon':'sun'} label="Dark mode" sub={dark?'Ink & ember':'Cream & sun'} value={dark} onChange={setDark}/>
        </SettingsGroup>

        <SettingsGroup label="Data">
          <Row icon="refresh" label="Memory" detail="On"/>
          <Row icon="file" label="Export chats"/>
        </SettingsGroup>

        <SettingsGroup label="About">
          <Row icon="lock" label="Privacy" onPress={() => window.open('/privacy', '_blank')}/>
          <Row icon="file" label="Terms" onPress={() => window.open('/tos', '_blank')}/>
          <Row label="Version" detail="2.0 (Solunce)" chevron={false}/>
        </SettingsGroup>

        {/* Sign out */}
        {user && (
          <div style={{ marginTop:22 }}>
            <button onClick={onSignOut} style={{
              width:'100%', height:48, borderRadius:14, border:`1px solid rgba(184,74,31,0.25)`,
              background:'rgba(184,74,31,0.06)', color:S.ember,
              fontFamily:S.sans, fontSize:14.5, fontWeight:500, cursor:'pointer',
            }}>Sign out</button>
          </div>
        )}

        <div style={{ textAlign:'center', marginTop:24, fontFamily:S.mono, fontSize:10, letterSpacing:1, color:S.ink3, textTransform:'uppercase' }}>
          Solunce · est. 2024
        </div>
      </div>
      <div style={{ height:'env(safe-area-inset-bottom, 20px)', minHeight:20 }}/>
    </div>
  );
}

function SettingsGroup({ label, children }) {
  const S = window.SOL;
  return (
    <div style={{ marginTop:22 }}>
      <div style={{ padding:'0 6px 8px', fontFamily:S.mono, fontSize:10, color:S.ink3, letterSpacing:0.8, textTransform:'uppercase' }}>{label}</div>
      <div style={{ background:S.paper, borderRadius:18, border:`1px solid ${S.line}`, overflow:'hidden' }}>{children}</div>
    </div>
  );
}

function Row({ icon, label, detail, chevron=true, danger=false, onPress }) {
  const S = window.SOL;
  return (
    <div onClick={onPress} style={{ padding:'12px 14px', display:'flex', alignItems:'center', gap:12, borderBottom:`1px solid ${S.line}`, minHeight:48, cursor:'pointer' }}>
      {icon&&(
        <div style={{ width:28, height:28, borderRadius:8, background:S.cream2, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name={icon} size={15} color={danger?S.ember:S.ink} strokeWidth={1.6}/>
        </div>
      )}
      <div style={{ flex:1, fontFamily:S.sans, fontSize:14.5, color:danger?S.ember:S.ink, fontWeight:500, letterSpacing:-0.1 }} dangerouslySetInnerHTML={{__html:label}}/>
      {detail&&<div style={{ fontFamily:S.sans, fontSize:13, color:S.ink3 }}>{detail}</div>}
      {chevron&&<Icon name="chevRight" size={15} color={S.ink3}/>}
    </div>
  );
}

function ToggleRow({ icon, label, sub, value, onChange }) {
  const S = window.SOL;
  return (
    <div onClick={() => onChange(!value)} style={{ padding:'12px 14px', display:'flex', alignItems:'center', gap:12, borderBottom:`1px solid ${S.line}`, minHeight:52, cursor:'pointer' }}>
      <div style={{ width:28, height:28, borderRadius:8, background:value?'rgba(244,199,123,0.18)':S.cream2, display:'flex', alignItems:'center', justifyContent:'center', transition:'background .2s' }}>
        <Icon name={icon} size={15} color={value?S.sun:S.ink} strokeWidth={1.6}/>
      </div>
      <div style={{ flex:1 }}>
        <div style={{ fontFamily:S.sans, fontSize:14.5, fontWeight:500, color:S.ink, letterSpacing:-0.1 }}>{label}</div>
        {sub&&<div style={{ fontFamily:S.sans, fontSize:12, color:S.ink3, marginTop:1 }}>{sub}</div>}
      </div>
      <div style={{ width:42, height:26, borderRadius:999, background:value?S.amber:'rgba(28,26,23,0.18)', position:'relative', transition:'background .22s', flexShrink:0 }}>
        <div style={{ position:'absolute', top:2, left:value?18:2, width:22, height:22, borderRadius:'50%', background:'#fff', transition:'left .22s cubic-bezier(0.2,0.8,0.2,1)', boxShadow:'0 2px 4px rgba(0,0,0,0.2)' }}/>
      </div>
    </div>
  );
}

window.Settings = Settings;