// 404 page — TEMPLATE / proposal.
// Matches HomePage hero rhythm so TopNav + FooterBar still wrap it,
// but swaps the name block for a glitched "404 SIGNAL LOST" with the
// attempted path quoted back in a terminal-style line.
//
// To wire up:
//   1. router.jsx — return { route: 'notfound', slug: pathname } for
//      unknown paths instead of falling through to 'home'.
//   2. index.html — load this file with a <script type="text/babel">
//      tag, add it to the App destructure, add the route branch, and
//      keep showFooter = true for it (route !== 'home').
//
// Variants left inline as comments so you can pick a flavor:
//   [A] glitch hero (active)
//   [B] terminal traceback subline (active, folded into A)
//   [C] git-diff style panel (commented stub at bottom)

const NotFoundPage = ({ attemptedPath }) => {
  const T = window.TOKENS;
  const [glitch, setGlitch] = React.useState(false);
  const [cursorOn, setCursorOn] = React.useState(true);

  // attempted path: prefer prop, fall back to live URL on mount.
  const pathLabel = (
    attemptedPath ||
    (typeof window !== 'undefined' ? window.location.pathname : '/')
  ).replace(/^\/+/, '/') || '/';

  // glitch burst loop — slightly more frequent than HomePage so the
  // page feels "broken" rather than just stylish.
  React.useEffect(() => {
    let active = true;
    let timer;
    const fire = () => {
      if (!active) return;
      setGlitch(true);
      setTimeout(() => active && setGlitch(false), 380);
      if (Math.random() < 0.45) {
        setTimeout(() => {
          if (!active) return;
          setGlitch(true);
          setTimeout(() => active && setGlitch(false), 220);
        }, 460);
      }
      const next = 1600 + Math.random() * 2800;
      timer = setTimeout(fire, next);
    };
    timer = setTimeout(fire, 800);
    return () => { active = false; clearTimeout(timer); };
  }, []);

  React.useEffect(() => {
    const t = setInterval(() => setCursorOn(c => !c), 530);
    return () => clearInterval(t);
  }, []);

  return (
    <div
      className={'hero-glitch' + (glitch ? ' glitching' : '')}
      style={{
        minHeight: '100vh', position: 'relative', zIndex: 1,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', padding: '120px 40px 120px',
        fontFamily: T.mono, color: T.fg, textAlign: 'center',
      }}
    >
      <div style={{
        fontSize: 11, letterSpacing: '0.5em', color: T.danger, marginBottom: 32,
        opacity: glitch ? 0.3 : 1,
        transition: 'opacity 0.05s',
      }}>
        ▼ SIGNAL LOST ▼
      </div>

      <h1 className='glitch-name' style={{
        margin: 0, fontSize: 'clamp(96px, 16vw, 220px)', lineHeight: 0.85,
        fontWeight: 900, letterSpacing: '-0.05em',
        color: T.fg, textAlign: 'center',
      }}>
        <div><span className='glitch-line' data-text='404'>404</span></div>

        {/* alias-slot equivalent — same hairline-rule treatment as HomePage,
            but spells the failure mode instead of the handle. */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 16, margin: '8px 0',
          fontSize: 'clamp(13px, 1.2vw, 16px)', fontWeight: 500,
          letterSpacing: '0.4em', color: T.fgDim,
          textTransform: 'lowercase',
        }}>
          <span style={{
            display: 'inline-block', flex: '0 1 80px', height: 1, background: T.fgGhost,
          }} />
          <span><span style={{ color: T.danger }}>!</span>route_not_found</span>
          <span style={{
            display: 'inline-block', flex: '0 1 80px', height: 1, background: T.fgGhost,
          }} />
        </div>

        <div>
          <span className='glitch-line' data-text='NULL_'>
            NULL<span style={{
              color: T.danger,
              opacity: cursorOn ? 1 : 0,
              transition: 'opacity 0.05s',
            }}>_</span>
          </span>
        </div>
      </h1>

      {/* [B] terminal traceback line — quotes the attempted path back at
          the visitor so the page feels diagnostic, not generic. */}
      <div style={{
        marginTop: 36,
        fontSize: 13, letterSpacing: '0.04em',
        color: T.fgMid, textAlign: 'left',
        background: T.bgSunken, border: `1px solid ${T.fgFaint}`,
        padding: '14px 18px', maxWidth: 720, width: '100%',
        boxSizing: 'border-box',
      }}>
        <div style={{ color: T.fgGhost }}>
          <span style={{ color: T.accent }}>$</span> cat <span style={{ color: T.fg }}>{pathLabel}</span>
        </div>
        <div style={{ color: T.danger, marginTop: 6 }}>
          cat: {pathLabel}: No such file or directory
        </div>
        <div style={{ color: T.fgDim, marginTop: 6 }}>
          exit <span style={{ color: T.danger }}>1</span>
        </div>
      </div>

      <div style={{
        marginTop: 28, fontSize: 13, letterSpacing: '0.18em', color: T.fgDim,
        fontStyle: 'italic', maxWidth: 600,
      }}>
        “The page you tried doesn't exist - or never did.”
      </div>

      <div style={{
        marginTop: 56, display: 'flex', justifyContent: 'center',
      }}>
        <button
          onClick={() => window.navigate('/')}
          style={{
            padding: '14px 28px',
            border: `1px solid ${T.accent}`, color: T.accent,
            fontSize: 12, letterSpacing: '0.3em', fontFamily: T.mono,
            background: `${T.accent}14`, cursor: 'pointer',
            textTransform: 'uppercase',
          }}
        >
          [↵] back to home →
        </button>
      </div>

      <div style={{
        marginTop: 80,
        fontSize: 10, letterSpacing: '0.3em', color: T.fgGhost,
      }}>
        ▼ TRY ANOTHER LINK FROM THE NAV ▼
      </div>

      {/* [C] alternative panel — uncomment to swap traceback for a
          fake git log. Keeps the rest of the page identical.

      <div style={{
        marginTop: 36, fontSize: 12, color: T.fgMid, textAlign: 'left',
        background: T.bgSunken, border: `1px solid ${T.fgFaint}`,
        padding: '14px 18px', maxWidth: 720, width: '100%',
        boxSizing: 'border-box',
      }}>
        <div><span style={{ color: T.accent }}>commit</span> 0000000 (HEAD)</div>
        <div>Author: void &lt;null@lorakszak.com&gt;</div>
        <div>Date:   never</div>
        <div style={{ marginTop: 8, color: T.danger }}>
          fatal: pathspec '{pathLabel}' did not match any files
        </div>
      </div>
      */}
    </div>
  );
};

window.NotFoundPage = NotFoundPage;