/* eslint-disable */
/* =============================================================
   NotFoundPage (404) — cosmic "page not found" state
   -------------------------------------------------------------
   Renders inside the app shell. Establishes the reusable
   "state page" template (centered constellation hero + message +
   CTAs) that future states (error / empty / offline) inherit.
   A small probe orbits the neon 404 along a motion path.
   Props: lang, onRoute
   ============================================================= */
window.NotFoundPage = function NotFoundPage({ lang = "ar", onRoute }) {
  const ar = lang === "ar";
  const go = (r) => onRoute && onRoute(r);
  const T = ar
    ? { title: "الصفحة غير موجودة",
        sub: "عذرًا، الصفحة التي تبحث عنها غير متاحة أو ربما تم نقلها إلى مكان آخر.",
        charts: "الذهاب إلى خرائطي", back: "الرجوع للصفحة السابقة", home: "العودة إلى الرئيسية",
        support: "إذا استمرّت المشكلة تواصل مع الدعم الفني" }
    : { title: "Page not found",
        sub: "Sorry, the page you're looking for isn't available — it may have moved elsewhere.",
        charts: "Go to my charts", back: "Go back", home: "Back to home",
        support: "If the problem persists, contact support" };

  return (
    <div className="state-page" data-screen-label="state 404">
      <div className="state-hero" aria-hidden="true">
        {/* constellation + orbits behind the numerals */}
        <svg className="state-constellation" viewBox="0 0 520 300" fill="none" preserveAspectRatio="xMidYMid meet">
          <defs>
            <radialGradient id="nf-star" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#fff" />
              <stop offset="100%" stopColor="#C084FF" />
            </radialGradient>
          </defs>
          {/* dashed orbits */}
          <ellipse cx="260" cy="150" rx="232" ry="120" stroke="rgba(138,92,255,0.30)" strokeWidth="1.2" strokeDasharray="3 7" />
          <ellipse cx="260" cy="150" rx="180" ry="150" stroke="rgba(98,221,255,0.16)" strokeWidth="1" strokeDasharray="2 8" transform="rotate(18 260 150)" />
          {/* constellation lines */}
          <path d="M70 120 L150 70 L235 110 L300 60 L410 95 L470 150" stroke="rgba(138,92,255,0.32)" strokeWidth="1" strokeLinecap="round" />
          <path d="M120 235 L210 250 L300 215 L380 245 L450 205" stroke="rgba(98,221,255,0.20)" strokeWidth="1" strokeLinecap="round" />
          {/* stars */}
          {[[70,120,2.4],[150,70,3.2],[235,110,2],[300,60,2.8],[410,95,2.2],[470,150,3],[120,235,2.6],[210,250,2],[300,215,3.2],[380,245,2.2],[450,205,2.6],[40,170,1.8],[500,90,1.8]].map((s,i)=>(
            <circle key={i} cx={s[0]} cy={s[1]} r={s[2]} fill="url(#nf-star)" className="state-star" style={{ animationDelay: `${(i%5)*0.6}s` }} />
          ))}
        </svg>

        {/* orbiting probe */}
        <span className="state-probe" />

        {/* neon numerals */}
        <div className="state-404">404</div>
      </div>

      <h1 className="state-title">{T.title}</h1>
      <p className="state-sub">{T.sub}</p>

      <div className="state-actions">
        <button className="state-btn" onClick={() => go("charts")}>
          {window.Icon && <Icon.guide size={16} />}<span>{T.charts}</span>
        </button>
        <button className="state-btn" onClick={() => { if (window.history.length > 1) window.history.back(); else go("home"); }}>
          <span className="state-btn-arrow">{ar ? "→" : "←"}</span><span>{T.back}</span>
        </button>
        <button className="state-btn primary" onClick={() => go("home")}>
          {window.Icon && <Icon.home size={16} />}<span>{T.home}</span>
        </button>
      </div>

      <button className="state-support" onClick={() => go("settings")}>
        {window.Icon && <Icon.support size={15} />}<span>{T.support}</span>
      </button>
    </div>
  );
};