// _shared.jsx — admin UI primitives: AdminLabel, AdminInput, editorInputStyle, formatPlace, Banner.

const formatPlace = (p) => {
  if (!p) return '';
  const s = String(p).trim();
  const n = Number(s);
  if (!Number.isFinite(n) || !/^\d+$/.test(s)) return s;
  const mod100 = n % 100;
  const mod10 = n % 10;
  if (mod100 >= 11 && mod100 <= 13) return n + 'th';
  if (mod10 === 1) return n + 'st';
  if (mod10 === 2) return n + 'nd';
  if (mod10 === 3) return n + 'rd';
  return n + 'th';
};
window.formatPlace = formatPlace;

const AdminLabel = ({ children }) => (
  <label style={{ display: 'block', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg2)', fontWeight: 800, marginBottom: 6 }}>{children}</label>
);
window.AdminLabel = AdminLabel;

const editorInputStyle = () => ({
  width: '100%', padding: '12px 14px',
  background: 'var(--wbbq-black)', border: '2px solid var(--border)',
  color: 'var(--fg1)', fontFamily: 'var(--font-body)', fontSize: 14,
});
window.editorInputStyle = editorInputStyle;

const AdminInput = ({ label, value, onChange, placeholder, type = 'text' }) => (
  <div>
    <AdminLabel>{label}</AdminLabel>
    <input type={type} value={value || ''} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={editorInputStyle()} />
  </div>
);
window.AdminInput = AdminInput;

// StoreStatusBar — compact row showing connection state + last update + refresh.
// Replaces the legacy "enter URL + password" card now that credentials come from
// /api/config automatically on admin load.
const StoreStatusBar = ({ store, label, onRefresh }) => {
  const ok = store && store.connected;
  const loading = store && store.loading;
  const ts = store && store.updatedAt ? new Date(store.updatedAt).toLocaleTimeString() : '';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      flexWrap: 'wrap', gap: 12,
      padding: '10px 14px', marginBottom: 20,
      background: 'var(--wbbq-ink)',
      border: `2px solid ${ok ? 'var(--wbbq-slime)' : 'var(--wbbq-flame)'}`,
    }}>
      <div className="eyebrow" style={{ color: ok ? 'var(--wbbq-slime)' : 'var(--wbbq-flame)' }}>
        ◉ {label}: {ok ? 'Connected' : (loading ? 'Loading…' : 'Not configured — using seed data')}
        {ts && ok ? <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg3)', marginLeft: 10, letterSpacing: 0 }}>· updated {ts}</span> : null}
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button onClick={onRefresh} disabled={loading} className="btn btn-ghost" style={{ fontSize: 11, padding: '6px 12px', opacity: loading ? 0.5 : 1 }}>
          {loading ? 'Refreshing…' : 'Refresh'}
        </button>
      </div>
      {store && store.error && (
        <div style={{ width: '100%', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--wbbq-blood)' }}>⚠ {store.error}</div>
      )}
    </div>
  );
};
window.StoreStatusBar = StoreStatusBar;

const Banner = ({ banner, onClose }) => {
  if (!banner) return null;
  return (
    <div style={{
      padding: '12px 16px', marginBottom: 20,
      background: banner.kind === 'ok' ? 'var(--wbbq-slime)' : 'var(--wbbq-blood)',
      color: banner.kind === 'ok' ? 'var(--wbbq-black)' : 'var(--wbbq-bone)',
      fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.06em',
    }}>
      ◉ {banner.msg}
      <button onClick={onClose} style={{ float: 'right', background: 'transparent', border: 0, color: 'inherit', cursor: 'pointer' }}>✕</button>
    </div>
  );
};
window.Banner = Banner;