// Dateora — shared UI primitives (Button, Input, Card, Icon)
// Themed via the `t` (theme) prop passed in from DateoraApp.

const Btn = ({ t, variant = 'primary', size = 'md', children, onClick, style = {}, full, type = 'button' }) => {
  const pad = size === 'lg' ? '16px 28px' : size === 'sm' ? '8px 14px' : '12px 22px';
  const fs = size === 'lg' ? 17 : size === 'sm' ? 13 : 15;
  const base = {
    border: '1px solid transparent',
    borderRadius: t.radius,
    padding: pad,
    fontSize: fs,
    fontWeight: 600,
    fontFamily: t.fontBody,
    cursor: 'pointer',
    transition: 'all .15s ease',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    letterSpacing: t.id === 'studio' ? '-0.01em' : '0',
    width: full ? '100%' : 'auto',
    lineHeight: 1.2,
    whiteSpace: 'nowrap',
  };
  const variants = {
    primary: { background: t.accent, color: t.accentInk, borderColor: t.accent },
    secondary: { background: 'transparent', color: t.ink, borderColor: t.borderStrong },
    ghost: { background: 'transparent', color: t.muted, borderColor: 'transparent' },
    dark: { background: t.ink, color: t.bg, borderColor: t.ink },
  };
  const [hover, setHover] = React.useState(false);
  const hoverStyle = hover && variant === 'primary' ? { background: t.accentHover, borderColor: t.accentHover } :
                     hover && variant === 'secondary' ? { background: t.surface2 } :
                     hover && variant === 'ghost' ? { color: t.ink } : {};
  return (
    <button type={type} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ ...base, ...variants[variant], ...hoverStyle, ...style }}>
      {children}
    </button>
  );
};

const Field = ({ t, label, value, onChange, type = 'text', placeholder, hint }) => {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: 'block' }}>
      {label && (
        <div style={{
          fontSize: 12, color: t.muted, marginBottom: 8, fontFamily: t.fontBody,
          fontWeight: 500,
          letterSpacing: t.id === 'editorial' ? '0.08em' : '0.02em',
          textTransform: t.id === 'editorial' ? 'uppercase' : 'none',
        }}>{label}</div>
      )}
      <input
        type={type}
        value={value || ''}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        style={{
          width: '100%',
          padding: '14px 16px',
          fontSize: 15,
          fontFamily: t.fontBody,
          color: t.ink,
          background: t.id === 'editorial' ? 'transparent' : t.surface2,
          border: '1px solid ' + (focus ? t.accent : t.border),
          borderRadius: t.radius,
          outline: 'none',
          transition: 'border-color .15s',
          boxSizing: 'border-box',
          borderBottom: t.id === 'editorial' ? '1px solid ' + (focus ? t.accent : t.borderStrong) : undefined,
          ...(t.id === 'editorial' ? { borderTop: 0, borderLeft: 0, borderRight: 0, padding: '12px 0' } : {}),
        }}
      />
      {hint && <div style={{ fontSize: 12, color: t.subtle, marginTop: 6 }}>{hint}</div>}
    </label>
  );
};

const Eyebrow = ({ t, children, style = {} }) => (
  <div style={{
    fontSize: 11, fontWeight: 600, color: t.muted,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    fontFamily: t.id === 'studio' ? t.fontMono : t.fontBody,
    ...style,
  }}>{children}</div>
);

const Display = ({ t, children, size = 56, style = {} }) => (
  <div style={{
    fontFamily: t.fontDisplay,
    fontWeight: t.displayWeight,
    fontStyle: t.displayStyle,
    fontSize: size,
    lineHeight: 1.05,
    letterSpacing: t.displayLetterSpacing,
    color: t.ink,
    textWrap: 'balance',
    ...style,
  }}>{children}</div>
);

const Wordmark = ({ t, size = 18 }) => {
  if (t.id === 'mentor') {
    return (
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <span style={{
          fontFamily: t.fontDisplay, fontStyle: 'italic', fontWeight: 400,
          fontSize: size + 4, color: t.ink, letterSpacing: '-0.02em',
        }}>{t.wordmark}</span>
        <span style={{
          fontFamily: t.fontBody, fontSize: 10, color: t.muted,
          textTransform: 'uppercase', letterSpacing: '0.22em',
        }}>{t.brandSub}</span>
      </div>
    );
  }
  if (t.id === 'editorial') {
    return (
      <div style={{ textAlign: 'left' }}>
        <div style={{
          fontFamily: t.fontDisplay, fontWeight: 400, fontSize: size + 2,
          color: t.ink, letterSpacing: '0.35em',
        }}>{t.wordmark}</div>
      </div>
    );
  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        width: 22, height: 22, borderRadius: 6,
        background: t.accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: t.fontMono, fontWeight: 700, fontSize: 13, color: t.accentInk,
      }}>D</span>
      <span style={{
        fontFamily: t.fontDisplay, fontWeight: 600, fontSize: size,
        color: t.ink, letterSpacing: '-0.03em',
      }}>{t.wordmark}</span>
    </div>
  );
};

// Icon set — small, all 18×18 stroke=1.6 unless noted
const Icon = {
  chat: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 4.5h12v8H8l-3 2.5v-2.5H3z"/></svg>,
  history: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M9 5.5V9l2.5 2"/></svg>,
  user: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="6" r="3"/><path d="M3 15c1-3 3.5-4 6-4s5 1 6 4"/></svg>,
  logout: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11 3H4v12h7"/><path d="M8 9h8m0 0l-2.5-2.5M16 9l-2.5 2.5"/></svg>,
  mic: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="7" y="2.5" width="4" height="8" rx="2"/><path d="M4 8.5a5 5 0 0 0 10 0M9 13.5V16"/></svg>,
  send: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l12-6-4.5 13L9 11 3 9z"/></svg>,
  back: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4l-5 5 5 5"/></svg>,
  check: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7.5l3 3 5-6"/></svg>,
  trash: () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 4h10M6 4V2.5h4V4M5 4l.5 9h5L11 4"/></svg>,
  lock: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6.5" width="8" height="6" rx="1"/><path d="M5 6.5V4.5a2 2 0 0 1 4 0v2"/></svg>,
  spark: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l1.5 4 4 1.5-4 1.5L7 12 5.5 8 1.5 6.5 5.5 5z"/></svg>,
};

Object.assign(window, { Btn, Field, Eyebrow, Display, Wordmark, Icon });