// AcademiaDental — Home / Dashboard
const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH } = React;

function HomeScreen({ session, setRoute, openTopic, installPromptRef, onInstall, canInstall }) {
  const S = window.AD_STATE;
  const D = window.AD_DATA;
  const [tick, setTick] = useStateH(0);
  const progress = S.getProgress(session.email);
  const streak = S.getStreak(session.email);
  const days = S.daysSinceActivity(session.email);
  const settings = S.getReminders(session.email);
  const [dismissedBanner, setDismissedBanner] = useStateH(false);

  // Determine current module (first one with 0 < % < 100, else first not started)
  const current = useMemoH(() => {
    for (const m of D.modules) {
      const p = progress[m.id];
      if (p && p.percent < 100 && p.percent > 0) return { mod: m, p };
    }
    for (const m of D.modules) {
      if (!progress[m.id]) return { mod: m, p: { percent: 0, topics: {} } };
    }
    return { mod: D.modules[0], p: progress[D.modules[0].id] || { percent: 0, topics: {} } };
  }, [tick, session.email]);

  // Next topic recommendation
  const nextTopic = useMemoH(() => {
    const m = current.mod;
    const p = current.p;
    return m.topics.find((t) => p.topics[t.id] !== 'done');
  }, [current]);

  const overallPercent = useMemoH(() => {
    if (!D.modules.length) return 0;
    let sum = 0;
    for (const m of D.modules) sum += ((progress[m.id] && progress[m.id].percent) || 0);
    return Math.round(sum / D.modules.length);
  }, [tick]);

  const completedModules = D.modules.filter((m) => (progress[m.id] && progress[m.id].percent === 100)).length;

  const greeting = (() => {
    const h = new Date().getHours();
    if (h < 12) return 'Buenos días';
    if (h < 19) return 'Buenas tardes';
    return 'Buenas noches';
  })();

  const showDuoBanner = !dismissedBanner && (days >= 1 || !settings.enabled);
  const isUrgent = days >= 7;

  function enableReminders() {
    window.AD_NOTIF.ensurePermission().then((perm) => {
      if (perm === '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 (perm === 'denied') {
        window.AD_TOAST.show('Permiso denegado. Actívalo en ajustes del navegador.', 3500);
      } else {
        window.AD_TOAST.show('Permiso de notificaciones no disponible', 3000);
      }
    });
  }

  return (
    <div className="content-scroll">
      <div className="row-between" style={{marginBottom:14}}>
        <div>
          <div className="h1" style={{fontSize:22}}>{greeting}, {session.name.split(' ')[0]}</div>
          <div className="small muted">
            {new Date().toLocaleDateString('es-CL', { weekday: 'long' })} · continúa con tu plan semanal
          </div>
        </div>
        <button className="avatar" onClick={() => setRoute('account')}>
          {(session.name || 'U').split(' ').map((p) => p[0]).slice(0,2).join('')}
        </button>
      </div>

      {/* Duolingo-style nudge banner */}
      {showDuoBanner ? (
        <div className="duo-banner" style={isUrgent ? { background: 'linear-gradient(135deg, #BA7517 0%, #8A5710 100%)' } : null}>
          <div className="icon-circle"><Icon.Flame style={{width:22,height:22}}/></div>
          <div style={{flex:1}}>
            <h3>
              {isUrgent
                ? `${days} días sin estudiar`
                : (!settings.enabled
                    ? 'Activa los recordatorios diarios'
                    : `Llevas ${streak.count} día${streak.count===1?'':'s'} de racha`)}
            </h3>
            <p>
              {isUrgent
                ? 'No pierdas tu avance — retomemos donde quedaste.'
                : (!settings.enabled
                    ? 'Te avisamos cada día a la hora que prefieras, estilo Duolingo.'
                    : nextTopic
                      ? `Sigue con ${nextTopic.name} — ${nextTopic.minutes} min.`
                      : '¡Listo por hoy! Sigue mañana para mantener tu racha.')}
            </p>
          </div>
          {!settings.enabled ? (
            <button className="btn small" style={{width:'auto',background:'#fff',color:'var(--teal)'}} onClick={enableReminders}>Activar</button>
          ) : (
            <button className="x-btn" onClick={() => setDismissedBanner(true)}><Icon.X style={{width:14,height:14}}/></button>
          )}
        </div>
      ) : null}

      {/* Streak card with week strip */}
      <div className="streak-card" style={{marginTop:12}}>
        <div className="streak-flame">🔥</div>
        <div style={{flex:1}}>
          <div className="streak-num">{streak.count || 0}</div>
          <div className="streak-lbl">{streak.count === 1 ? 'día' : 'días'} de racha</div>
        </div>
        <button className="btn small secondary" style={{width:'auto',background:'rgba(255,255,255,0.6)',border:'none'}} onClick={() => setRoute('account')}>
          <Icon.Bell style={{width:14,height:14}}/>
        </button>
      </div>
      <div className="card" style={{marginTop:8,padding:'10px 14px'}}>
        <StreakWeek email={session.email}/>
      </div>

      {/* Current module */}
      <div className="sec-label">Módulo en curso</div>
      <button className="card" style={{padding:0,width:'100%',textAlign:'left',border:'none',background:'transparent'}}
              onClick={() => current.mod && setRoute('modules:' + current.mod.id)}>
        <div className="progress-card">
          <div className="pc-label">Continúa con</div>
          <div className="pc-module">{current.mod.name}</div>
          <ProgressBar value={current.p.percent}/>
          <div className="pc-meta">
            <span>{current.p.percent}% completado</span>
            {nextTopic ? <span>Siguiente: {nextTopic.name}</span> : <span>¡Completado!</span>}
          </div>
        </div>
      </button>

      {nextTopic ? (
        <button className="btn" style={{marginTop:10}} onClick={() => openTopic(current.mod, nextTopic)}>
          <Icon.Play style={{width:14,height:14}}/> Continuar tema · {nextTopic.minutes} min
        </button>
      ) : null}

      {/* Metric strip */}
      <div className="metric-grid cols-3" style={{marginTop:14}}>
        <div className="metric-card">
          <div className="metric-val text-teal">{completedModules}/{D.modules.length}</div>
          <div className="metric-lbl">Módulos completos</div>
        </div>
        <div className="metric-card">
          <div className="metric-val" style={{color:'var(--blue)'}}>{overallPercent}%</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">Días seguidos</div>
        </div>
      </div>

      {/* Install card (only if app installable & not yet installed) */}
      {canInstall ? (
        <div className="install-card" style={{marginTop:14}}>
          <div className="icon-square"><Icon.Download style={{width:20,height:20}}/></div>
          <div style={{flex:1}}>
            <div style={{fontSize:13,fontWeight:500}}>Instala AcademiaDental</div>
            <div className="small muted">Úsala como app en tu celular o notebook · funciona offline</div>
          </div>
          <button className="btn small" style={{width:'auto'}} onClick={onInstall}>Instalar</button>
        </div>
      ) : null}

      <div className="sec-label">Tus módulos</div>
      {D.modules.map((m) => {
        const p = progress[m.id] || { percent: 0 };
        const isCurrent = current.mod.id === m.id;
        return (
          <button key={m.id} className={'mod-row ' + (isCurrent ? 'active' : '')}
                  onClick={() => setRoute('modules:' + m.id)}>
            <div className="mod-icon" style={{background: bg(m.color), color: fg(m.color)}}>
              {p.percent === 100
                ? <Icon.Check style={{width:18,height:18}}/>
                : (isCurrent ? <Icon.Clock style={{width:18,height:18}}/> : <Icon.Book style={{width:18,height:18}}/>)}
            </div>
            <div className="mod-info">
              <div className="mod-name">{m.name}</div>
              <div className="mod-sub">
                {p.percent === 100
                  ? `${m.topics.length} temas · completado`
                  : (p.percent > 0
                      ? `${Object.values(p.topics || {}).filter(v=>v==='done').length} de ${m.topics.length} temas · ${p.percent}%`
                      : `${m.topics.length} temas`)}
              </div>
            </div>
            {p.percent === 100
              ? <span className="mod-badge b-green">100%</span>
              : (p.percent > 0
                  ? <span className="mod-badge b-blue">En curso</span>
                  : <span className="mod-badge b-teal">Iniciar</span>)}
          </button>
        );
      })}

      <div style={{height: 16}}/>
    </div>
  );
}

function bg(color) {
  return {
    green: 'var(--green-pale)', blue: 'var(--blue-pale)', amber: 'var(--amber-pale)',
    purple: 'var(--purple-pale)', teal: 'var(--teal-pale)', red: 'var(--red-pale)'
  }[color] || 'var(--gray-100)';
}
function fg(color) {
  return {
    green: 'var(--green)', blue: 'var(--blue)', amber: 'var(--amber)',
    purple: 'var(--purple)', teal: 'var(--teal)', red: 'var(--red)'
  }[color] || 'var(--gray-600)';
}

Object.assign(window, { HomeScreen, _moduleBg: bg, _moduleFg: fg });