/* ============================================================
   Dashboard (user area)
   ============================================================ */

function DashboardPage() {
  const { currentUser, logout } = useAuth();

  useEffect(() => {
    if (!currentUser) nav('/login');
  }, [currentUser]);

  if (!currentUser) return <Page><div className="container" style={{padding: 'var(--s-9) 0'}}>Redirecionando…</div></Page>;

  const firstName = currentUser.name.split(' ')[0];
  const createdDays = Math.max(1, Math.floor((Date.now() - new Date(currentUser.createdAt).getTime()) / 86400000));

  return (
    <Page>
      <section style={{padding: 'var(--s-7) 0 var(--s-5)', borderBottom: '1px solid var(--rule)'}}>
        <div className="container">
          <div className="eyebrow eyebrow-accent">Painel · Membro desde {createdDays} dia{createdDays !== 1 ? 's' : ''}</div>
          <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 'var(--s-5)', marginTop: 'var(--s-3)'}}>
            <h1 style={{fontSize: 'clamp(2rem, 4vw, 3.25rem)', fontWeight: 400, letterSpacing: '-0.02em'}}>
              Bom dia, <em style={{color: 'var(--primary)', fontStyle: 'italic'}}>{firstName}</em>.
            </h1>
            <div style={{display: 'flex', gap: 'var(--s-3)'}}>
              <button className="btn btn-ghost btn-sm">Editar perfil</button>
              <button className="btn-text" onClick={() => { logout(); nav('/'); }}>Sair</button>
            </div>
          </div>
        </div>
      </section>

      <section className="dash-exclusive">
        <div className="container">
          <div className="dash-exclusive-head">
            <div className="exclusive-chip">Acesso exclusivo</div>
            <h2>Ferramentas e cursos em desenvolvimento para membros do IBD</h2>
            <p style={{color: 'var(--fg-muted)', maxWidth: '62ch', marginTop: 'var(--s-3)', fontSize: 14, lineHeight: 1.6}}>
              Como membro cadastrado, você tem acesso antecipado às próximas
              ferramentas analíticas e cursos do Instituto. Avisaremos por e-mail
              quando cada uma estiver disponível.
            </p>
          </div>
          <div className="dash-exclusive-grid">
            <Link to="/ferramentas/backtest" className="dash-exclusive-card">
              <div className="card-tag">Quant · Em desenvolvimento</div>
              <h3>Backtest de Estratégias</h3>
              <div className="dash-exclusive-card-desc">
                Avalie estratégias com opções e futuros em séries históricas reais — retorno, drawdown e métricas de risco.
              </div>
              <div className="dash-exclusive-card-meta">Previsão · 2026/S2</div>
            </Link>
            <Link to="/ferramentas/var" className="dash-exclusive-card">
              <div className="card-tag">Risco · Em desenvolvimento</div>
              <h3>Calculadora de VaR</h3>
              <div className="dash-exclusive-card-desc">
                Value at Risk para carteiras com derivativos não-lineares — paramétrica, histórica e Monte Carlo.
              </div>
              <div className="dash-exclusive-card-meta">Previsão · 2026/S2</div>
            </Link>
            <Link to="/membros/cursos" className="dash-exclusive-card">
              <div className="card-tag">Educação · Em desenvolvimento</div>
              <h3>Cursos completos</h3>
              <div className="dash-exclusive-card-desc">
                Trilhas estruturadas com certificado, em parceria com instituições acadêmicas brasileiras.
              </div>
              <div className="dash-exclusive-card-meta">Previsão · 2027</div>
            </Link>
          </div>
        </div>
      </section>

      <section className="section section-tight">
        <div className="container">
          <div className="dash-grid">

            {/* Continue assistindo */}
            <div className="panel" style={{gridColumn: 'span 8'}}>
              <div className="panel-head">
                <h3>Continue de onde parou</h3>
                <Link to="/biblioteca?tipo=Aula" className="btn-text">Ver tudo</Link>
              </div>
              <div style={{display: 'grid', gridTemplateColumns: '180px 1fr', gap: 'var(--s-5)', alignItems: 'center'}}>
                <div style={{aspectRatio: '16/9', background: 'var(--ink-900)', position: 'relative', display: 'grid', placeItems: 'center'}}>
                  <div style={{
                    width: 36, height: 36, border: '1px solid rgba(255,255,255,0.4)', borderRadius: 999,
                    display: 'grid', placeItems: 'center'
                  }}>
                    <div style={{width: 0, height: 0, borderLeft: '8px solid rgba(255,255,255,0.9)', borderTop: '5px solid transparent', borderBottom: '5px solid transparent', marginLeft: 2}}></div>
                  </div>
                  <div style={{position: 'absolute', bottom: 0, left: 0, right: 0, height: 3, background: 'rgba(255,255,255,0.1)'}}>
                    <div style={{height: '100%', background: 'var(--accent)', width: '28%'}}></div>
                  </div>
                </div>
                <div>
                  <div className="eyebrow" style={{fontSize: 10}}>Aula 3 de 8 · Trilha Fundamentos</div>
                  <h4 style={{fontFamily: 'var(--font-serif)', fontSize: 'var(--step-2)', fontWeight: 500, marginTop: 6}}>
                    Mercado futuro: padronização e ajustes diários
                  </h4>
                  <div className="mono" style={{fontSize: 12, color: 'var(--fg-muted)', marginTop: 4}}>
                    Pausado em 09:08 / 32:40 · 28% concluído
                  </div>
                  <Link to="/aula/intro-derivativos" className="btn btn-sm" style={{marginTop: 'var(--s-3)'}}>
                    Continuar aula <span className="icon-arrow"></span>
                  </Link>
                </div>
              </div>
            </div>

            {/* Métricas */}
            <div style={{gridColumn: 'span 4', display: 'flex', flexDirection: 'column', gap: 'var(--s-4)'}}>
              <div className="panel" style={{padding: 'var(--s-4)'}}>
                <div className="metric-label">Tempo total de estudo</div>
                <div className="metric-value mono" style={{fontSize: 28, fontWeight: 500, marginTop: 6}}>4h 38m</div>
                <div className="metric-sub">Últimos 30 dias</div>
              </div>
              <div className="panel" style={{padding: 'var(--s-4)'}}>
                <div className="metric-label">Conteúdos concluídos</div>
                <div className="metric-value mono" style={{fontSize: 28, fontWeight: 500, marginTop: 6}}>7 <span style={{fontSize: 14, color: 'var(--fg-muted)'}}>de 146</span></div>
                <div className="bar" style={{marginTop: 8}}><div className="bar-fill" style={{width: '4.8%'}}></div></div>
              </div>
            </div>

            {/* Trilha em curso */}
            <div className="panel" style={{gridColumn: 'span 8'}}>
              <div className="panel-head">
                <h3>Trilha em curso · Fundamentos de derivativos</h3>
                <span className="mono" style={{fontSize: 11, color: 'var(--fg-muted)'}}>2 / 8 concluídas</span>
              </div>
              <ul className="module-list">
                {[
                  ['01', 'O que são derivativos', '28:14', 'done'],
                  ['02', 'Mercado a termo e contratos bilaterais', '24:08', 'done'],
                  ['03', 'Mercado futuro: padronização e ajustes diários', '32:40', 'active'],
                  ['04', 'Opções: prêmio, intrínseco e extrínseco', '38:22', ''],
                  ['05', 'Estratégias com opções', '42:18', ''],
                ].map(([n, t, time, st]) => (
                  <li key={n} className={'module-item' + (st === 'active' ? ' active' : '')}>
                    <span className="module-num" style={{color: st === 'done' ? 'var(--success)' : st === 'active' ? 'var(--accent)' : 'var(--fg-subtle)'}}>
                      {st === 'done' ? '✓' : n}
                    </span>
                    <span style={{textDecoration: st === 'done' ? 'line-through' : 'none', color: st === 'done' ? 'var(--fg-muted)' : (st === 'active' ? 'var(--primary)' : 'var(--fg)')}}>{t}</span>
                    <span className="module-time">{time}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Salvos */}
            <div className="panel" style={{gridColumn: 'span 4'}}>
              <div className="panel-head">
                <h3>Salvos</h3>
                <button className="btn-text">Gerenciar</button>
              </div>
              <ul style={{listStyle: 'none', padding: 0, margin: 0, fontSize: 13}}>
                {LIBRARY.slice(0, 4).map(it => (
                  <li key={it.slug} style={{padding: 'var(--s-3) 0', borderBottom: '1px solid var(--rule)'}}>
                    <div className="mono" style={{fontSize: 10, color: 'var(--accent)', letterSpacing: '0.08em', textTransform: 'uppercase'}}>{it.tag}</div>
                    <a href={'#/post/' + it.slug} style={{fontFamily: 'var(--font-serif)', fontSize: 15, display: 'block', marginTop: 4, color: 'var(--fg)'}}>{it.title}</a>
                  </li>
                ))}
              </ul>
            </div>

            {/* Ferramentas */}
            <div className="panel" style={{gridColumn: 'span 12'}}>
              <div className="panel-head">
                <h3>Ferramentas disponíveis</h3>
                <span className="mono" style={{fontSize: 11, color: 'var(--fg-muted)'}}>3 calculadoras · sem custo</span>
              </div>
              <div className="card-grid" style={{gap: 'var(--s-4)'}}>
                <Link to="/ferramentas/black-scholes" className="card">
                  <div className="card-tag">Pricing</div>
                  <h3>Calculadora Black-Scholes</h3>
                  <div className="card-desc">Prêmio e gregas de opções europeias.</div>
                </Link>
                <Link to="/ferramentas/payoff" className="card">
                  <div className="card-tag">Estratégia</div>
                  <h3>Diagrama de Payoff</h3>
                  <div className="card-desc">Componha estratégias com múltiplas pernas.</div>
                </Link>
                <Link to="/ferramentas/futuros" className="card">
                  <div className="card-tag">Simulação</div>
                  <h3>Simulador de Futuros</h3>
                  <div className="card-desc">Backtest do fluxo financeiro de futuros.</div>
                </Link>
              </div>
            </div>

            {/* Perfil */}
            <div className="panel" style={{gridColumn: 'span 12'}}>
              <div className="panel-head">
                <h3>Dados cadastrais</h3>
                <button className="btn-text">Editar</button>
              </div>
              <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--s-5)'}}>
                <div>
                  <div className="eyebrow" style={{fontSize: 10}}>Nome</div>
                  <div style={{marginTop: 4}}>{currentUser.name}</div>
                </div>
                <div>
                  <div className="eyebrow" style={{fontSize: 10}}>E-mail</div>
                  <div className="mono" style={{marginTop: 4, fontSize: 13}}>{currentUser.email}</div>
                </div>
                <div>
                  <div className="eyebrow" style={{fontSize: 10}}>Celular</div>
                  <div className="mono" style={{marginTop: 4, fontSize: 13}}>{currentUser.phone}</div>
                </div>
                <div>
                  <div className="eyebrow" style={{fontSize: 10}}>Cadastrado em</div>
                  <div className="mono" style={{marginTop: 4, fontSize: 13}}>{new Date(currentUser.createdAt).toLocaleDateString('pt-BR')}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>
    </Page>
  );
}

window.DashboardPage = DashboardPage;