// AcademiaDental — Account (profile, devices, security, notifications, install)
const { useState: useStateAc, useEffect: useEffectAc } = React;

function AccountScreen({ session, setRoute, onLogout, canInstall, onInstall }) {
  const S = window.AD_STATE;
  const [tick, setTick] = useStateAc(0);
  const reminders = S.getReminders(session.email);
  const devices = S.getDevices(session.email);
  const progress = S.getProgress(session.email);
  const streak = S.getStreak(session.email);
  const overall = (() => {
    let s = 0; const M = window.AD_DATA.modules;
    for (const m of M) s += (progress[m.id] && progress[m.id].percent) || 0;
    return M.length ? Math.round(s/M.length) : 0;
  })();
  const [permState, setPermState] = useStateAc(typeof Notification !== 'undefined' ? Notification.permission : 'unsupported');

  function toggleReminders() {
    if (!reminders.enabled) {
      window.AD_NOTIF.ensurePermission().then((p) => {
        setPermState(p);
        if (p === 'granted') {
          S.setReminders(session.email, { enabled: true });
          window.AD_NOTIF.startScheduler(session.email);
          window.AD_TOAST.show('Recordatorios activados ✓');
          setTick(x => x+1);
        } else if (p === 'denied') {
          window.AD_TOAST.show('Permisos bloqueados — habilítalos en ajustes del navegador', 3500);
        } else {
          window.AD_TOAST.show('Permiso no concedido', 3000);
        }
      });
    } else {
      S.setReminders(session.email, { enabled: false });
      window.AD_NOTIF.stopScheduler();
      setTick(x => x+1);
    }
  }
  function setHour(h) {
    S.setReminders(session.email, { hour: h });
    setTick(x => x+1);
  }

  function testNotification() {
    window.AD_NOTIF.testNow(session.email).then((r) => {
      if (!r.ok) window.AD_TOAST.show('Revisa los permisos de notificaciones', 2500);
    });
  }

  return (
    <>
      <TopBar logo title="Mi cuenta"/>
      <div className="content-scroll">
        {/* Profile header */}
        <div className="card" style={{display:'flex',alignItems:'center',gap:12}}>
          <div className="avatar" style={{width:48,height:48,fontSize:16}}>{(session.name||'U').split(' ').map(p=>p[0]).slice(0,2).join('')}</div>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:15,fontWeight:500}}>{session.name}</div>
            <div className="small muted">{session.email}</div>
            <div className="small text-teal">Curso completo · vence oct 2025</div>
          </div>
        </div>

        <div className="metric-grid cols-3" style={{marginTop:10}}>
          <div className="metric-card"><div className="metric-val text-teal">{overall}%</div><div className="metric-lbl">Avance total</div></div>
          <div className="metric-card"><div className="metric-val" style={{color:'var(--amber)'}}>{streak.count||0}</div><div className="metric-lbl">Racha</div></div>
          <div className="metric-card"><div className="metric-val" style={{color:'var(--blue)'}}>{devices.length}/2</div><div className="metric-lbl">Dispositivos</div></div>
        </div>

        {/* Notifications card */}
        <div className="sec-label">Recordatorios diarios</div>
        <div className="card">
          <div className="row-between">
            <div style={{display:'flex',gap:10,alignItems:'center',flex:1,minWidth:0}}>
              <div style={{width:36,height:36,borderRadius:10,background:'var(--amber-pale)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                <Icon.Bell style={{width:18,height:18,color:'var(--amber)'}}/>
              </div>
              <div style={{minWidth:0}}>
                <div style={{fontSize:13,fontWeight:500}}>Avísame para estudiar</div>
                <div className="small muted">Estilo Duolingo · una notificación diaria</div>
              </div>
            </div>
            <Switch on={reminders.enabled} onChange={toggleReminders}/>
          </div>
          {reminders.enabled ? (
            <>
              <div className="hr"/>
              <div className="small" style={{marginBottom:8,color:'var(--gray-600)'}}>Hora del recordatorio</div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:6}}>
                {[8, 13, 18, 21].map((h) => (
                  <button key={h}
                    className={'qopt ' + (reminders.hour === h ? 'correct' : '')}
                    style={{justifyContent:'center',padding:'9px 8px',fontSize:13,fontWeight:500}}
                    onClick={() => setHour(h)}>
                    {h}:00
                  </button>
                ))}
              </div>
              <button className="btn small secondary" style={{marginTop:10}} onClick={testNotification}>
                <Icon.Bell style={{width:13,height:13}}/> Probar ahora
              </button>
              {permState === 'denied' ? (
                <div className="alert alert-red mt-2"><div className="alert-title">Notificaciones bloqueadas</div>Habilítalas en los ajustes del navegador para esta página.</div>
              ) : null}
            </>
          ) : (
            <div className="small muted mt-2" style={{lineHeight:1.5}}>
              Cuando lo actives te enviaremos una notificación amistosa cada día para mantener la racha. Si llevas más de 7 días sin estudiar, te enviamos una alerta especial.
            </div>
          )}
        </div>

        {/* Install card */}
        {canInstall ? (
          <div className="card mt-3" style={{display:'flex',gap:12,alignItems:'center',borderColor:'var(--teal-mid)',borderStyle:'dashed'}}>
            <div style={{width:36,height:36,borderRadius:10,background:'var(--teal-pale)',display:'flex',alignItems:'center',justifyContent:'center'}}>
              <Icon.Download style={{width:18,height:18,color:'var(--teal)'}}/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:500}}>Instalar como app</div>
              <div className="small muted">Funciona offline · acceso desde tu pantalla principal</div>
            </div>
            <button className="btn small" style={{width:'auto'}} onClick={onInstall}>Instalar</button>
          </div>
        ) : (
          <div className="card mt-3" style={{display:'flex',gap:12,alignItems:'center'}}>
            <div style={{width:36,height:36,borderRadius:10,background:'var(--teal-pale)',display:'flex',alignItems:'center',justifyContent:'center'}}>
              <Icon.Check style={{width:18,height:18,color:'var(--teal)'}}/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:500}}>App instalable</div>
              <div className="small muted">En iPhone usa "Compartir → Añadir a inicio". En notebook, instala desde la barra de direcciones.</div>
            </div>
          </div>
        )}

        {/* Devices */}
        <div className="sec-label">Dispositivos registrados</div>
        <div className="row-between" style={{marginBottom:8}}>
          <div className="small muted">Máximo 2 dispositivos · sesión única simultánea</div>
          <span className={'badge ' + (devices.length >= 2 ? 'b-red' : 'b-teal')}>{devices.length}/2</span>
        </div>
        {devices.map((d) => {
          const isThis = d.id === session.deviceId;
          const isPhone = /iPhone|Android|iPad/i.test(d.name);
          return (
            <div className="device-row" key={d.id}>
              <div className="device-icon">
                {isPhone
                  ? <Icon.Phone style={{width:18,height:18,color:'var(--gray-600)'}}/>
                  : <Icon.Laptop style={{width:18,height:18,color:'var(--gray-600)'}}/>}
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13,fontWeight:500}}>{d.name}{isThis ? ' · Este dispositivo' : ''}</div>
                <div className="small muted">{isThis ? 'Activo ahora' : 'Última sesión: ' + new Date(d.lastSeen).toLocaleString('es-CL',{dateStyle:'short',timeStyle:'short'})}</div>
              </div>
              <div className={'s-dot ' + (isThis ? 'green' : 'gray')}/>
              {!isThis ? (
                <button className="btn small danger" style={{width:'auto',padding:'7px 10px'}} onClick={() => {
                  S.removeDevice(session.email, d.id); setTick(x=>x+1); window.AD_TOAST.show('Dispositivo eliminado');
                }}><Icon.Trash style={{width:12,height:12}}/></button>
              ) : null}
            </div>
          );
        })}

        {/* Security highlights */}
        <div className="sec-label">Seguridad</div>
        <div className="card">
          <Row icon={<Icon.Lock/>} title="Sesión única" sub="Solo un dispositivo activo a la vez"/>
          <Row icon={<Icon.Shield/>} title="Datos cifrados" sub="Tu sesión y progreso solo viven en tu dispositivo"/>
          <Row icon={<Icon.Phone/>} title="Máx. 2 dispositivos" sub="Cambia de equipo eliminando uno registrado"/>
        </div>

        {/* Other navigations */}
        <div className="sec-label">Más</div>
        <div className="card" style={{padding:0,overflow:'hidden'}}>
          <NavItem icon={<Icon.Gift/>} label="Referidos y créditos" onClick={()=>setRoute('referrals')}/>
          <NavItem icon={<Icon.Flag/>} label="Guías MINSAL" onClick={()=>setRoute('minsal')}/>
          <NavItem icon={<Icon.Map/>} label="Mis módulos" onClick={()=>setRoute('modules')}/>
        </div>

        <div style={{height:14}}/>
        <button className="btn danger" onClick={() => { onLogout(); }}>Cerrar sesión</button>
        <div style={{height:14}}/>
      </div>
    </>
  );
}

function Switch({ on, onChange }) {
  return (
    <button onClick={onChange}
      style={{
        width:46, height:26, borderRadius:13, border:'none',
        background: on ? 'var(--teal-light)' : 'var(--gray-200)',
        position:'relative', cursor:'pointer', transition:'background .2s',
        flexShrink:0
      }}>
      <span style={{
        position:'absolute', top:3, left: on ? 23 : 3,
        width:20, height:20, borderRadius:'50%', background:'#fff',
        boxShadow:'0 1px 3px rgba(0,0,0,0.2)', transition:'left .2s'
      }}/>
    </button>
  );
}
function Row({ icon, title, sub }) {
  return (
    <div style={{display:'flex',gap:12,alignItems:'flex-start',padding:'8px 0'}}>
      <div style={{width:32,height:32,borderRadius:8,background:'var(--teal-pale)',color:'var(--teal)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
        {React.cloneElement(icon, { style: { width:15, height:15 }})}
      </div>
      <div>
        <div style={{fontSize:13,fontWeight:500}}>{title}</div>
        <div className="small muted">{sub}</div>
      </div>
    </div>
  );
}
function NavItem({ icon, label, onClick }) {
  return (
    <button onClick={onClick} style={{width:'100%',display:'flex',gap:12,alignItems:'center',padding:'13px 14px',background:'transparent',border:'none',textAlign:'left',cursor:'pointer',borderBottom:'1px solid var(--gray-200)'}}>
      <div style={{width:28,height:28,borderRadius:8,background:'var(--gray-100)',color:'var(--gray-600)',display:'flex',alignItems:'center',justifyContent:'center'}}>
        {React.cloneElement(icon, { style: {width:14,height:14} })}
      </div>
      <div style={{flex:1,fontSize:13.5}}>{label}</div>
      <Icon.Back style={{width:14,height:14,transform:'rotate(180deg)',color:'var(--gray-400)'}}/>
    </button>
  );
}

Object.assign(window, { AccountScreen });