// Changelog.jsx — release notes for the admin portal + iPad app.
// Source lives in data/changelog.js (window.SAMPLE_CHANGELOG); edit that
// file when shipping a new version. To roll back, see RELEASING.md.

const Changelog = () => {
  const entries = window.SAMPLE_CHANGELOG || [];
  const current = entries[0];

  return (
    <div className="portal-page-wide" style={{ maxWidth: 880 }}>
      <div className="portal-page-header">
        <div>
          <h1 className="portal-page-title">Changelog</h1>
          <div className="portal-page-subtitle">
            Release history for the admin portal + iPad app. Each version is git-tagged so we can roll back to any prior release in seconds.
          </div>
        </div>
        {current && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999,
            background: 'var(--fg-1)', color: '#FFFFFF',
            fontSize: 12.5, fontWeight: 600, letterSpacing: '0.02em',
            fontFamily: 'var(--font-num)',
          }}>
            <PIcon name="check" size={12} strokeWidth={2.5} color="#FFFFFF" />
            v{current.version}
          </div>
        )}
      </div>

      {/* Rollback recipe — kept inline so it's discoverable without leaving the page */}
      <details className="portal-card" style={{ padding: 0, marginBottom: 20 }}>
        <summary style={{
          padding: '14px 18px', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 13, fontWeight: 500, color: 'var(--fg-1)',
          listStyle: 'none',
        }}>
          <PIcon name="refresh" size={14} color="var(--fg-2)" />
          How to roll back to an earlier version
        </summary>
        <div style={{ padding: '0 18px 16px', fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55 }}>
          <ol style={{ paddingLeft: 18, margin: '6px 0 0' }}>
            <li>Open <b>Vercel dashboard → Deployments</b> for the project you want to roll back (<code>admin-portal</code> or <code>ops</code>).</li>
            <li>Find the deployment whose commit matches the tag you want (e.g. <code>v1.00</code>).</li>
            <li>Click the <b>⋯</b> menu → <b>Promote to Production</b>. The previous build is live again in seconds, no code change.</li>
          </ol>
          <div style={{ marginTop: 10, fontSize: 12, color: 'var(--fg-3)' }}>
            Avoid <code>git push --force</code> unless you're sure you want to rewrite history — promote a prior deployment instead.
          </div>
        </div>
      </details>

      {entries.length === 0 && (
        <div className="portal-card" style={{ padding: 32, textAlign: 'center', color: 'var(--fg-3)', fontSize: 13 }}>
          No releases recorded yet.
        </div>
      )}

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {entries.map(e => (
          <article key={e.version} className="portal-card" style={{ padding: '18px 20px' }}>
            <header style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center',
                padding: '4px 10px', borderRadius: 7,
                background: e.type === 'major' ? '#181818' : 'var(--bg-sunken)',
                color: e.type === 'major' ? '#FFFFFF' : 'var(--fg-1)',
                fontSize: 13, fontWeight: 600, letterSpacing: '0.01em',
                fontFamily: 'var(--font-num)',
              }}>v{e.version}</span>
              <span style={{
                fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
                color: e.type === 'major' ? '#1D4ED8' : 'var(--fg-3)',
              }}>
                {e.type === 'major' ? 'New feature' : 'Tweak / fix'}
              </span>
              <span style={{ flex: 1 }} />
              <time style={{ fontSize: 12, color: 'var(--fg-3)', fontFamily: 'var(--font-num)' }}>
                {e.date}
              </time>
            </header>
            {e.title && (
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.005em', marginBottom: 8 }}>
                {e.title}
              </div>
            )}
            {Array.isArray(e.notes) && e.notes.length > 0 && (
              <ul style={{ paddingLeft: 18, margin: 0, color: 'var(--fg-2)', fontSize: 13.5, lineHeight: 1.6 }}>
                {e.notes.map((n, i) => <li key={i}>{n}</li>)}
              </ul>
            )}
          </article>
        ))}
      </div>
    </div>
  );
};

window.Changelog = Changelog;