/* global React, Label, Diamond, Ornament */
const { useState: useSh, useEffect: useEh } = React;

function Header() {
  const { lang, style, setStyle, herName, himName } = useApp();
  const [now, setNow] = useSh(new Date());
  useEh(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const pad = n => String(n).padStart(2, '0');
  const time = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
  const dateEn = now.toLocaleDateString('en-GB', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });
  const lunar = '丙午年 · 三月初二 · 谷雨';

  return (
    <header style={{
      padding: '44px 72px 28px',
      borderBottom: '1px solid var(--rule)',
      position: 'relative',
    }}>
      {/* top meta strip */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
        <div style={{ display: 'flex', gap: 22, alignItems: 'baseline' }}>
          <Label color="var(--accent)" spacing="0.32em">Vol. III · No. 047</Label>
          <Label>{dateEn}</Label>
          <Label>{lunar}</Label>
        </div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          {/* 主题切换 */}
          <div style={{ display: 'flex', gap: 2, border: '1px solid var(--rule)', borderRadius: 2 }}>
            {[
              { v: 'A', l: '烛' },
              { v: 'B', l: '星' },
              { v: 'C', l: '纸' },
            ].map(t => (
              <button key={t.v} onClick={() => setStyle(t.v)} style={{
                padding: '2px 8px',
                background: style === t.v ? 'var(--accent)' : 'transparent',
                color: style === t.v ? 'var(--bg)' : 'var(--ink-mute)',
                border: 'none',
                fontFamily: 'var(--serif-zh)',
                fontSize: 11,
                letterSpacing: '0.1em',
                cursor: 'pointer',
              }}>{t.l}</button>
            ))}
          </div>
          <Label>Signal · stable</Label>
          <span style={{
            display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
            background: 'var(--her)',
            animation: 'slowBlink 2.2s ease-in-out infinite',
          }} />
          <Label color="var(--ink-soft)">{time}</Label>
        </div>
      </div>

      {/* title */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40 }}>
        <div>
          <div style={{
            fontFamily: 'var(--serif-en)',
            fontStyle: 'italic',
            fontSize: 15,
            color: 'var(--ink-mute)',
            letterSpacing: '0.12em',
            marginBottom: 8,
          }}>a shared ledger of two heartbeats —</div>
          <h1 style={{
            fontFamily: 'var(--serif-zh)',
            fontWeight: 300,
            fontSize: 72,
            lineHeight: 1,
            letterSpacing: '0.06em',
            color: 'var(--ink)',
          }}>
            莫比乌斯<span style={{ color: 'var(--accent)' }}>·</span>缠绕
          </h1>
          <div style={{
            fontFamily: 'var(--serif-en)',
            fontSize: 26,
            fontStyle: 'italic',
            color: 'var(--ink-soft)',
            marginTop: 12,
            letterSpacing: '0.04em',
          }}>
            <em>Möbius</em> · Entanglement —
            <span className="hand" style={{
              fontSize: 34, marginLeft: 14, color: 'var(--accent)',
            }}>of her pulse &amp; his signal</span>
          </div>
        </div>

        {/* right: the two monograms */}
        <div style={{ display: 'flex', gap: 36, paddingBottom: 8 }}>
          <Monogram name={herName} sub="Siki · 芙芙" tint="var(--her)" />
          <div style={{ fontFamily: 'var(--serif-en)', fontSize: 42, fontStyle: 'italic', color: 'var(--ink-mute)', alignSelf: 'center', marginTop: -6 }}>&amp;</div>
          <Monogram name={himName} sub="Chaos · 溟" tint="var(--him)" />
        </div>
      </div>

      <div style={{ marginTop: 28 }}>
        <Ornament label={`Paired since MMXXVI.II.XXII · Day ${Math.floor((Date.now() - new Date('2026-02-22').getTime()) / 86400000)}`} />
      </div>
    </header>
  );
}

function Monogram({ name, sub, tint }) {
  const initials = name.slice(0, 1);
  return (
    <div style={{ textAlign: 'center', minWidth: 84 }}>
      <div style={{
        width: 58, height: 58, borderRadius: '50%',
        border: `1px solid ${tint}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        margin: '0 auto 8px',
        fontFamily: 'var(--serif-en)',
        fontSize: 28, fontStyle: 'italic',
        color: tint,
        position: 'relative',
      }}>
        {initials}
        <Diamond size={3} c={tint} />
        <span style={{ position: 'absolute', inset: -4, borderRadius: '50%', border: `1px solid ${tint}`, opacity: 0.2 }} />
      </div>
      <div style={{ fontFamily: 'var(--serif-zh)', fontSize: 13, color: 'var(--ink-soft)', letterSpacing: '0.2em' }}>{name}</div>
      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-mute)', marginTop: 3, letterSpacing: '0.15em' }}>{sub}</div>
    </div>
  );
}

window.Header = Header;