/* global React, Icon, Avatar, ProgressRing, ProgressBar, Modal, timeAgo, formatDate, formatTime */

// ============================================================================
// Member area screens
// ============================================================================

// ----- Dashboard -----
const Dashboard = ({ user, nav }) => {
  const phases = DB.phases();
  const overall = DB.overallProgress(user);
  const allLessons = phases.flatMap(p => DB.lessonsByPhase(p.id));
  const nextLesson = allLessons.find(l => !user.progress[l.id]?.watched);
  const recentPosts = DB.posts().slice(0, 3);
  const upcomingLives = DB.lives().filter(l => l.status === 'agendada').slice(0, 2);
  const activity = DB.activity(8);

  return (
    <div className="app-main">
      <div className="dash-hero">
        <div style={{ display:'flex', alignItems:'flex-start', gap: 28, position: 'relative', zIndex: 1 }}>
          <div style={{ flex: 1 }}>
            <div className="eyebrow">Núcleo de Líderes · {formatDate(new Date().toISOString(), {weekday:'long', day:'2-digit', month:'long'})}</div>
            <h2>Olá, {user.name.split(' ')[0]}. <span className="blue">Continue</span> sua jornada.</h2>
            <p style={{ color: 'var(--text-muted)', marginTop: 12, maxWidth: 560, fontSize: 14.5 }}>
              Você está {overall}% através do programa. Próximo passo abaixo.
            </p>
            {user.declaracaoIntencao && (
              <div className="declaration">
                <div className="label">Sua declaração de intenção</div>
                "{user.declaracaoIntencao}"
              </div>
            )}
          </div>
          <ProgressRing value={overall} size={120} stroke={8} color="var(--gold-bright)" />
        </div>

        {nextLesson && (
          <div className="next-up" onClick={() => nav(`/aula/${nextLesson.id}`)} style={{ cursor: 'pointer' }}>
            <div className="play"><Icon name="play" size={20}/></div>
            <div className="meta">
              <div className="k">Próxima aula</div>
              <div className="t">{nextLesson.title}</div>
              <div className="d">{phases.find(p=>p.id===nextLesson.phaseId)?.title} · {nextLesson.duration}</div>
            </div>
            <Icon name="chevronRight" size={20} style={{ color: 'var(--blue-bright)' }}/>
          </div>
        )}
      </div>

      <div className="stat-grid" style={{ marginTop: 28 }}>
        <div className="card stat">
          <div className="label">Progresso geral</div>
          <div className="value">{overall}<span className="unit">%</span></div>
          <ProgressBar value={overall} />
        </div>
        <div className="card stat">
          <div className="label">Aulas concluídas</div>
          <div className="value">
            {allLessons.filter(l => user.progress[l.id]?.watched).length}
            <span className="unit">/ {allLessons.length}</span>
          </div>
          <div className="sub">desde {formatDate(user.createdAt)}</div>
        </div>
        <div className="card stat">
          <div className="label">Próxima live</div>
          <div className="value" style={{ fontSize: 20, lineHeight: 1.2 }}>
            {upcomingLives[0] ? formatDate(upcomingLives[0].date, { day:'2-digit', month:'short' }) : '—'}
          </div>
          <div className="sub">{upcomingLives[0] ? `às ${formatTime(upcomingLives[0].date)}` : 'Sem lives agendadas'}</div>
        </div>
        <div className="card stat">
          <div className="label">Fase atual</div>
          <div className="value" style={{ fontSize: 20, lineHeight: 1.2 }}>
            {(() => {
              const cur = phases.find(p => {
                const pr = DB.progressForPhase(user, p.id);
                return pr.pct < 100;
              }) || phases[phases.length-1];
              return cur.title.split(':')[0];
            })()}
          </div>
          <div className="sub text-gold">{(() => {
            const cur = phases.find(p => {
              const pr = DB.progressForPhase(user, p.id);
              return pr.pct < 100;
            }) || phases[phases.length-1];
            return cur.pillar;
          })()}</div>
        </div>
      </div>

      <div className="dash-grid mt-32">
        <div>
          <div className="section-head">
            <h3>Sua jornada</h3>
            <a className="link" onClick={()=>nav('/jornada')} style={{ cursor:'pointer' }}>Ver todas as fases →</a>
          </div>
          <div className="phase-list">
            {phases.map((p, idx) => {
              const pr = DB.progressForPhase(user, p.id);
              return (
                <div className="phase-card" key={p.id} onClick={()=>nav(`/jornada/${p.slug}`)} style={{ cursor:'pointer' }}>
                  <div className="phase-head" style={{ padding: '20px 26px' }}>
                    <div className={`phase-num ${idx === 0 ? 'gold' : ''}`}>0{idx}</div>
                    <div className="phase-meta">
                      <div className="pillar">{p.pillar}</div>
                      <h3>{p.title}</h3>
                      <div className="sub">{p.subtitle}</div>
                    </div>
                    <div className="phase-progress">
                      <div className="pct">{pr.pct}%</div>
                      <div className="frac">{pr.done} / {pr.total} aulas</div>
                      <div style={{ width: 120, marginTop: 10 }}>
                        <ProgressBar value={pr.pct} gold={idx === 0} />
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="vstack" style={{ gap: 22 }}>
          <div>
            <div className="section-head"><h3>Próximas lives</h3></div>
            <div className="vstack" style={{ gap: 10 }}>
              {DB.lives().slice(0, 3).map(live => (
                <div className="card live-card" key={live.id}>
                  <div className="date">
                    <div className="m">{new Date(live.date).toLocaleDateString('pt-BR', { month: 'short' })}</div>
                    <div className="d">{new Date(live.date).getDate()}</div>
                  </div>
                  <div className="meta">
                    <div className="t">{live.title}</div>
                    <div className="d">{live.status === 'gravada' ? 'Gravação disponível' : `${formatTime(live.date)} · 60–90min`}</div>
                  </div>
                  <span className={`live-tag ${live.status}`}>{live.status}</span>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="section-head"><h3>Comunidade</h3><a className="link" onClick={()=>nav('/comunidade')} style={{cursor:'pointer'}}>Ver tudo →</a></div>
            <div className="vstack" style={{ gap: 10 }}>
              {recentPosts.map(p => {
                const author = DB.userById(p.authorId);
                return (
                  <div className="card card-pad-sm" key={p.id} onClick={()=>nav('/comunidade')} style={{cursor:'pointer'}}>
                    <div className="hstack" style={{ marginBottom: 8 }}>
                      <Avatar user={author}/>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-light)' }}>{author?.name}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--text-muted-2)' }}>{timeAgo(p.createdAt)} · {p.replies.length} resposta(s)</div>
                      </div>
                    </div>
                    <div style={{ fontSize: 13.5, color: 'var(--text-light)', lineHeight: 1.5 }}>
                      {p.body.length > 140 ? p.body.slice(0,140)+'…' : p.body}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ----- Jornada (list of phases or single phase) -----
const Jornada = ({ user, phaseSlug, nav }) => {
  const phases = DB.phases();
  const phase = phaseSlug ? phases.find(p => p.slug === phaseSlug) : null;

  if (phase) {
    const lessons = DB.lessonsByPhase(phase.id);
    const idx = phases.findIndex(p => p.id === phase.id);
    const pr = DB.progressForPhase(user, phase.id);
    return (
      <div className="app-main">
        <button onClick={()=>nav('/jornada')} className="btn-ghost" style={{ marginBottom: 24 }}>← Voltar para todas as fases</button>
        <div className="page-head">
          <div>
            <div className="page-eyebrow">{phase.pillar}</div>
            <h1 className="page-title">{phase.title}</h1>
            <p className="page-sub">{phase.subtitle}</p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily:'Archivo, sans-serif', fontSize: 36, fontWeight: 800, color:'var(--text-light)', lineHeight: 1 }}>{pr.pct}%</div>
            <div style={{ fontSize: 12, color:'var(--text-muted)', letterSpacing:'0.08em', marginTop: 4 }}>{pr.done} de {pr.total} aulas</div>
          </div>
        </div>

        <div className="card card-pad-lg" style={{ marginBottom: 24 }}>
          <div className="hstack" style={{ alignItems:'flex-start' }}>
            <div className={`phase-num ${idx===0?'gold':''}`} style={{ fontSize: 72 }}>0{idx}</div>
            <div style={{ flex: 1, marginLeft: 20 }}>
              <p style={{ fontSize: 15.5, color:'var(--text-light)', lineHeight: 1.55 }}>{phase.description}</p>
            </div>
          </div>
        </div>

        <div className="card" style={{ padding: 0 }}>
          {lessons.map(l => {
            const pgr = user.progress[l.id];
            const done = pgr?.watched;
            const partial = pgr?.secs > 0 && !done;
            return (
              <div className={`lesson-row ${done ? 'done' : ''} ${partial ? 'in-progress' : ''}`} key={l.id} onClick={()=>nav(`/aula/${l.id}`)}>
                <div className="lesson-check"><Icon name="check" size={12}/></div>
                <div className="lesson-info">
                  <div className="t">{l.title}</div>
                  <div className="d">
                    <span className={`pill ${l.type}`}>
                      {l.type === 'live' ? 'Live' : l.type === 'workbook' ? 'Exercício' : 'Aula gravada'}
                    </span>
                    <span>{l.duration}</span>
                    {l.materials.length > 0 && <span>· {l.materials.length} material(is) anexo(s)</span>}
                  </div>
                </div>
                <div className="lesson-cta">
                  {done ? 'Revisar' : (partial ? 'Continuar' : 'Assistir')}
                  <Icon name="chevronRight" size={14}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  return (
    <div className="app-main">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Programa de 12 semanas</div>
          <h1 className="page-title">Sua jornada</h1>
          <p className="page-sub">Quatro fases. Cada uma com aulas gravadas, lives semanais e orientação individualizada.</p>
        </div>
      </div>

      <div className="phase-list">
        {phases.map((p, idx) => {
          const lessons = DB.lessonsByPhase(p.id);
          const pr = DB.progressForPhase(user, p.id);
          return (
            <div className="phase-card" key={p.id}>
              <div className="phase-head" onClick={()=>nav(`/jornada/${p.slug}`)} style={{cursor:'pointer'}}>
                <div className={`phase-num ${idx===0?'gold':''}`}>0{idx}</div>
                <div className="phase-meta">
                  <div className="pillar">{p.pillar}</div>
                  <h3>{p.title}</h3>
                  <div className="sub">{p.subtitle}</div>
                </div>
                <div className="phase-progress">
                  <div className="pct">{pr.pct}%</div>
                  <div className="frac">{pr.done} / {pr.total} aulas</div>
                  <div style={{ width: 120, marginTop: 10 }}>
                    <ProgressBar value={pr.pct} gold={idx===0}/>
                  </div>
                </div>
              </div>
              {lessons.slice(0, 3).map(l => {
                const done = user.progress[l.id]?.watched;
                return (
                  <div className={`lesson-row ${done ? 'done' : ''}`} key={l.id} onClick={()=>nav(`/aula/${l.id}`)}>
                    <div className="lesson-check"><Icon name="check" size={12}/></div>
                    <div className="lesson-info">
                      <div className="t">{l.title}</div>
                      <div className="d">
                        <span className={`pill ${l.type}`}>{l.type === 'live' ? 'Live' : l.type === 'workbook' ? 'Exercício' : 'Aula'}</span>
                        <span>{l.duration}</span>
                      </div>
                    </div>
                    <div className="lesson-cta">{done ? 'Revisar' : 'Assistir'}<Icon name="chevronRight" size={14}/></div>
                  </div>
                );
              })}
              {lessons.length > 3 && (
                <div className="lesson-row" onClick={()=>nav(`/jornada/${p.slug}`)} style={{ background: 'rgba(42,108,255,0.04)', justifyContent: 'center' }}>
                  <div></div>
                  <div className="lesson-info" style={{ textAlign:'center' }}>
                    <div style={{ color: 'var(--blue-bright)', fontWeight: 700, fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                      Ver mais {lessons.length - 3} aulas dessa fase →
                    </div>
                  </div>
                  <div/>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ----- Player -----
const LessonPlayer = ({ user, lessonId, nav }) => {
  const lesson = DB.lesson(lessonId);
  const [tab, setTab] = React.useState('descricao');
  const [playing, setPlaying] = React.useState(false);
  const [pct, setPct] = React.useState(() => {
    const p = user.progress[lessonId];
    if (!p) return 0;
    return p.total ? Math.round(p.secs / p.total * 100) : 0;
  });

  if (!lesson) return <div className="app-main"><p>Aula não encontrada.</p></div>;

  const phase = DB.phases().find(p => p.id === lesson.phaseId);
  const sameFase = DB.lessonsByPhase(lesson.phaseId);
  const curIdx = sameFase.findIndex(l => l.id === lesson.id);
  const prev = sameFase[curIdx - 1];
  const next = sameFase[curIdx + 1];

  const markDone = () => {
    DB.updateProgress(user.id, lesson.id, 100, 100, true);
    setPct(100);
  };
  const togglePlay = () => {
    setPlaying(p => !p);
  };
  // simulate progress when playing
  React.useEffect(() => {
    if (!playing) return;
    const t = setInterval(() => {
      setPct(p => {
        const np = Math.min(100, p + 2);
        DB.updateProgress(user.id, lesson.id, np, 100, np >= 100);
        if (np >= 100) setPlaying(false);
        return np;
      });
    }, 600);
    return () => clearInterval(t);
  }, [playing, lesson.id, user.id]);

  return (
    <div className="app-main">
      <button onClick={()=>nav(`/jornada/${phase.slug}`)} className="btn-ghost" style={{ marginBottom: 18 }}>← {phase.title}</button>
      <div className="player-grid">
        <div>
          <div className="player-frame">
            <div className="player-overlay">
              {!playing ? (
                <button className="player-play" onClick={togglePlay}><Icon name="play" size={32}/></button>
              ) : (
                <button className="player-play" onClick={togglePlay} style={{ background: 'rgba(255,255,255,0.95)' }}>
                  <div style={{ display:'flex', gap: 4 }}>
                    <div style={{ width: 6, height: 28, background: 'var(--bg-deep)' }}/>
                    <div style={{ width: 6, height: 28, background: 'var(--bg-deep)' }}/>
                  </div>
                </button>
              )}
            </div>
            <div className="player-meta">
              <div className="t">{lesson.title}</div>
              <div className="duration">{lesson.duration}</div>
            </div>
          </div>

          <div className="player-controls">
            <ProgressBar value={pct} gold />
            <span style={{ fontSize: 12, color: 'var(--text-muted)', letterSpacing: '0.08em', minWidth: 80 }}>
              {Math.round(pct)}% assistido
            </span>
            <button className="btn-ghost" onClick={markDone}>
              <Icon name="check" size={14}/>Marcar como concluída
            </button>
          </div>

          <div className="lesson-tabs">
            {['descricao','transcricao','notas'].map(t => (
              <button key={t} className={tab===t?'active':''} onClick={()=>setTab(t)}>
                {t === 'descricao' ? 'Sobre a aula' : t === 'transcricao' ? 'Transcrição' : 'Minhas notas'}
              </button>
            ))}
          </div>
          <div className="tab-content">
            {tab==='descricao' && (
              <>
                <p>{lesson.description}</p>
                <p>Esta aula faz parte da <b>{phase.title}</b> ({phase.pillar}). O conteúdo é base para a Folha em Branco semanal e para a Orientação Individualizada do próximo ciclo — assista antes de quinta-feira.</p>
                <p style={{ marginTop: 18 }}><b style={{ color: 'var(--gold-bright)' }}>Como aproveitar:</b> assista uma primeira vez de ponta a ponta. Depois, refaça com caderno do lado nas partes que mais te tocaram. Traga uma pergunta concreta para a Folha em Branco.</p>
              </>
            )}
            {tab==='transcricao' && (
              <>
                <p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Transcrição completa será disponibilizada até 24h após a publicação. Você pode buscar termos específicos pelo Ctrl+F.</p>
                <p>[00:00] Boas-vindas e contexto da aula…</p>
                <p>[02:14] Por que esse conceito chega só agora no programa…</p>
                <p>[08:42] Exercício prático que você fará nesta semana…</p>
              </>
            )}
            {tab==='notas' && (
              <textarea
                placeholder="Suas anotações ficam só para você. Aproveite para registrar a frase que te marcou, a aplicação imediata que você vai testar e a dúvida que vai levar para a próxima live."
                style={{ width: '100%', minHeight: 220, background: 'rgba(16,36,72,0.5)', border: '1px solid var(--line-dark)', borderRadius: 6, padding: 16, color: 'var(--text-light)', fontSize: 14, lineHeight: 1.6, resize: 'vertical' }}
              />
            )}
          </div>
        </div>

        <aside>
          <div className="card" style={{ marginBottom: 20 }}>
            <div className="section-head" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 16 }}>Materiais</h3></div>
            {lesson.materials.length === 0 && <div className="muted text-small">Sem materiais anexos nesta aula.</div>}
            {lesson.materials.map((m, i) => (
              <div className="material-row" key={i}>
                <div className="icon"><Icon name="file" size={18}/></div>
                <div>
                  <div className="name">{m.name}</div>
                  <div className="kind">{m.kind}</div>
                </div>
                <a className="dl"><Icon name="download" size={14}/></a>
              </div>
            ))}
          </div>

          <div className="card">
            <div className="section-head" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 16 }}>Nesta fase</h3></div>
            <div className="vstack" style={{ gap: 10 }}>
              {sameFase.map(l => {
                const isCur = l.id === lesson.id;
                const done = user.progress[l.id]?.watched;
                return (
                  <div key={l.id} onClick={()=>nav(`/aula/${l.id}`)} style={{
                    padding: '10px 12px',
                    borderRadius: 6,
                    background: isCur ? 'rgba(42,108,255,0.12)' : 'transparent',
                    border: isCur ? '1px solid rgba(42,108,255,0.3)' : '1px solid transparent',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 10
                  }}>
                    <div style={{ width: 6, height: 6, borderRadius: '50%', background: done ? 'var(--success)' : (isCur ? 'var(--blue-bright)' : 'var(--text-muted-2)') }}/>
                    <div style={{ flex: 1, fontSize: 13, fontWeight: isCur ? 700 : 500, color: isCur ? 'var(--text-light)' : 'var(--text-muted)' }}>
                      {l.title}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="hstack mt-24" style={{ gap: 10 }}>
            {prev && <button className="btn-ghost" onClick={()=>nav(`/aula/${prev.id}`)} style={{ flex: 1, justifyContent:'center' }}>← Anterior</button>}
            {next && <button className="btn-primary" style={{ flex: 1, padding: '11px 18px', fontSize: 12 }} onClick={()=>nav(`/aula/${next.id}`)}>Próxima aula →</button>}
          </div>
        </aside>
      </div>
    </div>
  );
};

// ----- Materiais (biblioteca consolidada) -----
const Materiais = ({ user, nav }) => {
  const phases = DB.phases();
  const allMaterials = phases.flatMap(p =>
    DB.lessonsByPhase(p.id).flatMap(l =>
      l.materials.map(m => ({ ...m, lesson: l, phase: p }))
    )
  );

  return (
    <div className="app-main">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Biblioteca</div>
          <h1 className="page-title">Materiais de apoio</h1>
          <p className="page-sub">PDFs, templates e exercícios complementares a cada aula. Tudo organizado por fase.</p>
        </div>
      </div>

      {phases.map(p => {
        const mats = allMaterials.filter(m => m.phase.id === p.id);
        if (!mats.length) return null;
        return (
          <div key={p.id} style={{ marginBottom: 36 }}>
            <div className="section-head">
              <h3>{p.pillar} — {p.title}</h3>
              <span className="meta">{mats.length} arquivo(s)</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 12 }}>
              {mats.map((m, i) => (
                <div className="material-row" key={i} onClick={()=>nav(`/aula/${m.lesson.id}`)} style={{ cursor: 'pointer' }}>
                  <div className="icon"><Icon name="file" size={18}/></div>
                  <div>
                    <div className="name">{m.name}</div>
                    <div className="kind">{m.kind} · {m.lesson.title}</div>
                  </div>
                  <a className="dl" onClick={(e)=>e.stopPropagation()}><Icon name="download" size={14}/></a>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ----- Lives -----
const LivesScreen = ({ nav }) => {
  const lives = DB.lives();
  return (
    <div className="app-main">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Encontros ao vivo</div>
          <h1 className="page-title">Lives & Folha em Branco</h1>
          <p className="page-sub">Sessões semanais de 60–90min. Envie sua dúvida até 20h do dia anterior — você é a pauta.</p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 18 }}>
        {lives.map(live => (
          <div className="card" key={live.id}>
            <div className="hstack" style={{ marginBottom: 14, justifyContent: 'space-between' }}>
              <div className="hstack">
                <div className="live-card" style={{ padding: 0 }}>
                  <div className="date">
                    <div className="m">{new Date(live.date).toLocaleDateString('pt-BR', { month: 'short' })}</div>
                    <div className="d">{new Date(live.date).getDate()}</div>
                  </div>
                </div>
                <div>
                  <div style={{ fontFamily: 'Archivo, sans-serif', fontWeight: 700, fontSize: 17, color: 'var(--text-light)' }}>
                    {live.title}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
                    {formatDate(live.date, { day:'2-digit', month:'long', year:'numeric' })} · {formatTime(live.date)}
                  </div>
                </div>
              </div>
              <span className={`live-tag ${live.status}`}>{live.status}</span>
            </div>
            <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55, marginBottom: 18 }}>
              {live.description}
            </p>
            {live.status === 'agendada' ? (
              <div className="hstack" style={{ gap: 10 }}>
                <button className="btn-gold">Reservar lugar</button>
                <button className="btn-ghost">Adicionar à agenda</button>
              </div>
            ) : (
              <button className="btn-primary" style={{ width: 'auto', padding: '11px 18px', fontSize: 12 }}>
                <Icon name="play" size={14}/>Assistir gravação
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

// ----- Comunidade -----
const Comunidade = ({ user }) => {
  const [body, setBody] = React.useState('');
  const [replyTo, setReplyTo] = React.useState(null);
  const [replyBody, setReplyBody] = React.useState('');
  const posts = DB.posts();

  const submit = () => {
    if (!body.trim()) return;
    DB.addPost(user.id, body.trim());
    setBody('');
  };
  const submitReply = (postId) => {
    if (!replyBody.trim()) return;
    DB.addReply(postId, user.id, replyBody.trim());
    setReplyBody(''); setReplyTo(null);
  };

  return (
    <div className="app-main">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Espaço dos mentorados</div>
          <h1 className="page-title">Comunidade</h1>
          <p className="page-sub">Compartilhe dúvidas, situações reais e aprendizados. O Edson e os outros mentorados respondem por aqui.</p>
        </div>
      </div>

      <div className="composer">
        <Avatar user={user}/>
        <textarea
          placeholder="O que você está enfrentando essa semana? Escreva com contexto — situações reais geram respostas reais."
          value={body}
          onChange={e=>setBody(e.target.value)}
        />
        <button className="btn-primary" style={{ width: 'auto', padding: '11px 18px', fontSize: 12 }} onClick={submit} disabled={!body.trim()}>
          Publicar
        </button>
      </div>

      <div className="vstack" style={{ gap: 16 }}>
        {posts.map(p => {
          const author = DB.userById(p.authorId);
          return (
            <div className="card post" key={p.id}>
              <div className="post-head">
                <Avatar user={author}/>
                <div>
                  <div className="name">{author?.name}{author?.role === 'admin' && <span className="role">Edson</span>}</div>
                  <div className="when">{timeAgo(p.createdAt)} atrás</div>
                </div>
              </div>
              <div className="post-body">{p.body}</div>
              <div className="post-actions">
                <button onClick={()=>setReplyTo(replyTo === p.id ? null : p.id)}><Icon name="chat" size={14}/>{p.replies.length} resposta(s)</button>
                <button><Icon name="sparkle" size={14}/>Marcar útil</button>
              </div>

              {(p.replies.length > 0 || replyTo === p.id) && (
                <div style={{ marginTop: 8 }}>
                  {p.replies.map((r, i) => {
                    const ra = DB.userById(r.authorId);
                    return (
                      <div className="reply" key={i}>
                        <Avatar user={ra}/>
                        <div className="body">
                          <span className="name">{ra?.name}{ra?.role === 'admin' && <span style={{color:'var(--gold-bright)', marginLeft:6, fontSize: 10, letterSpacing:'0.16em', textTransform:'uppercase', fontWeight: 700}}>Edson</span>}</span>
                          <span className="when">{timeAgo(r.createdAt)}</span>
                          <div className="text">{r.body}</div>
                        </div>
                      </div>
                    );
                  })}
                  {replyTo === p.id && (
                    <div className="reply" style={{ borderTop: '1px dashed var(--line-dark)' }}>
                      <Avatar user={user}/>
                      <div className="body" style={{ display:'flex', gap: 10, alignItems:'flex-start' }}>
                        <textarea
                          placeholder="Sua resposta…"
                          value={replyBody}
                          onChange={e=>setReplyBody(e.target.value)}
                          style={{ flex: 1, background: 'rgba(16,36,72,0.4)', border:'1px solid var(--line-dark)', borderRadius: 6, padding: 10, color:'var(--text-light)', fontSize: 13.5, minHeight: 60, resize:'vertical' }}
                        />
                        <button className="btn-primary" style={{ width:'auto', padding:'10px 14px', fontSize: 11 }} onClick={()=>submitReply(p.id)}>Enviar</button>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ----- Perfil -----
const Perfil = ({ user }) => {
  const [form, setForm] = React.useState({
    name: user.name, email: user.email, phone: user.phone || '',
    bio: user.bio || '', declaracaoIntencao: user.declaracaoIntencao || ''
  });
  const [saved, setSaved] = React.useState(false);

  const save = () => {
    DB.updateUser(user.id, form);
    setSaved(true);
    setTimeout(()=>setSaved(false), 2500);
  };

  return (
    <div className="app-main">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Sua conta</div>
          <h1 className="page-title">Perfil</h1>
          <p className="page-sub">Dados pessoais, declaração de intenção e preferências.</p>
        </div>
      </div>

      {saved && <div className="alert alert-success" style={{ marginBottom: 24 }}><Icon name="check" size={16}/><div>Perfil atualizado com sucesso.</div></div>}

      <div className="profile-grid">
        <div className="card profile-card">
          <Avatar user={user} size="xl" className="" />
          <div className="name">{user.name}</div>
          <div className="role">{user.role === 'admin' ? 'Administrador' : 'Mentorado'}</div>
          <p className="bio">{user.bio || 'Adicione uma breve apresentação para que os outros mentorados te conheçam.'}</p>
          <div style={{ borderTop: '1px solid var(--line-dark)', marginTop: 22, paddingTop: 18, textAlign: 'left' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-muted-2)', fontWeight: 700, marginBottom: 8 }}>Membro desde</div>
            <div style={{ fontSize: 14, color: 'var(--text-light)' }}>{formatDate(user.createdAt)}</div>
            <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-muted-2)', fontWeight: 700, marginBottom: 8, marginTop: 14 }}>Último acesso</div>
            <div style={{ fontSize: 14, color: 'var(--text-light)' }}>{timeAgo(user.lastLogin)} atrás</div>
          </div>
        </div>

        <div className="card">
          <h3 style={{ fontFamily:'Archivo, sans-serif', fontSize: 18, fontWeight: 800, marginBottom: 18, color:'var(--text-light)' }}>Dados pessoais</h3>
          <div className="field-row">
            <div className="field">
              <label>Nome completo</label>
              <input value={form.name} onChange={e=>setForm({...form, name:e.target.value})}/>
            </div>
            <div className="field">
              <label>Telefone</label>
              <input value={form.phone} onChange={e=>setForm({...form, phone:e.target.value})} placeholder="+55 11 99999-0000"/>
            </div>
          </div>
          <div className="field">
            <label>E-mail</label>
            <input value={form.email} onChange={e=>setForm({...form, email:e.target.value})} type="email"/>
          </div>
          <div className="field">
            <label>Bio curta</label>
            <textarea value={form.bio} onChange={e=>setForm({...form, bio:e.target.value})} rows={3} placeholder="Cargo, contexto profissional, o que está enfrentando agora…"/>
          </div>

          <div style={{ borderTop: '1px solid var(--line-dark)', margin: '24px 0' }}/>

          <div className="field">
            <label style={{ color: 'var(--gold-bright)' }}>Declaração de intenção</label>
            <textarea
              value={form.declaracaoIntencao}
              onChange={e=>setForm({...form, declaracaoIntencao:e.target.value})}
              rows={5}
              placeholder="Por que você está aqui? O que quer ter conquistado ao fim do programa? Este texto ficará visível no seu dashboard por toda a jornada."
            />
            <div className="hint">Esta declaração aparece no topo do seu dashboard e é revisitada na sessão de encerramento de ciclo.</div>
          </div>

          <div className="hstack mt-24" style={{ justifyContent:'flex-end' }}>
            <button className="btn-ghost">Cancelar</button>
            <button className="btn-primary" style={{ width:'auto', padding:'12px 22px' }} onClick={save}>Salvar alterações</button>
          </div>
        </div>
      </div>

      <PrivacyCenter user={user} nav={(p)=> { window.location.hash = p; }}/>
    </div>
  );
};

Object.assign(window, { Dashboard, Jornada, LessonPlayer, Materiais, LivesScreen, Comunidade, Perfil });