// 用户仪表盘
const DashboardPage = () => {
  const t = useT();
  const lang = useLang();
  const d = t.db;

  return (
    <div className="pb-scroll" style={{ background: 'var(--pb-bg)' }}>
      <PBNav active="dashboard" />

      <section style={{ padding: '40px 48px 96px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          {/* Welcome strip */}
          <div className="pb-row" style={{ justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
            <div>
              <div className="pb-mono" style={{ fontSize: 11, color: 'var(--pb-gold-700)', letterSpacing: '0.1em', marginBottom: 8 }}>{lang === 'zh' ? '2026 年 4 月 30 日 · 周三' : 'WED · APR 30, 2026'}</div>
              <h1 className="pb-h1" style={{ fontSize: 44 }}>
                {d.welcome}, <span style={{ fontStyle: 'italic' }}>{lang === 'zh' ? '陈同学' : 'Chen'}</span>
              </h1>
              <p style={{ color: 'var(--pb-fg-muted)', fontSize: 15, marginTop: 8 }}>
                {lang === 'zh' ? '距离美研秋季申请季开放还剩 142 天 · 你的申请准备度：68%' : '142 days until US grad apps open · Your readiness: 68%'}
              </p>
            </div>
            <div className="pb-row pb-gap-12">
              <button className="pb-btn pb-btn-ghost">{lang === 'zh' ? '生成新报告' : 'New report'}</button>
              <button className="pb-btn pb-btn-primary">{lang === 'zh' ? '联系主顾问' : 'Message lead'}</button>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>
            <div className="pb-col pb-gap-24">
              {/* Progress + Timeline */}
              <div className="pb-card" style={{ padding: 28 }}>
                <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 20 }}>
                  <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: 0 }}>{d.progressTitle}</h3>
                  <span style={{ fontSize: 12, color: 'var(--pb-fg-muted)' }}>{lang === 'zh' ? '总进度' : 'Total'} 68%</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
                  {[
                    { name: lang === 'zh' ? '初步评估' : 'Assessment', pct: 100 },
                    { name: lang === 'zh' ? '选校定位' : 'School list', pct: 100 },
                    { name: lang === 'zh' ? '标化考试' : 'Testing', pct: 90 },
                    { name: lang === 'zh' ? '科研活动' : 'Activities', pct: 60 },
                    { name: lang === 'zh' ? '文书材料' : 'Essays', pct: 25 },
                    { name: lang === 'zh' ? '申请投递' : 'Submit', pct: 0 },
                  ].map((s, i) => (
                    <div key={i}>
                      <div className="pb-progress-track" style={{ height: 5 }}>
                        <div className={`pb-progress-fill ${s.pct === 100 ? '' : 'gold'}`} style={{ width: `${s.pct}%`, background: s.pct === 100 ? 'var(--pb-success)' : s.pct > 0 ? 'var(--pb-gold-500)' : 'var(--pb-ink-100)' }}/>
                      </div>
                      <div style={{ fontSize: 12, marginTop: 8, fontWeight: 500 }}>{s.name}</div>
                      <div className="pb-mono" style={{ fontSize: 11, color: 'var(--pb-fg-muted)' }}>{s.pct}%</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Timeline */}
              <div className="pb-card" style={{ padding: 28 }}>
                <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 20 }}>
                  <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: 0 }}>{d.timeline}</h3>
                  <span style={{ fontSize: 12, color: 'var(--pb-fg-muted)' }}>2026 · {lang === 'zh' ? '12 个月规划' : '12-month plan'}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {[
                    { date: lang === 'zh' ? '5 月 · 本月' : 'MAY · this month', items: [lang === 'zh' ? '完成主文书初稿（PS）' : 'Finish PS draft', lang === 'zh' ? 'TOEFL 二刷' : 'TOEFL retake', lang === 'zh' ? '联络第二位推荐人' : 'Contact 2nd recommender'], status: 'active' },
                    { date: lang === 'zh' ? '6–7 月' : 'JUN–JUL', items: [lang === 'zh' ? '海外暑研项目（UCLA）' : 'Summer research at UCLA', lang === 'zh' ? '主文书第 3–5 稿' : 'PS rev 3–5'], status: 'upcoming' },
                    { date: lang === 'zh' ? '8 月' : 'AUG', items: [lang === 'zh' ? '小文书启动 · 8 所院校' : 'Supplements · 8 schools', lang === 'zh' ? '推荐信定稿' : 'Finalize rec letters'], status: 'upcoming' },
                    { date: lang === 'zh' ? '9 月 · 申请季开放' : 'SEP · App opens', items: [lang === 'zh' ? '提交早申院校（ED/EA）' : 'Submit ED/EA', lang === 'zh' ? '面试模拟轮一' : 'Mock interview round 1'], status: 'future' },
                    { date: lang === 'zh' ? '12 月 · ED 放榜' : 'DEC · ED results', items: [lang === 'zh' ? 'ED 录取或转 RD' : 'ED admit / pivot to RD'], status: 'future' },
                  ].map((row, i) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16, padding: '12px 0', borderBottom: i < 4 ? '1px dashed var(--pb-border)' : 'none' }}>
                      <div className="pb-mono" style={{ fontSize: 11, fontWeight: 600, color: row.status === 'active' ? 'var(--pb-gold-700)' : 'var(--pb-fg-muted)', letterSpacing: '0.06em', alignSelf: 'flex-start', paddingTop: 4 }}>
                        {row.status === 'active' && <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--pb-gold-500)', borderRadius: '50%', marginRight: 6 }}/>}
                        {row.date}
                      </div>
                      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                        {row.items.map((it, j) => (
                          <li key={j} style={{ display: 'flex', gap: 8, fontSize: 14, color: row.status === 'future' ? 'var(--pb-fg-muted)' : 'var(--pb-fg)' }}>
                            <span style={{ color: 'var(--pb-gold-700)' }}>·</span>{it}
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>

              {/* Tasks */}
              <div className="pb-card" style={{ padding: 28 }}>
                <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 20 }}>
                  <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: 0 }}>{d.tasks}</h3>
                  <span style={{ fontSize: 12, color: 'var(--pb-fg-muted)' }}>4 / 7 {lang === 'zh' ? '已完成' : 'done'}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    { done: true, task: lang === 'zh' ? '与王老师 1v1 周会（已完成 4/30）' : '1:1 with Wang (done 4/30)', tag: lang === 'zh' ? '会议' : 'Meeting' },
                    { done: true, task: lang === 'zh' ? '提交 PS 第 2 稿' : 'Submit PS draft v2', tag: lang === 'zh' ? '文书' : 'Essay' },
                    { done: true, task: lang === 'zh' ? '回复 UCLA 暑研接收邮件' : 'Reply to UCLA summer-research offer', tag: lang === 'zh' ? '科研' : 'Research' },
                    { done: true, task: lang === 'zh' ? '更新选校列表（去掉 UCSD）' : 'Update school list (drop UCSD)', tag: lang === 'zh' ? '选校' : 'Schools' },
                    { done: false, task: lang === 'zh' ? '联系第二位推荐人（张教授）' : 'Contact 2nd recommender (Prof. Zhang)', tag: lang === 'zh' ? '推荐信' : 'Rec letter' },
                    { done: false, task: lang === 'zh' ? '完成 TOEFL 模考一套' : 'Take 1 TOEFL mock', tag: lang === 'zh' ? '考试' : 'Test' },
                    { done: false, task: lang === 'zh' ? '签证材料预审 · 上传护照' : 'Visa prep · upload passport', tag: lang === 'zh' ? '签证' : 'Visa' },
                  ].map((t, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: t.done ? 'var(--pb-surface-alt)' : 'transparent', border: '1px solid var(--pb-border)', borderRadius: 'var(--pb-radius)' }}>
                      <div style={{
                        width: 18, height: 18, borderRadius: 4,
                        border: `1.5px solid ${t.done ? 'var(--pb-success)' : 'var(--pb-border-strong)'}`,
                        background: t.done ? 'var(--pb-success)' : 'transparent',
                        display: 'grid', placeItems: 'center', flexShrink: 0
                      }}>
                        {t.done && <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><path d="M20 6 9 17l-5-5"/></svg>}
                      </div>
                      <span style={{ flex: 1, fontSize: 14, textDecoration: t.done ? 'line-through' : 'none', color: t.done ? 'var(--pb-fg-muted)' : 'var(--pb-fg)' }}>{t.task}</span>
                      <span className="pb-tag" style={{ fontSize: 10 }}>{t.tag}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Right column */}
            <div className="pb-col pb-gap-24">
              {/* Lead counselor */}
              <div className="pb-card" style={{ padding: 24 }}>
                <div className="pb-eyebrow" style={{ marginBottom: 14 }}>{d.consultants}</div>
                <div className="pb-row pb-gap-12" style={{ marginBottom: 16 }}>
                  <div className="pb-img-placeholder" style={{ width: 56, height: 56, borderRadius: '50%' }}>WS</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 18, fontWeight: 600 }}>{lang === 'zh' ? '王思琪' : 'Siqi Wang'}</div>
                    <div style={{ fontSize: 12, color: 'var(--pb-gold-700)' }}>{lang === 'zh' ? '主顾问 · MIT MS' : 'Lead · MIT MS'}</div>
                    <div style={{ fontSize: 11, color: 'var(--pb-success)', marginTop: 4 }}>● {lang === 'zh' ? '在线' : 'Online'}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button className="pb-btn pb-btn-primary pb-btn-sm" style={{ flex: 1 }}>{lang === 'zh' ? '消息' : 'Message'}</button>
                  <button className="pb-btn pb-btn-ghost pb-btn-sm" style={{ flex: 1 }}>{lang === 'zh' ? '预约会议' : 'Book'}</button>
                </div>
                <div style={{ height: 1, background: 'var(--pb-border)', margin: '20px 0' }}/>
                <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)' }}>
                  <div style={{ marginBottom: 8 }}>{lang === 'zh' ? '文书顾问' : 'Writing coach'} · {lang === 'zh' ? '苏宛清' : 'Wanqing Su'}</div>
                  <div>{lang === 'zh' ? '面试教练' : 'Interview coach'} · {lang === 'zh' ? '林皓' : 'Hao Lin'}</div>
                </div>
              </div>

              {/* Messages */}
              <div className="pb-card" style={{ padding: 24 }}>
                <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 14 }}>
                  <div className="pb-eyebrow">{d.messages}</div>
                  <span style={{ fontSize: 11, color: 'var(--pb-danger)', fontWeight: 600 }}>3 {lang === 'zh' ? '未读' : 'unread'}</span>
                </div>
                {[
                  { who: lang === 'zh' ? '王思琪' : 'Siqi Wang', msg: lang === 'zh' ? '看了你 PS 第二稿，结构稳了。我们周五讨论…' : 'Read your PS v2 — structure is solid. Let\'s discuss Friday…', time: '14:32', unread: true },
                  { who: lang === 'zh' ? '苏宛清' : 'Wanqing Su', msg: lang === 'zh' ? '推荐信策略文档已发送，注意查收。' : 'Rec strategy doc sent, please check.', time: '12:08', unread: true },
                  { who: lang === 'zh' ? '系统通知' : 'System', msg: lang === 'zh' ? 'UCLA 暑研接收信已回复确认。' : 'UCLA summer offer confirmed.', time: '昨天', unread: true },
                ].map((m, i) => (
                  <div key={i} style={{ padding: '12px 0', borderTop: i > 0 ? '1px solid var(--pb-border)' : 'none' }}>
                    <div className="pb-row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{m.who} {m.unread && <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--pb-gold-500)', borderRadius: '50%', marginLeft: 4 }}/>}</span>
                      <span style={{ fontSize: 11, color: 'var(--pb-fg-muted)' }}>{m.time}</span>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', lineHeight: 1.4 }}>{m.msg}</div>
                  </div>
                ))}
              </div>

              {/* Reports */}
              <div className="pb-card" style={{ padding: 24 }}>
                <div className="pb-eyebrow" style={{ marginBottom: 14 }}>{d.reports}</div>
                {[
                  { name: lang === 'zh' ? '匹配报告 v3 · 完整版' : 'Match Report v3 · Full', date: '2026.04.28', tag: 'PAID' },
                  { name: lang === 'zh' ? '高考志愿测算' : 'Gaokao Calculator', date: '2026.03.12', tag: 'FREE' },
                  { name: lang === 'zh' ? '初步背景评估' : 'Initial profile eval', date: '2026.02.05', tag: 'FREE' },
                ].map((r, i) => (
                  <div key={i} style={{ padding: '12px 0', borderTop: i > 0 ? '1px solid var(--pb-border)' : 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{r.name}</div>
                      <div className="pb-mono" style={{ fontSize: 11, color: 'var(--pb-fg-muted)' }}>{r.date}</div>
                    </div>
                    <span style={{ padding: '2px 8px', fontSize: 10, fontWeight: 700, borderRadius: 3, background: r.tag === 'PAID' ? 'var(--pb-gold-100)' : 'var(--pb-navy-50)', color: r.tag === 'PAID' ? 'var(--pb-gold-700)' : 'var(--pb-navy-700)', fontFamily: 'var(--pb-mono)' }}>{r.tag}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <PBFooter />
    </div>
  );
};

window.DashboardPage = DashboardPage;