/* Error states catalogue — port of errors-reports.jsx ErrorStatesScreen.
   404 / 403 / 503 / 500 templates. Used by App's not-found fallback
   and by detail-page failure paths. */

const ERR_CASES = [
  { code: '404', glyph: 'compass', headline: 'We couldn\'t find that page', body: 'The link might be old, or the resource may have been removed.', tone: '' },
  { code: '403', glyph: 'alert',   headline: 'You don\'t have access',       body: 'Ask an admin to grant you the right role for this resource.', tone: 'is-warn' },
  { code: '503', glyph: 'wave',    headline: 'Slate is briefly unavailable', body: 'We\'re bringing things back online. Try again in a moment.',   tone: 'is-warn' },
  { code: '500', glyph: 'alert',   headline: 'Something went wrong',          body: 'We logged the failure. Refresh, or hop into another section.', tone: 'is-danger' },
];

function ErrorStatesScreen() {
  return (
    <div className="aq-content">
      <div className="aq-content-inner" style={{ maxWidth: 1280 }}>
        <header style={{ marginBottom: 18 }}>
          <div className="aq-eyebrow">
            <span>Slate</span>
            <span className="aq-sep">·</span>
            <span>Error templates</span>
          </div>
          <h1 style={{
            fontFamily: 'var(--aq-ff-display)', fontSize: 26, fontWeight: 500,
            letterSpacing: '-0.012em', color: 'var(--aq-text)', margin: '4px 0 4px',
          }}>Error states</h1>
          <p style={{ fontSize: 13, color: 'var(--aq-text-faint)', margin: 0 }}>
            Templates used across the app for unexpected paths and failures.
          </p>
        </header>

        <div className="x-err-grid" style={{
          border: '1px solid var(--aq-line)', borderRadius: 10, overflow: 'hidden',
          background: 'var(--aq-line)', minHeight: 600,
        }}>
          {ERR_CASES.map((e) => (
            <div
              key={e.code}
              className="x-err-cell"
              style={{
                background: 'var(--aq-surface)',
                padding: 24, position: 'relative',
                display: 'grid', placeItems: 'center',
              }}
            >
              <div className="x-err-card" style={{ position: 'relative', zIndex: 1 }}>
                <div className="x-err-code">Error · {e.code}</div>
                <div className={`x-err-glyph ${e.tone}`}>
                  <Icon name={e.glyph} size={28} />
                </div>
                <h1 className="x-err-headline">{e.headline}</h1>
                <p className="x-err-body">{e.body}</p>
                <div className="x-err-actions">
                  <button className="x-btn ghost">Try again</button>
                  <button
                    className="x-btn"
                    onClick={() => { window.location.hash = '#dashboard'; }}
                  >Back to dashboard</button>
                </div>
                <div className="x-err-tech">
                  <b>Path:</b> /cms{window.location.hash || '#'}<br />
                  <b>Trace:</b> err-template-{e.code.toLowerCase()}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ErrorStatesScreen = ErrorStatesScreen;