/* global React */

const { useState: useStateP } = React;

function MoodPanel({ onBack }) {
  const { I, Seal } = window.UI;
  const [shaking, setShaking] = useStateP(false);
  const [drawn, setDrawn] = useStateP(true);

  const handleShake = () => {
    setShaking(true);
    setTimeout(() => { setShaking(false); setDrawn(true); }, 900);
  };

  return (
    <div style={{ minHeight: 'calc(100vh - 42px)', background: 'var(--bg)', padding: '32px 48px' }}
      data-screen-label="05 MoodPanel">

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div>
          <div className="cn-caps">每日一签 · 竹签筒求签</div>
          <div className="serif" style={{ fontSize: 36, letterSpacing: '0.25em', marginTop: 6 }}>花  签</div>
        </div>
        <button className="btn" onClick={onBack}><I.chev d="left"/> 返回</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 32, marginTop: 28 }}>
        <div style={{ position: 'relative', background: 'var(--paper)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line)', padding: 40, minHeight: 520, display: 'grid', placeItems: 'center' }}>
          <svg viewBox="0 0 280 420" style={{
            width: 280, height: 420,
            animation: shaking ? 'shake-tube 0.15s ease-in-out 6' : 'none',
            transformOrigin: '140px 350px',
          }}>
            <defs>
              <linearGradient id="bamb" x1="0" x2="1">
                <stop offset="0%" stopColor="oklch(0.55 0.06 100)"/>
                <stop offset="50%" stopColor="oklch(0.70 0.08 100)"/>
                <stop offset="100%" stopColor="oklch(0.45 0.05 100)"/>
              </linearGradient>
            </defs>
            <ellipse cx="140" cy="350" rx="80" ry="14" fill="oklch(0.22 0.012 60 / 0.18)"/>
            <rect x="70" y="140" width="140" height="210" rx="6" fill="url(#bamb)"/>
            <line x1="70" y1="200" x2="210" y2="200" stroke="oklch(0.35 0.05 100)" strokeWidth="1.5"/>
            <line x1="70" y1="270" x2="210" y2="270" stroke="oklch(0.35 0.05 100)" strokeWidth="1.5"/>
            <ellipse cx="140" cy="140" rx="70" ry="12" fill="oklch(0.40 0.06 100)"/>
            {[-36, -18, 0, 20, 40].map((x, i) => (
              <g key={i}>
                <rect x={138 + x} y={i === 2 ? 40 : 60 + i * 4} width="4" height={i === 2 ? 110 : 90} fill={i === 2 ? 'var(--zhusha)' : 'oklch(0.80 0.04 90)'} rx="1"/>
                {i === 2 && <circle cx={140} cy={35} r="6" fill="var(--zhusha)"/>}
              </g>
            ))}
          </svg>

          <div style={{ position: 'absolute', top: 30, right: 30 }}>
            <Seal size="sm" rotate={8}>谷雨<br/>吉签</Seal>
          </div>
          <div style={{ position: 'absolute', bottom: 28, left: 0, right: 0, textAlign: 'center' }}>
            <button className="btn zhusha" onClick={handleShake} style={{ padding: '12px 28px', fontFamily: 'var(--font-serif)', letterSpacing: '0.3em' }}>
              摇  签
            </button>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 10 }}>今日剩余 1 次 · 空格键触发</div>
          </div>
        </div>

        <div className="paper-bg" style={{
          position: 'relative', borderRadius: 'var(--radius-lg)',
          border: '1px solid var(--line)', padding: '40px 48px',
          display: 'flex', flexDirection: 'column',
          opacity: drawn ? 1 : 0.3,
          transition: 'opacity 0.4s',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div className="cn-caps">第二十二签 · 上上</div>
              <div className="serif" style={{ fontSize: 30, letterSpacing: '0.15em', marginTop: 8 }}>海棠春睡</div>
            </div>
            <Seal rotate={-4}>上<br/>上</Seal>
          </div>

          <div style={{ height: 1, background: 'var(--ink-3)', opacity: 0.3, margin: '24px 0' }}/>

          <div className="serif" style={{ fontSize: 18, lineHeight: 2.2, letterSpacing: '0.12em', textAlign: 'center', padding: '12px 0' }}>
            只恐夜深花睡去<br/>
            故烧高烛照红妆
          </div>
          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-serif)', marginTop: 4 }}>
            — 苏轼《海棠》
          </div>

          <div style={{ height: 1, background: 'var(--ink-3)', opacity: 0.3, margin: '24px 0' }}/>

          <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 16, rowGap: 14, fontSize: 13 }}>
            <div className="cn-caps" style={{ letterSpacing: '0.3em' }}>签 解</div>
            <div className="serif" style={{ lineHeight: 1.8, color: 'var(--ink-2)' }}>
              春事正浓，所谋之事如海棠初绽，虽未大放，然生机勃发。宜静待，忌燥进。
            </div>
            <div className="cn-caps" style={{ letterSpacing: '0.3em' }}>宜</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <span className="pill zhusha">赏海棠</span><span className="pill zhusha">访友</span><span className="pill zhusha">题诗</span><span className="pill zhusha">品茗</span>
            </div>
            <div className="cn-caps" style={{ letterSpacing: '0.3em' }}>忌</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <span className="pill">争执</span><span className="pill">夜行</span><span className="pill">决断</span>
            </div>
          </div>

          <div style={{ flex: 1 }}/>

          <div style={{ display: 'flex', gap: 10, marginTop: 28, borderTop: '1px dotted var(--line)', paddingTop: 16 }}>
            <button className="btn" style={{ flex: 1 }}><I.share/> 生成签面卡片</button>
            <button className="btn primary" style={{ flex: 1 }}><I.pin/> 跳转海棠景点</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function DiaryPanel({ onBack }) {
  const { I } = window.UI;

  const BADGES = [
    ['探花者', '打卡 15 处', 'gold', true],
    ['采花令', '采 15 种', 'silver', true],
    ['踏青者', '跨 6 区', 'silver', true],
    ['四季', '跨 3 季', 'bronze', true],
    ['古都寻花', '访 3 古都', 'gold', true],
    ['南北花使', '南北跨区', 'silver', true],
    ['月月赏花', '12 月不辍', 'diamond', false],
    ['高原花使', '海拔 3000+', 'diamond', false],
  ];

  return (
    <div style={{ minHeight: 'calc(100vh - 42px)', background: 'var(--bg)', padding: '32px 48px' }}
      data-screen-label="06 DiaryPanel">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
        <div>
          <div className="cn-caps">个人花历 · 2026</div>
          <div className="serif" style={{ fontSize: 36, letterSpacing: '0.25em', marginTop: 6 }}>花  历</div>
          <div className="serif" style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 8 }}>
            已打卡 15 处 · 采 13 种 · 跨 5 区 · 3 季 · 6 枚徽章
          </div>
        </div>
        <button className="btn" onClick={onBack}><I.chev d="left"/> 返回</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 24 }}>
        <div className="card" style={{ padding: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
            <div className="cn-caps">年度花事</div>
            <div style={{ display: 'flex', gap: 12, fontSize: 10, color: 'var(--ink-3)', alignItems: 'center' }}>
              <span>少</span>
              {[0.15, 0.35, 0.55, 0.75, 1].map((o, i) => (
                <span key={i} style={{ width: 12, height: 12, background: `oklch(0.58 0.15 35 / ${o})`, borderRadius: 2 }}/>
              ))}
              <span>多</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(52, 1fr)', gap: 2 }}>
            {Array.from({ length: 52 * 7 }).map((_, i) => {
              const seed = (i * 2654435761) % 100;
              const visited = seed > 60 && i > 60 && i < 200;
              return <div key={i} style={{
                aspectRatio: '1', borderRadius: 2,
                background: visited ? `oklch(0.58 0.15 35 / ${0.2 + (seed % 60) / 80})` : 'var(--bg-sunk)',
              }}/>;
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: 'var(--font-serif)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.15em' }}>
            {['立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑'].map(j => <span key={j}>{j}</span>)}
          </div>

          <div style={{ height: 1, background: 'var(--line-2)', margin: '24px 0' }}/>

          <div className="cn-caps" style={{ marginBottom: 14 }}>近期笔记</div>
          {[
            ['04.14', '玉渊潭 · 樱花', '风起，染井吉野落英缤纷，游人摄影者甚多…'],
            ['04.08', '元大都 · 海棠', '老舍笔下的海棠花溪，西府与垂丝并立…'],
            ['03.28', '颐和园 · 桃花', '西堤一带初绽，湖光山色相映…'],
          ].map(([d, t, n]) => (
            <div key={d} style={{ padding: '12px 0', borderBottom: '1px dotted var(--line)', display: 'flex', gap: 16 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', paddingTop: 2 }}>{d}</div>
              <div style={{ flex: 1 }}>
                <div className="serif" style={{ fontSize: 13 }}>{t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 3, fontFamily: 'var(--font-serif)' }}>{n}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
            <div className="cn-caps">成就徽章 · 6 / 25</div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--jin)' }}>LV. 金花</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {BADGES.map(([name, cond, tier, unlocked]) => {
              const tierColor = {
                bronze: 'oklch(0.55 0.12 55)',
                silver: 'oklch(0.70 0.02 260)',
                gold:   'var(--jin)',
                diamond:'oklch(0.65 0.08 200)',
              }[tier];
              return (
                <div key={name} style={{
                  aspectRatio: '1',
                  border: `1px solid ${unlocked ? tierColor : 'var(--line)'}`,
                  borderRadius: 'var(--radius-md)',
                  padding: 10,
                  background: unlocked ? `color-mix(in oklch, ${tierColor} 8%, var(--bg-elev))` : 'var(--bg-sunk)',
                  opacity: unlocked ? 1 : 0.5,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  position: 'relative',
                }}>
                  <div style={{ position: 'absolute', top: 8, right: 8, width: 6, height: 6, borderRadius: '50%', background: tierColor }}/>
                  <div style={{
                    width: 30, height: 30, borderRadius: '50%',
                    background: unlocked ? tierColor : 'transparent',
                    border: unlocked ? 'none' : `1px dashed var(--ink-4)`,
                    display: 'grid', placeItems: 'center',
                    color: unlocked ? 'var(--paper)' : 'var(--ink-4)',
                    fontFamily: 'var(--font-serif)', fontSize: 11, letterSpacing: '0.1em',
                  }}>{unlocked ? '印' : '？'}</div>
                  <div>
                    <div className="serif" style={{ fontSize: 12, lineHeight: 1.3 }}>{name}</div>
                    <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', marginTop: 2 }}>{cond}</div>
                  </div>
                </div>
              );
            })}
          </div>

          <div style={{ height: 1, background: 'var(--line-2)', margin: '20px 0' }}/>

          <div className="cn-caps" style={{ marginBottom: 10 }}>足迹 · 5 大区</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
            {['华北 · 8', '华东 · 4', '华中 · 2', '西南 · 1', '西北 · 0', '东北 · 0'].map(t => (
              <span key={t} className="pill">{t}</span>
            ))}
          </div>

          <div style={{ background: 'var(--bg-sunk)', borderRadius: 'var(--radius-md)', padding: 14, marginTop: 8 }}>
            <div className="cn-caps">下一枚徽章</div>
            <div className="serif" style={{ fontSize: 14, marginTop: 6 }}>花中帝王 · 金</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, fontFamily: 'var(--font-serif)' }}>再打卡 15 处可解锁</div>
            <div style={{ height: 3, background: 'var(--bg)', borderRadius: 2, marginTop: 10, overflow: 'hidden' }}>
              <div style={{ width: '50%', height: '100%', background: 'var(--jin)' }}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MoodPanel = MoodPanel;
window.DiaryPanel = DiaryPanel;