/* ============================================================
   components.jsx — 共用 UI 元件
   ============================================================ */

/* ---- 按鈕 ---- */
function Button({ children, variant = 'primary', size = 'md', full = false, onClick, type = 'button', style }) {
  const sizes = {
    sm: { padding: '8px 16px',  fontSize: '14px' },
    md: { padding: '12px 22px', fontSize: '15px' },
    lg: { padding: '15px 30px', fontSize: '16px' },
  };
  const variants = {
    primary: { background: 'var(--accent)',  color: 'var(--accent-ink)', border: '1px solid var(--accent-strong)' },
    dark:    { background: 'var(--fg-1)',     color: '#fff',              border: '1px solid var(--fg-1)' },
    leaf:    { background: 'var(--leaf)',     color: '#fff',              border: '1px solid var(--leaf)' },
    ghost:   { background: 'transparent',     color: 'var(--fg-1)',       border: '1px solid var(--border-strong)' },
  };
  return (
    <button type={type} onClick={onClick}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        fontFamily: 'var(--font-display)', fontWeight: 700, borderRadius: '999px',
        cursor: 'pointer', transition: 'transform .12s ease, box-shadow .12s ease',
        width: full ? '100%' : 'auto', whiteSpace: 'nowrap',
        ...sizes[size], ...variants[variant], ...style,
      }}
      onMouseDown={(e) => (e.currentTarget.style.transform = 'scale(.97)')}
      onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
      {children}
    </button>
  );
}

/* ---- 圖示按鈕 ---- */
function IconButton({ icon, onClick, label, badge }) {
  return (
    <button onClick={onClick} aria-label={label || icon}
      style={{
        position: 'relative', width: 42, height: 42, borderRadius: '50%',
        border: '1px solid var(--border)', background: 'var(--bg-surface)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--fg-1)', fontSize: 20,
      }}>
      <i className={'ph ' + icon}></i>
      {badge > 0 && (
        <span style={{
          position: 'absolute', top: -4, right: -4, minWidth: 18, height: 18, padding: '0 5px',
          borderRadius: 999, background: 'var(--accent)', color: 'var(--accent-ink)',
          fontSize: 11, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-ui)',
        }}>{badge}</span>
      )}
    </button>
  );
}

/* ---- 星等 ---- */
function Stars({ value = 5, reviews, compact = false }) {
  const full = Math.round(value);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: '#E8A700', fontSize: compact ? 13 : 15 }}>
      {[1, 2, 3, 4, 5].map((i) => (
        <i key={i} className={'ph-fill ' + (i <= full ? 'ph-star' : 'ph-star')} style={{ opacity: i <= full ? 1 : 0.25 }}></i>
      ))}
      <span style={{ color: 'var(--fg-3)', fontSize: 12, marginLeft: 2, fontFamily: 'var(--font-ui)' }}>
        {value}{reviews != null ? ` (${reviews})` : ''}
      </span>
    </span>
  );
}

/* ---- 標籤 ---- */
function Tag({ children, tone = 'accent' }) {
  const tones = {
    accent: { background: 'var(--accent-soft)', color: 'var(--accent-ink)' },
    leaf:   { background: 'var(--leaf-soft)',   color: 'var(--leaf)' },
    dark:   { background: 'var(--fg-1)',        color: '#fff' },
  };
  return (
    <span style={{
      fontSize: 12, fontWeight: 700, padding: '4px 10px', borderRadius: 999,
      fontFamily: 'var(--font-ui)', ...tones[tone],
    }}>{children}</span>
  );
}

/* ---- 數量選擇 ---- */
function QtyStepper({ value, onChange, min = 1 }) {
  const btn = {
    width: 38, height: 38, border: 'none', background: 'transparent',
    fontSize: 20, color: 'var(--fg-1)', cursor: 'pointer', lineHeight: 1,
  };
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center',
      border: '1px solid var(--border-strong)', borderRadius: 999, background: 'var(--bg-surface)',
    }}>
      <button style={btn} onClick={() => onChange(Math.max(min, value - 1))} aria-label="減少">−</button>
      <span style={{ minWidth: 34, textAlign: 'center', fontWeight: 800, fontFamily: 'var(--font-display)' }}>{value}</span>
      <button style={btn} onClick={() => onChange(value + 1)} aria-label="增加">+</button>
    </div>
  );
}

/* ---- 表單欄位 ---- */
function Field({ label, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg-2)' }}>{label}</span>
      {children}
    </label>
  );
}
function Input(props) {
  return (
    <input {...props}
      style={{
        padding: '12px 14px', borderRadius: 'var(--radius-sm)',
        border: '1px solid var(--border-strong)', background: 'var(--bg-surface)',
        fontSize: 15, fontFamily: 'var(--font-ui)', color: 'var(--fg-1)', outline: 'none',
        width: '100%', ...props.style,
      }}
      onFocus={(e) => (e.target.style.borderColor = 'var(--accent)')}
      onBlur={(e) => (e.target.style.borderColor = 'var(--border-strong)')} />
  );
}

/* ---- 區塊標題 ---- */
function SectionHead({ kicker, title, sub, center }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 26, textAlign: center ? 'center' : 'left', alignItems: center ? 'center' : 'flex-start' }}>
      {kicker && <Tag tone="leaf">{kicker}</Tag>}
      <h2 style={{ fontSize: '32px', lineHeight: 1.2 }}>{title}</h2>
      {sub && <p style={{ color: 'var(--fg-3)', fontSize: 15, maxWidth: 560 }}>{sub}</p>}
    </div>
  );
}

/* ---- 商品卡 ---- */
function ProductCard({ p }) {
  const app = useApp();
  const soft = (app && app.cardVariant) === 'soft';
  return (
    <div onClick={() => app.openProduct(p.id)}
      style={{
        background: 'var(--bg-surface)', borderRadius: soft ? '20px' : '10px',
        border: '1px solid var(--border)', boxShadow: soft ? 'var(--shadow-card)' : 'none',
        overflow: 'hidden', display: 'flex', flexDirection: 'column', cursor: 'pointer',
        transition: 'transform .15s ease, box-shadow .15s ease',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      <div style={{
        aspectRatio: '4 / 3', background: `linear-gradient(135deg, ${p.grad[0]}, ${p.grad[1]})`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '76px', position: 'relative',
      }}>
        <span>{p.emoji}</span>
        {p.badge && <span style={{ position: 'absolute', top: 12, left: 12 }}><Tag tone="dark">{p.badge}</Tag></span>}
      </div>
      <div style={{ padding: '16px 16px 18px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
          <h3 style={{ fontSize: '17px' }}>{p.name}</h3>
        </div>
        <Stars value={p.rating} reviews={p.reviews} compact />
        <p style={{ color: 'var(--fg-3)', fontSize: 13, lineHeight: 1.5, flex: 1 }}>{p.blurb}</p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
          <div>
            <span style={{ fontSize: '21px', fontWeight: 800, color: 'var(--fg-1)', fontFamily: 'var(--font-display)' }}>{NT(p.price)}</span>
            <span style={{ fontSize: 12, color: 'var(--fg-3)' }}> {p.unit}</span>
          </div>
          <button onClick={(e) => { e.stopPropagation(); app.addToCart(p.id); }} aria-label="加入購物車"
            style={{
              width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--accent-strong)',
              background: 'var(--accent)', color: 'var(--accent-ink)', fontSize: 18,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
            <i className="ph-bold ph-plus"></i>
          </button>
        </div>
      </div>
    </div>
  );
}