// upprofiler — Dashboard /dashboard

function PageDashboard({ onNavigate, score = 71, alertOn, dismissAlert }) {
  const trend90 = [54, 56, 55, 58, 60, 59, 62, 61, 60, 62, 64, 63, 65, 66, 64, 67, 68, 67, 69, 68, 70, 71, 70, 67, 71];
  const events = [
    { index: 8, label: 'Profile rewrite' },
    { index: 16, label: 'Algorithm shift' },
    { index: 22, label: 'DM script post · 418k' },
  ];

  const contributors = [
    { title: '"I\'ve been writing online for 17 years. Today, I run a business in 70+ countries."', delta: 4.2, kind: 'good', impressions: '418k', engagement: '7.1%' },
    { title: '"I don\'t sell courses. I coach. Here\'s the difference."', delta: 2.1, kind: 'good', impressions: '192k', engagement: '5.3%' },
    { title: '"Jasmin Alić posts 4 times a week. That\'s it. Here\'s why it works."', delta: 1.7, kind: 'good', impressions: '101k', engagement: '5.8%' },
  ];
  const detractors = [
    { title: '"Bosnian coffee + sunset · just enjoying life"', delta: -2.4, kind: 'warn', reason: 'Off-pillar · lifestyle · 0% ICP match' },
    { title: '"Hot take Tuesday · unpopular opinion"', delta: -1.1, kind: 'warn', reason: 'Cliché framing, pulls students not buyers' },
    { title: '"Just thinking out loud on a Sunday"', delta: -0.8, kind: 'warn', reason: 'No clear story, no conviction' },
  ];

  return (
    <div>
      <Nav current="/dashboard" onNavigate={onNavigate} score={score} delta={9} />
      <div className="page">
        <PageHeader
          id="/dashboard"
          name="Hey Jasmin. Good morning."
          sub="Conviction is up 9 points this month. The shift? You leaned harder into storytelling and DM-to-sales, and dialled down the lifestyle posts. Keep going."
          tag={{ kind: 'ink', label: 'Home' }}
          right={<span className="label-mono">Last sync · 28 Apr · 06:14 GMT</span>}
        />

        {alertOn && (
          <div style={{ marginBottom: 32 }}>
            <AlgoAlert onDismiss={dismissAlert} onView={() => onNavigate('/alerts')} />
          </div>
        )}

        {/* Hero row: score ring + trend */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24, marginBottom: 24 }}>
          <Card id="/dashboard.score" title="Today's conviction" tag={{ kind: 'pink', label: 'Live' }}
            style={{ background: 'var(--gradient-hero)', padding: 40, display: 'flex', flexDirection: 'column' }}>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 0' }}>
              <ScoreRing value={score} size={340} delta={9} animateKey="dashboard" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
              {[
                ['vs yesterday', '+0.4', 'good'],
                ['vs 30d ago', '+9', 'good'],
                ['vs 90d ago', '+17', 'good'],
              ].map(([l, v, k]) => (
                <div key={l}>
                  <div className="label-mono">{l}</div>
                  <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: `var(--${k})`, marginTop: 4, fontFamily: 'var(--font-mono)' }}>{v}</div>
                </div>
              ))}
            </div>
          </Card>

          <Card id="/dashboard.trend" title="90-day conviction trend" tag={{ label: '0–100 scale' }}>
            <TrendChart data={trend90} events={events} width={700} height={260} />
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
              <span className="label-mono">28 Jan</span>
              <span className="label-mono">14 Feb</span>
              <span className="label-mono">02 Mar</span>
              <span className="label-mono">19 Mar</span>
              <span className="label-mono">05 Apr</span>
              <span className="label-mono">28 Apr</span>
            </div>
            <div className="row gap-24" style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)', flexWrap: 'wrap' }}>
              {events.map((e, i) => (
                <div key={i} className="row gap-8">
                  <span style={{ width: 8, height: 8, borderRadius: 100, background: 'var(--pink)' }}></span>
                  <span className="label-mono">{e.label}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Contributors / detractors */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
          <Card id="/dashboard.lift" title="Top contributors · 30d" tag={{ kind: 'good', label: 'Lifting' }}>
            <div className="col gap-12" style={{ marginTop: 4 }}>
              {contributors.map((p, i) => (
                <div key={i} className="row" style={{ padding: '14px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none', gap: 16 }}>
                  <div style={{ width: 28, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mute)' }}>0{i+1}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.4 }}>{p.title}</div>
                    <div className="row gap-12 mt-8">
                      <span className="label-mono">{p.impressions} impressions</span>
                      <span style={{ color: 'var(--line)' }}>·</span>
                      <span className="label-mono">{p.engagement} engagement</span>
                    </div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 500, color: 'var(--good)' }}>+{p.delta}</div>
                </div>
              ))}
            </div>
          </Card>

          <Card id="/dashboard.drift" title="Top detractors · 30d" tag={{ kind: 'warn', label: 'Drifting' }}>
            <div className="col gap-12" style={{ marginTop: 4 }}>
              {detractors.map((p, i) => (
                <div key={i} className="row" style={{ padding: '14px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none', gap: 16 }}>
                  <div style={{ width: 28, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mute)' }}>0{i+1}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.4 }}>{p.title}</div>
                    <div className="label-mono mt-8">{p.reason}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 500, color: 'var(--warn)' }}>{p.delta}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Quick actions */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            ['/check', 'Score a draft', 'Paste it. I\'ll tell you if it\'s a yes.', 'Daily ritual'],
            ['/pillars', 'Story pillars', 'What you claim vs what you post.', 'Diagnostic'],
            ['/profile/rewrite', 'Profile rewrites', '3 sections rewritten this month.', 'Monthly'],
            ['/audience', 'ICP audit', '47% of your audience are buyers.', 'Builder tier'],
          ].map(([href, title, sub, tag]) => (
            <div key={href} className="card hoverable" style={{ cursor: 'pointer', padding: 20 }} onClick={() => onNavigate(href)}>
              <div className="row between" style={{ marginBottom: 12 }}>
                <span className="card-id">{href}</span>
                <span className="tag">{tag}</span>
              </div>
              <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{title}</div>
              <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 6 }}>{sub}</div>
              <div style={{ marginTop: 16, fontSize: 13, color: 'var(--pink)', fontWeight: 700 }}>Open →</div>
            </div>
          ))}
        </div>
      </div>
      <Footer />
    </div>
  );
}

window.PageDashboard = PageDashboard;