/* eslint-disable */
/* =============================================================
   StatesExtra — Error, Offline, and a Feedback demo gallery
   -------------------------------------------------------------
   ErrorState  (route: error)   — unexpected error / load failure
   OfflineState(route: offline) — no internet connection
   FeedbackDemo(route: feedback)— preview Toasts + Confirm modal
   Reuse the .state-* cosmic template from states.css.
   ============================================================= */

// shared faint constellation backdrop for the state heroes
function StateField() {
  return (
    <svg className="state-constellation" viewBox="0 0 520 280" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <radialGradient id="se-star" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#fff" /><stop offset="100%" stopColor="#C084FF" />
        </radialGradient>
      </defs>
      <ellipse cx="260" cy="140" rx="226" ry="112" stroke="rgba(138,92,255,0.22)" strokeWidth="1.1" strokeDasharray="3 7" />
      <path d="M60 110 L150 64 L235 104 L320 58 L420 92" stroke="rgba(138,92,255,0.26)" strokeWidth="1" strokeLinecap="round" />
      <path d="M110 220 L210 232 L300 200 L390 226" stroke="rgba(98,221,255,0.16)" strokeWidth="1" strokeLinecap="round" />
      {[[60,110,2.2],[150,64,3],[235,104,2],[320,58,2.6],[420,92,2.2],[110,220,2.4],[210,232,2],[300,200,3],[390,226,2.2],[470,150,2.4],[44,160,1.8]].map((s,i)=>(
        <circle key={i} cx={s[0]} cy={s[1]} r={s[2]} fill="url(#se-star)" className="state-star" style={{ animationDelay: `${(i%5)*0.6}s` }} />
      ))}
    </svg>
  );
}

window.ErrorState = function ErrorState({ lang = "ar", onRoute }) {
  const ar = lang === "ar";
  const go = (r) => onRoute && onRoute(r);
  const T = ar
    ? { title: "حدث خطأ غير متوقع", sub: "واجهنا مشكلة أثناء تحميل هذه الصفحة. لا تقلق — بياناتك آمنة. حاول مرة أخرى بعد لحظات.",
        retry: "إعادة المحاولة", home: "العودة إلى الرئيسية", support: "إذا استمرّت المشكلة تواصل مع الدعم الفني" }
    : { title: "Something went wrong", sub: "We hit a problem loading this page. Don't worry — your data is safe. Please try again in a moment.",
        retry: "Try again", home: "Back to home", support: "If the problem persists, contact support" };
  return (
    <div className="state-page" data-screen-label="state error">
      <div className="state-hero">
        <StateField />
        <div className="state-glyph danger">
          <span className="state-glyph-ring" />
          <span className="state-glyph-mark">!</span>
        </div>
      </div>
      <h1 className="state-title">{T.title}</h1>
      <p className="state-sub">{T.sub}</p>
      <div className="state-actions">
        <button className="state-btn primary" onClick={() => window.location.reload()}>
          <span className="state-btn-rot">↻</span><span>{T.retry}</span>
        </button>
        <button className="state-btn" 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>
  );
};

window.OfflineState = function OfflineState({ lang = "ar", onRoute }) {
  const ar = lang === "ar";
  const go = (r) => onRoute && onRoute(r);
  const T = ar
    ? { title: "لا يوجد اتصال بالإنترنت", sub: "يبدو أنك غير متصل. تحقّق من اتصالك بالشبكة وحاول مرة أخرى — ستعود رحلتك من حيث توقّفت.",
        retry: "إعادة المحاولة", home: "العودة إلى الرئيسية" }
    : { title: "You're offline", sub: "It looks like you've lost connection. Check your network and try again — your journey resumes right where you left off.",
        retry: "Try again", home: "Back to home" };
  return (
    <div className="state-page" data-screen-label="state offline">
      <div className="state-hero">
        <StateField />
        <div className="state-glyph">
          <span className="state-glyph-ring" />
          <svg className="state-glyph-svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0M2 9a16 16 0 0 1 20 0" opacity="0.85" />
            <circle cx="12" cy="19.5" r="0.6" fill="currentColor" />
            <path d="M3 3l18 18" stroke="#ff8a8a" />
          </svg>
        </div>
      </div>
      <h1 className="state-title">{T.title}</h1>
      <p className="state-sub">{T.sub}</p>
      <div className="state-actions">
        <button className="state-btn primary" onClick={() => window.location.reload()}>
          <span className="state-btn-rot">↻</span><span>{T.retry}</span>
        </button>
        <button className="state-btn" onClick={() => go("home")}>
          {window.Icon && <Icon.home size={16} />}<span>{T.home}</span>
        </button>
      </div>
    </div>
  );
};

// ── Feedback gallery: preview toasts + confirmation modal ──
window.FeedbackDemo = function FeedbackDemo({ lang = "ar", onRoute }) {
  const ar = lang === "ar";
  const T = ar
    ? { title: "رسائل النظام", sub: "معاينة التنبيهات (toasts) ونوافذ التأكيد المستخدمة في كل أنحاء الموقع.",
        toasts: "التنبيهات", confirm: "نوافذ التأكيد",
        ok: "نجاح", okT: "تم الحفظ", okM: "تم حفظ تغييراتك بنجاح.",
        err: "خطأ", errT: "تعذّر الحفظ", errM: "حدث خطأ أثناء حفظ التغييرات. حاول مرة أخرى.",
        info: "معلومة", infoT: "بوصلة اليوم جاهزة", infoM: "طاقة اليوم تدعو للإصغاء الهادئ قبل القرار.",
        del: "حذف خريطة (تأكيد)", delT: "حذف الخريطة؟", delM: "سيتم حذف هذه الخريطة نهائيًا ولا يمكن التراجع عن هذا الإجراء.",
        delOk: "حذف", cancel: "إلغاء", deleted: "تم حذف الخريطة." }
    : { title: "System feedback", sub: "Preview the toasts and confirmation dialogs used across the app.",
        toasts: "Toasts", confirm: "Confirmation dialogs",
        ok: "Success", okT: "Saved", okM: "Your changes were saved successfully.",
        err: "Error", errT: "Couldn't save", errM: "Something went wrong while saving. Please try again.",
        info: "Info", infoT: "Today's compass is ready", infoM: "Today's energy invites quiet listening before deciding.",
        del: "Delete chart (confirm)", delT: "Delete this chart?", delM: "This chart will be permanently deleted. This action cannot be undone.",
        delOk: "Delete", cancel: "Cancel", deleted: "Chart deleted." };

  const toast = (type, title, msg) => window.HDToast && HDToast.show({ type, title, msg });
  const confirmDelete = () => window.HDConfirm && HDConfirm.open({
    title: T.delT, msg: T.delM, confirmText: T.delOk, cancelText: T.cancel, danger: true,
    onConfirm: () => toast("success", T.deleted, ""),
  });

  return (
    <div className="page fb-page" data-screen-label="feedback gallery">
      {window.PageHeader && <PageHeader title={T.title} sub={T.sub} lang={lang} />}
      <div className="fb-grid">
        <div className="fb-card" data-galaxy-ui>
          <h3 className="fb-card-h">{T.toasts}</h3>
          <div className="fb-btns">
            <button className="fb-btn ok" onClick={() => toast("success", T.okT, T.okM)}>{T.ok}</button>
            <button className="fb-btn err" onClick={() => toast("error", T.errT, T.errM)}>{T.err}</button>
            <button className="fb-btn info" onClick={() => toast("info", T.infoT, T.infoM)}>{T.info}</button>
          </div>
        </div>
        <div className="fb-card" data-galaxy-ui>
          <h3 className="fb-card-h">{T.confirm}</h3>
          <div className="fb-btns">
            <button className="fb-btn danger" onClick={confirmDelete}>{T.del}</button>
          </div>
        </div>
      </div>
    </div>
  );
};