// MOMO Pro - 共用 UI 元件

// ===== Badge =====
const Badge = ({ tone = 'secondary', children, dot = false, style }) => {
  const tones = {
    primary:   { bg: 'var(--momo-primary-100)',  text: 'var(--momo-primary-700)',  dot: 'var(--momo-primary)' },
    success:   { bg: 'var(--momo-success-bg)',   text: 'var(--momo-success-text)', dot: 'var(--momo-success)' },
    danger:    { bg: 'var(--momo-danger-bg)',    text: 'var(--momo-danger-text)',  dot: 'var(--momo-danger)' },
    warning:   { bg: 'var(--momo-warning-bg)',   text: 'var(--momo-warning-text)', dot: 'var(--momo-warning)' },
    info:      { bg: 'var(--momo-info-bg)',      text: 'var(--momo-info-text)',    dot: 'var(--momo-info)' },
    secondary: { bg: 'var(--momo-bg-muted)',     text: 'var(--momo-text-secondary)', dot: 'var(--momo-text-tertiary)' },
  };
  const t = tones[tone] || tones.secondary;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 10px',
      background: t.bg, color: t.text,
      fontSize: 'var(--momo-font-size-xs)',
      fontWeight: 'var(--momo-font-weight-medium)',
      borderRadius: 'var(--momo-radius-pill)',
      lineHeight: 1.5,
      whiteSpace: 'nowrap',
      ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.dot }} />}
      {children}
    </span>
  );
};

// ===== Button =====
const Button = ({ variant = 'gradient', size = 'md', icon, iconRight, children, onClick, style, disabled, type = 'button' }) => {
  const sizes = {
    sm: { padding: '6px 12px', fontSize: 'var(--momo-font-size-xs)', height: 30, gap: 6 },
    md: { padding: '8px 16px', fontSize: 'var(--momo-font-size-sm)', height: 38, gap: 8 },
    lg: { padding: '10px 20px', fontSize: 'var(--momo-font-size-base)', height: 44, gap: 10 },
  };
  const variants = {
    gradient: {
      background: 'var(--momo-gradient-primary)',
      color: 'var(--momo-text-inverse)',
      boxShadow: 'var(--momo-shadow-sm)',
    },
    solid: {
      background: 'var(--momo-primary)',
      color: 'var(--momo-text-inverse)',
    },
    outline: {
      background: 'var(--momo-bg-surface)',
      color: 'var(--momo-primary)',
      border: '1.5px solid var(--momo-primary)',
    },
    ghost: {
      background: 'transparent',
      color: 'var(--momo-text-secondary)',
    },
    'ghost-hover': {
      background: 'var(--momo-bg-subtle)',
      color: 'var(--momo-text-primary)',
    },
    secondary: {
      background: 'var(--momo-bg-surface)',
      color: 'var(--momo-text-primary)',
      border: '1px solid var(--momo-border)',
    },
    danger: {
      background: 'var(--momo-danger)',
      color: 'var(--momo-text-inverse)',
    },
  };
  const s = sizes[size];
  const v = variants[variant] || variants.gradient;
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      className="momo-btn"
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        gap: s.gap, padding: s.padding, fontSize: s.fontSize, height: s.height,
        fontWeight: 'var(--momo-font-weight-medium)',
        borderRadius: 'var(--momo-radius-md)',
        border: 'none',
        transition: 'var(--momo-transition-base), transform var(--momo-duration-fast)',
        opacity: disabled ? 0.5 : 1,
        cursor: disabled ? 'not-allowed' : 'pointer',
        ...v,
        ...style,
      }}>
      {icon && <Icon name={icon} size={size === 'sm' ? 14 : 16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'sm' ? 14 : 16} />}
    </button>
  );
};

// ===== Avatar =====
const Avatar = ({ name = '?', size = 32, gradient = false, style }) => {
  const initial = (name || '?').trim().charAt(0).toUpperCase();
  // 從名字 hash 出穩定色相
  let hash = 0;
  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
  const hue = Math.abs(hash) % 360;
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      background: gradient ? 'var(--momo-gradient-primary)' : `hsl(${hue}, 65%, 88%)`,
      color: gradient ? '#fff' : `hsl(${hue}, 70%, 30%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.42,
      fontWeight: 600,
      flexShrink: 0,
      ...style,
    }}>{initial}</div>
  );
};

// ===== Card =====
const Card = ({ children, style, cardStyle = 'shadow', padding = true, hoverable = false }) => {
  const styles = {
    shadow:  { boxShadow: 'var(--momo-shadow-md)', border: '1px solid transparent' },
    flat:    { boxShadow: 'none', border: '1px solid transparent', background: 'var(--momo-bg-subtle)' },
    bordered:{ boxShadow: 'none', border: '1px solid var(--momo-border)' },
  };
  return (
    <div style={{
      background: 'var(--momo-bg-surface)',
      borderRadius: 'var(--momo-radius-lg)',
      padding: padding ? 'var(--momo-space-5)' : 0,
      transition: 'var(--momo-transition-base), transform var(--momo-duration-fast)',
      ...styles[cardStyle],
      ...(hoverable ? { cursor: 'pointer' } : {}),
      ...style,
    }}>{children}</div>
  );
};

// ===== Input =====
const Input = ({ icon, value, onChange, placeholder, style, type = 'text', size = 'md' }) => {
  const heights = { sm: 32, md: 38, lg: 44 };
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      background: 'var(--momo-bg-surface)',
      border: '1px solid var(--momo-border)',
      borderRadius: 'var(--momo-radius-md)',
      padding: '0 12px',
      height: heights[size],
      transition: 'var(--momo-transition-base)',
      ...style,
    }}>
      {icon && <Icon name={icon} size={16} color="var(--momo-text-tertiary)" style={{ marginRight: 8 }} />}
      <input type={type} value={value} onChange={onChange} placeholder={placeholder}
        style={{
          flex: 1, border: 'none', outline: 'none', background: 'transparent',
          fontSize: 'var(--momo-font-size-sm)',
          color: 'var(--momo-text-primary)',
        }} />
    </div>
  );
};

// ===== Checkbox =====
const Checkbox = ({ checked, onChange, indeterminate = false, style }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current) ref.current.indeterminate = indeterminate;
  }, [indeterminate]);
  return (
    <label style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer', position: 'relative',
      width: 18, height: 18,
      ...style,
    }}>
      <input ref={ref} type="checkbox" checked={!!checked} onChange={onChange}
        style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }} />
      <span style={{
        width: 18, height: 18,
        borderRadius: 4,
        border: `1.5px solid ${checked || indeterminate ? 'var(--momo-primary)' : 'var(--momo-border-dark)'}`,
        background: checked || indeterminate ? 'var(--momo-gradient-primary)' : 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'var(--momo-transition-base)',
      }}>
        {checked && <Icon name="check" size={12} color="#fff" strokeWidth={3} />}
        {indeterminate && !checked && <span style={{ width: 8, height: 2, background: '#fff', borderRadius: 1 }} />}
      </span>
    </label>
  );
};

// ===== Page Header =====
const PageHeader = ({ title, subtitle, actions, breadcrumbs }) => (
  <div style={{
    display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
    gap: 'var(--momo-space-4)',
    marginBottom: 'var(--momo-space-5)',
  }}>
    <div>
      {breadcrumbs && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          fontSize: 'var(--momo-font-size-xs)',
          color: 'var(--momo-text-tertiary)',
          marginBottom: 6,
        }}>
          {breadcrumbs.map((b, i) => (
            <React.Fragment key={i}>
              {i > 0 && <Icon name="chevronRight" size={12} />}
              <span style={{ color: i === breadcrumbs.length - 1 ? 'var(--momo-text-secondary)' : 'inherit' }}>{b}</span>
            </React.Fragment>
          ))}
        </div>
      )}
      <h1 style={{
        margin: 0,
        fontSize: 'var(--momo-font-size-xl)',
        fontWeight: 'var(--momo-font-weight-bold)',
        color: 'var(--momo-text-primary)',
        letterSpacing: '-0.01em',
      }}>{title}</h1>
      {subtitle && <div style={{
        marginTop: 4,
        fontSize: 'var(--momo-font-size-sm)',
        color: 'var(--momo-text-secondary)',
      }}>{subtitle}</div>}
    </div>
    {actions && <div style={{ display: 'flex', gap: 8 }}>{actions}</div>}
  </div>
);

// ===== Tag（標籤統一元件 — 全站唯一入口） =====
// 用法：<Tag tone="caramel">推薦</Tag>  <Tag tone="ink" mono>MOMO 領先</Tag>
// tone: caramel | honey | rust | mahogany | earth | ink | muted | success
// 不要再用任何寫死色碼做標籤！
const Tag = ({ tone = 'earth', mono = false, dot = false, size = 'sm', children, style }) => {
  const sizes = {
    xs: { pad: '1px 6px',  fs: 10, gap: 4 },
    sm: { pad: '2px 8px',  fs: 11, gap: 5 },
    md: { pad: '3px 10px', fs: 12, gap: 6 },
  };
  const s = sizes[size] || sizes.sm;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: s.gap,
      padding: s.pad,
      fontSize: s.fs,
      fontWeight: 600,
      lineHeight: 1.5,
      whiteSpace: 'nowrap',
      borderRadius: 3,
      background: `var(--momo-tag-${tone}-bg)`,
      color: `var(--momo-tag-${tone}-text)`,
      border: `1px solid var(--momo-tag-${tone}-border)`,
      fontFamily: mono ? 'var(--momo-font-family-mono)' : 'var(--momo-font-family-base)',
      letterSpacing: mono ? '0.02em' : 0,
      ...style,
    }}>
      {dot && <span style={{
        width: 5, height: 5, borderRadius: '50%',
        background: `var(--momo-tag-${tone}-text)`, opacity: 0.7,
      }} />}
      {children}
    </span>
  );
};

Object.assign(window, { Badge, Button, Avatar, Card, Input, Checkbox, PageHeader, Tag });