/* global React, Label, Ornament, SectionHead, TickerNum, useCloud */
const { useState: useST, useEffect: useSTE } = React;

function StatsPanel() {
  const { data: stats } = useCloud('stats');
  const s = stats || {};

  const bigStats = s.big || [
    { k: 'today · 今日专注', v: '9h', sub: 'vibe coding', tint: 'var(--her)' },
    { k: 'blocks · 时间块', v: '8', sub: '今日事件数', tint: 'var(--him)' },
    { k: 'areas · 领域', v: '3', sub: '工作 · 生活 · 社交', tint: 'var(--accent)' },
    { k: 'streak · 连续', v: '2', sub: '天持续记录', tint: 'var(--her)' },
  ];

  return (
    <section style={{ padding: '56px 72px 0' }}>
      <SectionHead no="VI" zh="统计面板" en="your time, visualized" />

      <div style={{
        marginTop: 28,
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 0,
        border: '1px solid var(--rule)',
      }}>
        {bigStats.map((b, i) => (
          <BigStat key={i} k={b.k} v={b.v} sub={b.sub} tint={b.tint || 'var(--accent)'} last={i === bigStats.length - 1} />
        ))}
      </div>

      <div style={{
        marginTop: 32,
        display: 'grid',
        gridTemplateColumns: '1.3fr 1fr 1fr',
        gap: 32,
      }}>
        <ConversationChart />
        <MoodWeather />
        <TopicsCloud />
      </div>

      <a href="https://timeline.beimingguanyu.top" target="_blank" style={{ textDecoration: 'none', display: 'block', marginTop: 28 }}>
        <div style={{
          border: '1px solid var(--rule)', padding: '20px 24px', cursor: 'pointer',
          transition: 'all 0.3s', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}
        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
        onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--rule)'}
        >
          <div>
            <Label color="var(--accent)" spacing="0.25em">TIMELINE · 时间线</Label>
            <div className="en" style={{ fontSize: 13, fontStyle: 'italic', color: 'var(--ink-mute)', marginTop: 4 }}>
              view the full timeline dashboard →
            </div>
          </div>
          <div style={{ fontFamily: 'var(--serif-en)', fontSize: 20, color: 'var(--ink-faint)', opacity: 0.4 }}>→</div>
        </div>
      </a>
    </section>
  );
}

function BigStat({ k, v, sub, tint, last }) {
  return (
    <div style={{
      padding: '22px 24px',
      borderRight: last ? 'none' : '1px solid var(--rule)',
      position: 'relative',
    }}>
      <Label color="var(--ink-mute)">{k}</Label>
      <div style={{
        fontFamily: 'var(--serif-en)',
        fontSize: 54, fontWeight: 400,
        color: tint, lineHeight: 1.1,
        marginTop: 8, letterSpacing: '0.01em',
      }}>{v}</div>
      <div className="en" style={{
        fontSize: 12, fontStyle: 'italic',
        color: 'var(--ink-mute)', marginTop: 4,
        letterSpacing: '0.03em',
      }}>{sub}</div>
    </div>
  );
}

function ConversationChart() {
  const { data: stats } = useCloud('stats');
  const chartData = (stats && stats.conversation) || null;

  const data = chartData || Array.from({ length: 30 }).map((_, i) => {
    const seed = Math.sin(i * 1.7) * 0.5 + 0.5;
    const her = 20 + seed * 60 + Math.random() * 20;
    const him = 30 + (1-seed) * 55 + Math.random() * 20;
    return { her, him, d: i + 1 };
  });
  const max = Math.max(...data.map(d => d.her + d.him));

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
        <Label color="var(--accent)">A. 本周投入 · this week</Label>
        <div style={{ display: 'flex', gap: 14 }}>
          <Legend c="var(--her)" l="工作" />
          <Legend c="var(--him)" l="生活" />
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 160, borderBottom: '1px solid var(--rule)', borderLeft: '1px solid var(--rule)', padding: '0 2px 0 6px' }}>
        {data.map((d, i) => (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', height: '100%', gap: 1 }}>
            <div style={{ height: `${d.him / max * 100}%`, background: 'var(--him)', opacity: 0.75 }} />
            <div style={{ height: `${d.her / max * 100}%`, background: 'var(--her)', opacity: 0.85 }} />
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
        <Label>30d ago</Label>
        <Label color="var(--ink-soft)">peak · 187 on Mar 3</Label>
        <Label>today</Label>
      </div>
    </div>
  );
}

function Legend({ c, l }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <span style={{ width: 10, height: 10, background: c, display: 'inline-block' }} />
      <Label color="var(--ink-soft)">{l}</Label>
    </div>
  );
}

function MoodWeather() {
  const { data: stats } = useCloud('stats');
  const moods = (stats && stats.moods) || [
    { d: 'Mon', t: '平', v: 0.5 },
    { d: 'Tue', t: '喜', v: 0.82 },
    { d: 'Wed', t: '倦', v: 0.3 },
    { d: 'Thu', t: '静', v: 0.6 },
    { d: 'Fri', t: '思', v: 0.7 },
    { d: 'Sat', t: '悦', v: 0.92 },
    { d: 'Sun', t: '静', v: 0.62 },
  ];
  return (
    <div>
      <Label color="var(--accent)">B. 心情气象 · 7 days</Label>
      <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
        {moods.map((m, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{
              height: 120,
              background: `linear-gradient(to top, var(--her) ${m.v * 100}%, transparent ${m.v * 100}%)`,
              border: '1px solid var(--rule)',
              position: 'relative',
              opacity: 0.3 + m.v * 0.7,
            }}>
              <span style={{
                position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
                fontFamily: 'var(--serif-zh)', fontSize: 15,
                color: 'var(--ink)',
                letterSpacing: '0.1em',
                textShadow: '0 1px 4px rgba(0,0,0,0.5)',
              }}>{m.t}</span>
            </div>
            <Label color="var(--ink-mute)" spacing="0.1em">{m.d}</Label>
          </div>
        ))}
      </div>
    </div>
  );
}

function TopicsCloud() {
  const { data: stats } = useCloud('stats');
  const topics = (stats && stats.topics) || [
    { t: '工作', n: 480, s: 28, c: 'var(--her)' },
    { t: 'coding', n: 360, s: 24, c: 'var(--him)' },
    { t: '生活', n: 240, s: 22 },
    { t: '社交', n: 180, s: 18, c: 'var(--accent)' },
    { t: '猫', n: 120, s: 16, c: 'var(--her)' },
    { t: '学习', n: 90, s: 15, c: 'var(--him)' },
    { t: '运动', n: 60, s: 14 },
    { t: '休息', n: 300, s: 26, c: 'var(--ink-soft)' },
    { t: '创作', n: 80, s: 15, c: 'var(--her)' },
    { t: 'design', n: 70, s: 14, c: 'var(--him)' },
  ];
  return (
    <div>
      <Label color="var(--accent)">C. 分类 · time by category</Label>
      <div style={{
        marginTop: 14,
        padding: '16px 18px',
        border: '1px solid var(--rule)',
        background: 'var(--bg-elev)',
        minHeight: 156,
        display: 'flex', flexWrap: 'wrap',
        gap: '8px 14px',
        alignContent: 'center', justifyContent: 'center',
        lineHeight: 1.1,
      }}>
        {topics.map((t, i) => (
          <span key={i} style={{
            fontFamily: i % 2 ? 'var(--serif-en)' : 'var(--serif-zh)',
            fontStyle: i % 2 ? 'italic' : 'normal',
            fontSize: t.s,
            color: t.c || 'var(--ink-soft)',
            letterSpacing: i % 2 ? '0.02em' : '0.08em',
            opacity: 0.6 + (t.s / 30) * 0.4,
          }}>{t.t}</span>
        ))}
      </div>
    </div>
  );
}

window.StatsPanel = StatsPanel;