// Shared Mekor UI primitives (React globals from UMD). Loaded before each page's inline Babel script.

function LogoMark({ size = 40 }) {
  const s = size;
  const cx = s / 2;
  const cy = s / 2;
  const r0 = s * 0.42;
  const n = s * 0.072;
  const x1 = cx - s * 0.22;
  const y1 = cy + s * 0.2;
  const x2 = cx + s * 0.24;
  const y2 = cy + s * 0.06;
  const x3 = cx;
  const y3 = cy - s * 0.26;
  const sw = Math.max(1.5, s * 0.045);
  return (
    <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx={cx} cy={cy} r={r0} fill="var(--accent-pale)" />
      <line x1={cx} y1={cy} x2={x1} y2={y1} stroke="var(--accent)" strokeWidth={sw} strokeLinecap="round" opacity="0.38" />
      <line x1={cx} y1={cy} x2={x2} y2={y2} stroke="var(--accent)" strokeWidth={sw} strokeLinecap="round" opacity="0.38" />
      <line x1={cx} y1={cy} x2={x3} y2={y3} stroke="var(--accent)" strokeWidth={sw} strokeLinecap="round" opacity="0.38" />
      <circle cx={x1} cy={y1} r={n} fill="var(--accent)" opacity="0.88" />
      <circle cx={x2} cy={y2} r={n} fill="var(--accent)" opacity="0.72" />
      <circle cx={x3} cy={y3} r={n} fill="var(--accent)" opacity="0.8" />
      <circle cx={cx} cy={cy} r={s * 0.11} fill="var(--accent)" />
    </svg>
  );
}

const SearchInput = React.forwardRef(function SearchInput({ value, onChange, onKeyDown, onSearch, loading, compact, autoFocus }, ref) {
  return (
    <div style={{
      position: 'relative',
      width: '100%',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center',
        background: '#fff',
        border: '1.5px solid var(--border-mid)',
        borderRadius: compact ? 10 : 14,
        boxShadow: compact ? 'var(--shadow-sm)' : 'var(--shadow-md)',
        transition: 'box-shadow 0.2s, border-color 0.2s',
        overflow: 'hidden',
      }}
      onFocusCapture={e => {
        e.currentTarget.style.borderColor = 'var(--teal)';
        e.currentTarget.style.boxShadow = '0 0 0 3px rgba(29,115,121,0.12), var(--shadow-md)';
      }}
      onBlurCapture={e => {
        e.currentTarget.style.borderColor = 'var(--border-mid)';
        e.currentTarget.style.boxShadow = compact ? 'var(--shadow-sm)' : 'var(--shadow-md)';
      }}>
        <div style={{ padding: compact ? '0 10px 0 14px' : '0 12px 0 18px', color: 'var(--ink-light)', flexShrink: 0 }}>
          <svg width={compact ? 15 : 18} height={compact ? 15 : 18} viewBox="0 0 18 18" fill="none">
            <circle cx="8" cy="8" r="5.5" stroke="currentColor" strokeWidth="1.6"/>
            <path d="M12.5 12.5L16 16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
        </div>

        <input
          ref={ref}
          autoFocus={autoFocus}
          value={value}
          onChange={e => onChange(e.target.value)}
          onKeyDown={onKeyDown}
          placeholder="Search…"
          style={{
            flex: 1,
            border: 'none', outline: 'none', background: 'transparent',
            fontFamily: "'DM Sans', sans-serif",
            fontSize: compact ? 14 : 15,
            color: 'var(--ink)',
            padding: compact ? '10px 0' : '16px 0',
            letterSpacing: '-0.01em',
          }}
        />

        {value && (
          <button
            onClick={() => onChange('')}
            style={{
              padding: '0 10px', background: 'none', border: 'none',
              cursor: 'pointer', color: 'var(--ink-light)',
              display: 'flex', alignItems: 'center',
            }}
          >
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 3l8 8M11 3L3 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </button>
        )}

        <button
          onClick={() => onSearch()}
          disabled={!value.trim() || loading}
          style={{
            margin: compact ? 4 : 6,
            padding: compact ? '7px 14px' : '10px 20px',
            borderRadius: compact ? 7 : 9,
            border: 'none',
            background: value.trim() && !loading ? 'var(--teal)' : 'var(--parchment-deep)',
            color: value.trim() && !loading ? '#fff' : 'var(--ink-light)',
            fontFamily: "'DM Sans', sans-serif",
            fontSize: compact ? 13 : 14,
            fontWeight: 500,
            cursor: value.trim() && !loading ? 'pointer' : 'default',
            transition: 'all 0.15s',
            flexShrink: 0,
            whiteSpace: 'nowrap',
          }}
        >
          {loading ? 'Searching…' : 'Search'}
        </button>
      </div>
    </div>
  );
});

function LoadingDots() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {[0,1,2].map(i => (
        <div key={i} style={{
          width: 8, height: 8, borderRadius: '50%',
          background: 'var(--teal)',
          animation: `bounce 1.2s ease-in-out ${i * 0.2}s infinite`,
        }} />
      ))}
    </div>
  );
}

function PrimaryButton({ children, onClick, disabled, loading, type = 'button', style: extra }) {
  const off = disabled || loading;
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={off}
      style={{
        padding: '10px 20px',
        borderRadius: 9,
        border: 'none',
        background: off ? 'var(--parchment-deep)' : 'var(--teal)',
        color: off ? 'var(--ink-light)' : '#fff',
        fontFamily: "'DM Sans', sans-serif",
        fontSize: 14,
        fontWeight: 500,
        cursor: off ? 'default' : 'pointer',
        transition: 'background 0.15s, color 0.15s',
        boxShadow: off ? 'none' : 'var(--shadow-sm)',
        ...(extra || {}),
      }}
    >
      {children}
    </button>
  );
}

function SecondaryButton({ children, onClick, disabled, loading, type = 'button', style: extra }) {
  const off = disabled || loading;
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={off}
      style={{
        padding: '8px 16px',
        borderRadius: 9,
        border: '1px solid var(--border-mid)',
        background: '#fff',
        color: off ? 'var(--ink-light)' : 'var(--ink-mid)',
        fontFamily: "'DM Sans', sans-serif",
        fontSize: 13,
        fontWeight: 500,
        cursor: off ? 'default' : 'pointer',
        transition: 'border-color 0.15s, background 0.15s, color 0.15s',
        boxShadow: 'var(--shadow-sm)',
        ...(extra || {}),
      }}
    >
      {children}
    </button>
  );
}

window.MekorUI = { LogoMark, LoadingDots, SearchInput, PrimaryButton, SecondaryButton };