/* global React, Button, SealIcon, CloudDivider */
const { useState: useStateHero } = React;

function Hero({ onCompose, onLogin }) {
  return (
    <section className="bx-hero">
      <span className="eyebrow">BIXIA MAILBOX · 陛下信箱</span>
      <h1 className="bx-hero__title">陛下信箱</h1>
      <p className="bx-hero__subtitle">爱卿有事,不妨上奏</p>
      <p className="bx-hero__lede serif-body">朕在此设信箱一座,以听天下爱卿之言。<br/>凡情之所困、事之所艰、心之所念,皆可呈奏。<br/>朕必批阅,或于朝堂宣读,或赐之御言。</p>
      <div className="bx-hero__cta">
        <Button variant="primary" size="lg" onClick={onCompose} icon={<SealIcon size={16} color="#fff"/>}>呈递奏折</Button>
        <Button variant="tertiary" onClick={onLogin}>登入朝堂 →</Button>
      </div>
    </section>
  );
}

function StatsStrip({ stats }) {
  return (
    <section className="bx-stats">
      {stats.map((s, i) => (
        <React.Fragment key={s.label}>
          <div className="bx-stats__item">
            <span className="eyebrow">{s.label}</span>
            <div className="bx-stats__num">
              <span className={`stat-num ${s.accent ? 'is-bronze' : ''}`}>{s.value}</span>
              <span className="bx-stats__unit">{s.unit}</span>
            </div>
          </div>
          {i < stats.length - 1 && <div className="bx-stats__sep"/>}
        </React.Fragment>
      ))}
    </section>
  );
}

function LetterCard({ letter, onClick, onShare }) {
  function handleShare(e) {
    e.stopPropagation();
    if (onShare) onShare(letter);
  }
  return (
    <article className={'bx-letter' + (letter.praised ? ' bx-letter--praised' : '')} onClick={onClick}>
      <header className="bx-letter__head">
        <span className="bx-letter__author">{letter.anonymous ? '某位爱卿' : letter.author}</span>
        <div style={{display:'flex', gap:6, alignItems:'center'}}>
          {letter.praised && <span className="bx-letter__praise" title="陛下赞赏过">陛下赞赏过</span>}
          <span className="bx-letter__tag">{letter.category}</span>
        </div>
      </header>
      <h3 className="bx-letter__title">{letter.title}</h3>
      <p className="bx-letter__excerpt">{letter.excerpt}</p>
      <footer className="bx-letter__foot">
        <span className="bx-letter__date">{letter.date} · {letter.status}</span>
        <span style={{display:'inline-flex', gap:8, alignItems:'center'}}>
          {letter.video && <span className="bx-letter__act">观看宣读 →</span>}
          {onShare && (
            <button className="bx-letter__share-btn" onClick={handleShare} title="生成奏折封面图分享">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{verticalAlign:'-2px'}}>
                <circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8.3 10.8L15.7 7.2M8.3 13.2L15.7 16.8"/>
              </svg>
            </button>
          )}
        </span>
      </footer>
    </article>
  );
}

function FeedPreview({ letters, onOpen, onAll, onShare }) {
  return (
    <section className="bx-feed">
      <div className="bx-section__head">
        <span className="eyebrow">RECENT · 近期御批</span>
        <h2 className="h2">朕已批阅之奏折</h2>
      </div>
      <div className="bx-feed__grid">
        {letters.map(l => <LetterCard key={l.id} letter={l} onClick={() => onOpen(l.id)} onShare={onShare}/>)}
      </div>
      {letters.length === 0 && (
        <p className="small" style={{ textAlign: 'center', color: 'var(--ink-3)', padding: '32px 0' }}>
          陛下尚未批阅任何奏折，快来呈上第一封。
        </p>
      )}
      {letters.length > 0 && (
        <div className="bx-feed__more">
          <Button variant="tertiary" onClick={onAll}>查看全部御批 →</Button>
        </div>
      )}
    </section>
  );
}

function Steps() {
  const items = [
    { n: '壹', title: '登入朝堂', desc: '以抖音尊号注册,三秒入宫。', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"><path d="M4 20V8a8 8 0 0 1 16 0v12"/><line x1="4" y1="20" x2="20" y2="20"/><line x1="12" y1="8" x2="12" y2="20"/><circle cx="10" cy="13" r="0.8"/><circle cx="14" cy="13" r="0.8"/></svg>
    )},
    { n: '贰', title: '呈递奏折', desc: '将你的故事呈上,朕必过目。', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 L12 11"/><path d="M9 11 L15 11 L14 14 Q 12 17, 12 20 Q 12 17, 10 14 Z"/><line x1="10.5" y1="6" x2="13.5" y2="6"/></svg>
    )},
    { n: '叁', title: '静候批阅', desc: '朕将在朝会宣读,或留下御言。', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3h12"/><path d="M6 21h12"/><path d="M6 3v3a6 6 0 0 0 6 6a6 6 0 0 1 6 6v3"/><path d="M18 3v3a6 6 0 0 1-6 6a6 6 0 0 0-6 6v3"/></svg>
    )},
  ];
  return (
    <section className="bx-steps">
      <div className="bx-section__head bx-section__head--center">
        <span className="eyebrow">HOW · 三步入宫</span>
        <h2 className="h2">上奏之法</h2>
      </div>
      <div className="bx-steps__row">
        {items.map((s, i) => (
          <React.Fragment key={s.n}>
            <div className="bx-step">
              <div className="bx-step__icon">{s.icon}</div>
              <span className="bx-step__n">第 {s.n} 步</span>
              <h3 className="bx-step__title">{s.title}</h3>
              <p className="bx-step__desc">{s.desc}</p>
            </div>
            {i < items.length - 1 && <div className="bx-step__line"/>}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function CTABlock({ onCompose }) {
  return (
    <section className="bx-cta-block">
      <CloudDivider/>
      <h2 className="bx-cta-block__title">朕在朝堂等你</h2>
      <Button variant="primary" size="lg" onClick={onCompose} icon={<SealIcon size={16} color="#fff"/>}>即刻上奏</Button>
    </section>
  );
}

Object.assign(window, { Hero, StatsStrip, LetterCard, FeedPreview, Steps, CTABlock });