// recipe-app.jsx — Main recipe app component (3 variants)
// Variant A: 经典 — 单页详情(参考图的现代化重构)
// Variant B: 极简卡片 — 信息分卡片,大量留白,克制配色
// Variant C: 工序时间轴 — 步骤为中心,左侧时间轴

// ───────── Theme tokens ─────────
const THEME = {
  light: {
    bg: '#F5F1EA',         // 米白
    bgSoft: '#FAFAF7',
    surface: '#FFFFFF',
    ink: '#1A1816',
    inkSoft: '#6B6760',
    inkMuted: '#9A968E',
    rule: '#E5E0D6',
    accent: '#B5483A',     // 朱泥
    accentSoft: '#F5E5E0',
    placeholder: '#E8E3D7',
  },
  dark: {
    bg: '#161412',
    bgSoft: '#1F1D1A',
    surface: '#26231F',
    ink: '#F2EEE5',
    inkSoft: '#A8A39A',
    inkMuted: '#6B665C',
    rule: '#33302B',
    accent: '#C8615A',
    accentSoft: '#3A2622',
    placeholder: '#2A2723',
  },
};

// ───────── Placeholder image ─────────
function Placeholder({ label = '成品图', height = 220, ratio, t, variant = 'soft' }) {
  const stripe = t.placeholder;
  return (
    <div style={{
      width: '100%', height,
      aspectRatio: ratio,
      background: variant === 'lined'
        ? `repeating-linear-gradient(135deg, ${t.placeholder} 0 1px, transparent 1px 8px), ${t.bgSoft}`
        : t.placeholder,
      borderRadius: 2,
      position: 'relative', overflow: 'hidden',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{ position: 'absolute', inset: 0, background:
        `repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,0.18) 7px 8px)`,
      }} />
      <span style={{
        fontFamily: '"DM Mono", ui-monospace, monospace',
        fontSize: 10, letterSpacing: '0.15em',
        color: t.inkMuted, textTransform: 'uppercase',
        background: t.bgSoft, padding: '3px 8px', borderRadius: 1,
        position: 'relative', zIndex: 1,
      }}>{label}</span>
    </div>
  );
}

// ───────── Servings stepper ─────────
function ServingsStepper({ value, onChange, t }) {
  const dec = () => onChange(Math.max(1, value - 1));
  const inc = () => onChange(Math.min(8, value + 1));
  const btn = {
    width: 26, height: 26, borderRadius: 13, border: `1px solid ${t.rule}`,
    background: 'transparent', color: t.ink, display: 'flex',
    alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0,
  };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <button onClick={dec} style={btn}><UIIcons.minus size={12} /></button>
      <span style={{
        fontFamily: '"DM Mono", monospace', fontSize: 15,
        color: t.ink, minWidth: 22, textAlign: 'center', letterSpacing: '0.05em',
        fontWeight: 600,
      }}>{value}</span>
      <button onClick={inc} style={btn}><UIIcons.plus size={12} /></button>
    </div>
  );
}

// ───────── Format amount with serving multiplier ─────────
function fmtAmount(amount, baseServings, currentServings) {
  const v = (amount * currentServings) / baseServings;
  if (v >= 100) return Math.round(v);
  if (v >= 10) return Math.round(v * 10) / 10;
  if (Number.isInteger(v)) return v;
  return Math.round(v * 10) / 10;
}

// ───────── Recipe pill / chip ─────────
function Tag({ children, t, accent }) {
  return (
    <span style={{
      fontSize: 10, letterSpacing: '0.15em',
      fontFamily: '"DM Mono", monospace',
      textTransform: 'uppercase',
      color: accent ? t.accent : t.inkSoft,
      padding: '3px 7px',
      border: `1px solid ${accent ? t.accent : t.rule}`,
      borderRadius: 1,
    }}>{children}</span>
  );
}

function iconBtn(t) {
  return {
    width: 36, height: 36, borderRadius: 18,
    border: 'none', background: 'transparent',
    color: t.ink, display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer', padding: 0,
  };
}

window.THEME = THEME;
window.Placeholder = Placeholder;
window.ServingsStepper = ServingsStepper;
window.fmtAmount = fmtAmount;
window.Tag = Tag;
window.iconBtn = iconBtn;

// ───────── Book page tokens ─────────
const BOOK = {
  paper: '#F5EFE2',         // 米色纸
  paperDeep: '#EBE3CD',     // 翻面、阴影面
  ink: '#2C2418',           // 印刷油墨
  rule: '#C9BC9D',          // 纸面细线
  ruleSoft: '#DCD2BB',
  edge: '#BFB397',          // 书页厚度
  hole: 'rgba(40,30,15,0.22)',
};

// ───────── BookPage — 通用书页容器 ─────────
function BookPage({ children, t, pageNo, chapter, showHoles = true, footer, style = {}, paper = 'front' }) {
  const bg = paper === 'back' ? BOOK.paperDeep : BOOK.paper;
  return (
    <div style={{
      position: 'relative',
      background: bg,
      backgroundImage: `repeating-linear-gradient(0deg, transparent 0 24px, rgba(140,100,40,0.04) 24px 25px)`,
      borderTop: `1px solid ${BOOK.rule}`,
      borderBottom: `1px solid ${BOOK.rule}`,
      borderLeft: paper === 'back' ? 'none' : `2px solid ${BOOK.ink}25`,
      borderRight: paper === 'back' ? `2px solid ${BOOK.ink}25` : 'none',
      boxShadow: paper === 'back'
        ? 'inset -10px 0 14px -12px rgba(0,0,0,0.18)'
        : 'inset 10px 0 14px -12px rgba(0,0,0,0.18)',
      ...style,
    }}>
      {showHoles && paper === 'front' && (
        <div style={{
          position: 'absolute', left: 12, top: 0, bottom: 0,
          display: 'flex', flexDirection: 'column',
          justifyContent: 'space-around', padding: '60px 0',
          pointerEvents: 'none', zIndex: 1,
        }}>
          {[0,1,2,3].map(k => (
            <span key={k} style={{
              width: 5, height: 5, borderRadius: 3,
              background: BOOK.hole,
            }} />
          ))}
        </div>
      )}
      {children}
      {(pageNo || chapter || footer) && (
        <div style={{
          position: 'absolute', bottom: 12, left: paper === 'back' ? 22 : 32,
          right: paper === 'back' ? 32 : 22,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: '"DM Mono", monospace', fontSize: 9,
          color: BOOK.ink + '88', letterSpacing: '0.25em', textTransform: 'uppercase',
          pointerEvents: 'none',
        }}>
          <span>{footer || chapter || ''}</span>
          {pageNo && <span>p. {String(pageNo).padStart(3, '0')}</span>}
        </div>
      )}
    </div>
  );
}

// ───────── BookSpine — 右侧厚书页堆叠 ─────────
function BookSpine({ pos = 'right', height }) {
  const lines = [2, 5, 8, 12, 16, 21];
  return (
    <>
      <div style={{
        position: 'absolute', top: 4, bottom: -4,
        [pos]: -2, width: 6,
        background: pos === 'right'
          ? 'linear-gradient(90deg, #E8DFC8, #C9BC9D)'
          : 'linear-gradient(-90deg, #E8DFC8, #C9BC9D)',
        boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.1)',
        pointerEvents: 'none',
      }} />
      {lines.map((off, k) => (
        <div key={k} style={{
          position: 'absolute', top: 6 + k * 2, bottom: -6 + k * 2,
          [pos]: -off, width: 1.5,
          background: k % 2 ? '#D4C9AE' : '#BFB397',
          opacity: 0.85 - k * 0.1, pointerEvents: 'none',
        }} />
      ))}
    </>
  );
}

// ───────── PageHeader — 书页章节头 ─────────
function PageHeader({ chapter, no, accent, t }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between',
      alignItems: 'center', marginBottom: 14,
      paddingBottom: 8,
      borderBottom: `1px solid ${BOOK.rule}`,
    }}>
      <span style={{
        fontFamily: '"DM Mono", monospace', fontSize: 9,
        letterSpacing: '0.3em', color: accent || BOOK.ink,
        textTransform: 'uppercase', fontWeight: 600,
      }}>● {chapter}</span>
      {no && (
        <span style={{
          fontFamily: '"DM Mono", monospace', fontSize: 9,
          letterSpacing: '0.2em', color: BOOK.ink + '88',
          textTransform: 'uppercase',
        }}>NO. {String(no).padStart(2, '0')}</span>
      )}
    </div>
  );
}

// ───────── Stamp — 印章式装饰 ─────────
function Stamp({ children, color, size = 'sm', rotate = -8 }) {
  const s = size === 'lg' ? { fs: 11, p: '6px 10px' } : { fs: 9, p: '4px 8px' };
  return (
    <span style={{
      display: 'inline-block',
      fontFamily: '"DM Mono", monospace', fontSize: s.fs,
      letterSpacing: '0.25em', color, textTransform: 'uppercase',
      padding: s.p, border: `1.5px solid ${color}`,
      transform: `rotate(${rotate}deg)`,
      fontWeight: 700,
    }}>{children}</span>
  );
}

window.BOOK = BOOK;
window.BookPage = BookPage;
window.BookSpine = BookSpine;
window.PageHeader = PageHeader;
window.Stamp = Stamp;