// components.jsx — shared UI bits for the Eidos Factum uploader prototype.

// ── Icons ───────────────────────────────────────────────────────────────────
const Icon = {
  reel: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16}
         fill="none" stroke="currentColor" strokeWidth="1.4"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <circle cx="12" cy="12" r="2.2" />
      <circle cx="12" cy="5.5" r="1.4" />
      <circle cx="18.5" cy="12" r="1.4" />
      <circle cx="12" cy="18.5" r="1.4" />
      <circle cx="5.5" cy="12" r="1.4" />
    </svg>
  ),
  check: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16}
         fill="none" stroke="currentColor" strokeWidth="1.6"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M4 12.5l5 5L20 6.5" />
    </svg>
  ),
  upload: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16}
         fill="none" stroke="currentColor" strokeWidth="1.4"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 16V4" />
      <path d="M6 10l6-6 6 6" />
      <path d="M4 20h16" />
    </svg>
  ),
  shield: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16}
         fill="none" stroke="currentColor" strokeWidth="1.4"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" />
    </svg>
  ),
  clock: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16}
         fill="none" stroke="currentColor" strokeWidth="1.4"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </svg>
  ),
  dot: (p = {}) => (
    <svg viewBox="0 0 8 8" width={p.size || 8} height={p.size || 8} aria-hidden="true">
      <circle cx="4" cy="4" r="3" fill="currentColor" />
    </svg>
  ),
  film: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16}
         fill="none" stroke="currentColor" strokeWidth="1.3"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="4" width="18" height="16" rx="1.5" />
      <path d="M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4M7 12h10" />
    </svg>
  ),
  arrowRight: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 14} height={p.size || 14}
         fill="none" stroke="currentColor" strokeWidth="1.6"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  ),
  key: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16}
         fill="none" stroke="currentColor" strokeWidth="1.4"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="8" cy="14" r="4" />
      <path d="M11 12l9-9M16 7l3 3" />
    </svg>
  ),
};

// ── Wordmark ────────────────────────────────────────────────────────────────
// "Eidos Factum" — sober editorial wordmark. Two-line lockup with a hairline
// rule that reads as a film leader edge.
function Wordmark({ subtitle = 'Upload' }) {
  return (
    <div className="ef-mark">
      <div className="ef-mark-row">
        <span className="ef-mark-dot" aria-hidden="true" />
        <span className="ef-mark-name">Eidos Factum</span>
      </div>
      <div className="ef-mark-sub">{subtitle}</div>
    </div>
  );
}

// ── Top bar ─────────────────────────────────────────────────────────────────
function TopBar({ user, isAdmin, view, onView, onSignOut }) {
  return (
    <header className="ef-top">
      <Wordmark subtitle={view === 'admin' ? 'my View · Admin' : 'my View'} />
      <nav className="ef-nav" aria-label="Sections">
        <button className={'ef-nav-link' + (view === 'upload' ? ' is-on' : '')}
                onClick={() => onView('upload')}>Upload</button>
        <button className={'ef-nav-link' + (view === 'history' ? ' is-on' : '')}
                onClick={() => onView('history')}>Recently received</button>
        {isAdmin && (
          <button className={'ef-nav-link' + (view === 'admin' ? ' is-on' : '')}
                  onClick={() => onView('admin')}>Admin</button>
        )}
      </nav>
      <div className="ef-top-right">
        {isAdmin && (
          <span className="ef-badge" title="Administrator">
            <Icon.shield size={12} /> Admin
          </span>
        )}
        <span className="ef-user">
          <span className="ef-user-name">{user.name}</span>
          <span className="ef-user-dot" />
        </span>
        <button className="ef-signout" onClick={onSignOut}>Sign out</button>
      </div>
    </header>
  );
}

// ── Eyebrow label ───────────────────────────────────────────────────────────
function Eyebrow({ children }) {
  return <div className="ef-eyebrow">{children}</div>;
}

// ── Pill / Tag ──────────────────────────────────────────────────────────────
function Pill({ tone = 'neutral', children }) {
  return <span className={'ef-pill ef-pill--' + tone}>{children}</span>;
}

// ── Footer (small print) ────────────────────────────────────────────────────
function Footer({ palette }) {
  return (
    <footer className="ef-footer">
      <span>collabs.eidosfactum.org</span>
      <span className="ef-footer-dot">·</span>
      <span>Scanned by ClamAV before reception</span>
      <span className="ef-footer-dot">·</span>
      <span className="ef-footer-pal">{palette}</span>
    </footer>
  );
}

Object.assign(window, { Icon, Wordmark, TopBar, Eyebrow, Pill, Footer });
