/* Dashboard — Início */
const { useState: useStateD, useEffect: useEffectD } = React;

function GoalRing({ value = 0, size = 50 }) {
  const r = (size - 7) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - Math.min(100, value) / 100);
  return (
    <svg className="goal-ring" width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--border)" strokeWidth="5" />
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--blue)" strokeWidth="5"
        strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}
        transform={`rotate(-90 ${size / 2} ${size / 2})`} />
    </svg>
  );
}

const MODE_LABELS = { guided: 'Treino guiado', real: 'Conversa livre', pronunciation: 'Pronúncia' };
const TOPIC_LABELS = { work: 'Trabalho', travel: 'Viagem', 'small-talk': 'Small talk', 'daily-life': 'Vida diária', opinions: 'Opiniões' };

function scoreColor(score) {
  if (!score) return 'var(--ink-faint)';
  if (score >= 80) return 'var(--green)';
  if (score >= 60) return 'var(--amber)';
  return 'var(--coral)';
}

function LastSession({ last }) {
  if (!last) {
    return (
      <article className="card last-card">
        <div className="section-title" style={{ margin: '0 0 18px' }}><h2>Última sessão</h2></div>
        <p style={{ color: 'var(--ink-faint)', fontSize: '14px' }}>Nenhuma sessão concluída ainda.</p>
      </article>
    );
  }

  const score = last.score ? (last.score / 10).toFixed(1) : '-';
  const pron  = last.pronunciation ? (last.pronunciation / 10).toFixed(1) : '-';
  const flu   = last.fluency ? (last.fluency / 10).toFixed(1) : '-';
  const gram  = last.grammar ? (last.grammar / 10).toFixed(1) : '-';
  const vocab = last.vocabulary ? (last.vocabulary / 10).toFixed(1) : '-';

  const date = last.completedAt ? new Date(last.completedAt) : null;
  const dateStr = date ? date.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }) : '';
  const modeLabel  = MODE_LABELS[last.mode]  || last.mode  || 'Sessão';
  const topicLabel = TOPIC_LABELS[last.topic] || last.topic || '';

  return (
    <article className="card last-card">
      <div className="section-title" style={{ margin: '0 0 18px' }}><h2>Última sessão</h2></div>
      <div className="last-head">
        <div className="last-score" style={{ color: scoreColor(last.score), background: 'var(--surface-2)' }}>{score}</div>
        <div className="last-head-meta">
          <strong>{modeLabel}{topicLabel ? ` · ${topicLabel}` : ''}</strong>
          <span>{dateStr}</span>
        </div>
      </div>
      <div className="last-stats">
        <div className="last-stat"><span>Pronúncia</span><strong>{pron}</strong></div>
        <div className="last-stat"><span>Fluência</span><strong>{flu}</strong></div>
        <div className="last-stat"><span>Gramática</span><strong>{gram}</strong></div>
        <div className="last-stat"><span>Vocab.</span><strong>{vocab}</strong></div>
      </div>
      <button className="btn btn-soft btn-sm" style={{ marginTop: '18px', alignSelf: 'flex-start' }}>
        Ver resumo completo <Icon name="arrowRight" size={16} />
      </button>
    </article>
  );
}

function Dashboard({ onStartPractice, user }) {
  const hour = new Date().getHours();
  const greet = hour < 12 ? 'Bom dia' : hour < 18 ? 'Boa tarde' : 'Boa noite';
  const firstName = user?.name ? user.name.split(' ')[0] : '';

  const [data, setData] = useStateD(null);
  const [loading, setLoading] = useStateD(true);

  useEffectD(() => {
    setData(null);
    setLoading(true);
    fetch('/api/dashboard', { credentials: 'same-origin' })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setData(d); })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [user?.id]);

  const streak      = data?.streak ?? 0;
  const week        = data?.week ?? [];
  const daysThisWeek = data?.daysThisWeek ?? 0;
  const workDays    = data?.workDays ?? 5;
  const lastSession = data?.lastSession ?? null;

  const cards = [
    { key: 'guided', icon: 'mic', tone: 'blue', title: 'Treino guiado', desc: 'Responda perguntas do coach e receba nota e correção a cada fala.' },
    { key: 'free', icon: 'message', tone: 'green', title: 'Conversa livre', desc: 'Bate-papo aberto sobre o tema que você escolher, no seu ritmo.' },
    { key: 'pron', icon: 'waves', tone: 'violet', title: 'Treino de pronúncia', desc: 'Repita frases-alvo e veja seu score palavra por palavra.' },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <h1>{greet}{firstName ? `, ${firstName}` : ''}</h1>
        <p className="greet-sub">Que bom te ver de novo. Vamos manter o ritmo de hoje.</p>
      </div>

      <div className="streak-band">
        <div className="streak-flame"><Icon name="flame" size={26} /></div>
        <div className="streak-main">
          <strong><b>{streak} {streak === 1 ? 'dia' : 'dias'}</b> {streak === 1 ? 'seguido' : 'seguidos'}</strong>
          <p>Meta de hoje: 15 minutos falando em voz alta</p>
        </div>
        <div className="streak-goal">
          <div className="goal-meta">
            <strong>{daysThisWeek} / {workDays} dias</strong>
            <span>esta semana</span>
          </div>
          <GoalRing value={workDays > 0 ? Math.round((daysThisWeek / workDays) * 100) : 0} />
        </div>
      </div>

      <div className="section-title"><h2>Comece a praticar</h2></div>
      <div className="quick-grid">
        {cards.map((c) => (
          <article key={c.key} className="practice-card">
            <div className={'pc-icon ' + c.tone}><Icon name={c.icon} size={24} /></div>
            <h3>{c.title}</h3>
            <p>{c.desc}</p>
            <button className="btn btn-primary btn-sm" onClick={onStartPractice}>
              Começar <Icon name="arrowRight" size={17} />
            </button>
          </article>
        ))}
      </div>

      <div className="dash-2col" style={{ marginTop: '16px' }}>
        <article className="card week-card">
          <div className="section-title" style={{ margin: '0 0 18px' }}>
            <h2>Seu progresso esta semana</h2>
            <span className="faint" style={{ fontSize: '13.5px' }}>{daysThisWeek} de {workDays} dias</span>
          </div>
          {loading ? (
            <p style={{ color: 'var(--ink-faint)', fontSize: '14px' }}>Carregando...</p>
          ) : (
            <>
              <div className="week-row">
                {week.map((w, i) => (
                  <div key={i} className={'week-day' + (w.today ? ' today' : '') + (w.rest ? ' rest' : '')}>
                    <div className="week-bar-track">
                      <div className="week-bar-fill" style={{ height: (w.rest ? 8 : w.done ? 100 : 8) + '%' }} />
                    </div>
                    <span className="week-day-label">{w.d}</span>
                  </div>
                ))}
              </div>
              <div className="week-legend">
                <span><i className="dot" style={{ background: 'var(--blue)' }} /> Dia praticado</span>
                <span><i className="dot" style={{ background: 'var(--blue-700)' }} /> Hoje</span>
                <span><i className="dot" style={{ background: 'var(--border-strong)' }} /> Descanso</span>
              </div>
            </>
          )}
        </article>

        <LastSession last={lastSession} />
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });