/* global React */

const HUAXIN = [
  { jq: '小寒', f: ['梅花', '山茶', '水仙'] },
  { jq: '大寒', f: ['瑞香', '兰花', '山矾'] },
  { jq: '立春', f: ['迎春', '樱桃', '望春'] },
  { jq: '雨水', f: ['菜花', '杏花', '李花'] },
  { jq: '惊蛰', f: ['桃花', '棠棣', '蔷薇'] },
  { jq: '春分', f: ['海棠', '梨花', '木兰'] },
  { jq: '清明', f: ['桐花', '麦花', '柳花'] },
  { jq: '谷雨', f: ['牡丹', '荼蘼', '楝花'] },
];

function HuaxinPanel({ onBack }) {
  const { I, Seal, PetalMark } = window.UI;
  const activeJq = 7, activeHou = 1;

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

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
        <div>
          <div className="cn-caps">二十四番 · 八气二十四候</div>
          <div className="serif" style={{ fontSize: 42, letterSpacing: '0.2em', marginTop: 6 }}>花  信  风</div>
          <div className="serif" style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 10, letterSpacing: '0.1em' }}>
            小寒至谷雨 · 八节气 · 每五日一候 · 每候一花信
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>今日 2026.04.18 · 第 22 候</span>
          <button className="btn" onClick={onBack}><I.chev d="left"/> 返回花事地图</button>
        </div>
      </div>

      <div style={{
        position: 'relative',
        background: 'var(--bg-elev)',
        border: '1px solid var(--line)',
        borderRadius: 'var(--radius-lg)',
        padding: '28px 36px 36px',
        overflow: 'hidden',
      }}>
        <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.15 }} viewBox="0 0 1400 400" preserveAspectRatio="none">
          <path d="M0 80 C 300 40, 700 120, 1400 60" fill="none" stroke="var(--qing)" strokeWidth="1"/>
          <path d="M0 200 C 400 150, 900 260, 1400 180" fill="none" stroke="var(--qing)" strokeWidth="1"/>
          <path d="M0 320 C 300 280, 800 360, 1400 300" fill="none" stroke="var(--qing)" strokeWidth="1"/>
        </svg>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 4, position: 'relative' }}>
          {HUAXIN.map((jq, i) => (
            <div key={jq.jq} style={{ textAlign: 'center', position: 'relative' }}>
              <div style={{
                padding: '10px 0', borderBottom: `1px solid ${i === activeJq ? 'var(--zhusha)' : 'var(--line)'}`,
              }}>
                <div className="serif" style={{
                  fontSize: 20, letterSpacing: '0.12em',
                  color: i === activeJq ? 'var(--zhusha)' : 'var(--ink)',
                }}>{jq.jq}</div>
                <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', marginTop: 2 }}>
                  {['01.05','01.20','02.04','02.19','03.05','03.20','04.05','04.20'][i]}
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 12 }}>
                {jq.f.map((flower, j) => {
                  const isActive = i === activeJq && j === activeHou;
                  const isPast = i < activeJq || (i === activeJq && j < activeHou);
                  return (
                    <div key={j} style={{
                      position: 'relative',
                      padding: '10px 6px',
                      background: isActive ? 'var(--zhusha)' : (isPast ? 'var(--bg-sunk)' : 'transparent'),
                      color: isActive ? 'var(--paper)' : (isPast ? 'var(--ink-3)' : 'var(--ink)'),
                      borderRadius: 'var(--radius-sm)',
                      border: isActive ? 'none' : '1px solid var(--line-2)',
                      cursor: 'pointer',
                      transition: 'all 0.2s',
                    }}>
                      <div className="mono" style={{ fontSize: 9, opacity: 0.7 }}>{['初','二','三'][j]}候</div>
                      <div className="serif" style={{ fontSize: 14, marginTop: 2, letterSpacing: '0.05em' }}>{flower}</div>
                      {isActive && <div style={{
                        position: 'absolute', top: -4, right: -4,
                        width: 8, height: 8, borderRadius: '50%', background: 'var(--jin)',
                        boxShadow: '0 0 0 2px var(--bg-elev)',
                      }}/>}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        <div style={{ position: 'absolute', bottom: 14, right: 18 }}>
          <Seal size="sm" rotate={-3}>花信<br/>有时</Seal>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 20, marginTop: 24 }}>
        <div className="card" style={{ padding: 24 }}>
          <div className="cn-caps">当前花信 · 22/24</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 8 }}>
            <span className="serif" style={{ fontSize: 44, letterSpacing: '0.1em' }}>荼蘼</span>
            <span className="serif" style={{ fontSize: 14, color: 'var(--ink-2)' }}>谷雨 · 二候</span>
          </div>
          <div className="serif" style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.9 }}>
            荼蘼不争春，寂寞开最晚。<br/>
            谷雨二候，荼蘼风至，意春事将阑。全国 184 处荼蘼进入盛花期，多分布于江南私家园林与寺院石栏。
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 18, flexWrap: 'wrap' }}>
            <span className="pill qing">花语 · 末路之美</span>
            <span className="pill">别名 · 佛见笑</span>
            <span className="pill">科属 · 蔷薇</span>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
            <button className="btn primary">查看地图 · 184 处</button>
            <button className="btn">花卉百科</button>
          </div>
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div className="cn-caps">关联景点</div>
          {[
            ['苏州·拙政园', '盛花 · 第 3 日', '★★★★★'],
            ['南京·栖霞寺', '盛花 · 第 1 日', '★★★★☆'],
            ['扬州·个园', '初花', '★★★★☆'],
            ['杭州·灵隐寺', '含苞', '★★★☆☆'],
          ].map(([n, s, r], i) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', padding: '12px 0', borderBottom: i < 3 ? '1px dotted var(--line)' : 'none', gap: 10 }}>
              <PetalMark active={s.includes('盛')}/>
              <div style={{ flex: 1 }}>
                <div className="serif" style={{ fontSize: 13 }}>{n}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{s}</div>
              </div>
              <span className="mono" style={{ fontSize: 10, color: 'var(--jin)' }}>{r}</span>
            </div>
          ))}
        </div>

        <div className="card paper-bg" style={{ padding: 24 }}>
          <div className="cn-caps">诗词</div>
          <div className="serif" style={{ fontSize: 13, lineHeight: 2.1, marginTop: 12, letterSpacing: '0.08em' }}>
            开到荼蘼花事了<br/>
            丝丝天棘出莓墙
          </div>
          <div style={{ marginTop: 10, fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-serif)' }}>
            — 王淇《春暮游小园》
          </div>
          <div style={{ height: 1, background: 'var(--line-2)', margin: '18px 0' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--bg-sunk)', display: 'grid', placeItems: 'center' }}>
              <window.UI.I.music/>
            </div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 12 }}>荼蘼 · 古琴曲</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>3:24 · 五声音阶</div>
            </div>
            <button className="btn sm"><window.UI.I.play/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.HuaxinPanel = HuaxinPanel;