// ────────────────────────────────────────────────────────────────────────────
// placeholder-screens.jsx — Coming Soon screens for unified app
// Foundation v1 · v1.7.0 · index.html runtime
//
// These are intentionally lightweight pages that re-use only canonical
// primitives (PfPageBar + HHEmptyState + tokens) so the routing graph in
// the demo feels complete without duplicating design work.
//
// Screens:
//   · ComingSoonScreen({ route })  — generic placeholder, used by all five
//   · NotFoundScreen()             — 404 fallback
//
// Conventions:
//   · prefix:    ph-* (placeholder)
//   · tokens:    only existing CSS vars (no new tokens)
//   · animation: opacity + transform only
//   · RTL:       logical properties (inset-inline-*, margin-inline-*)
// ────────────────────────────────────────────────────────────────────────────

// ─── Per-route content map ──────────────────────────────────────────────────
// Each entry overrides the generic "coming soon" copy with screen-specific
// title + glyph so the routes feel distinct even while sharing one template.
const PH_ROUTE_CONTENT = {
  settings: {
    titleKey: 'settingsTitle',
    glyph: 'settings',
    bodyKey: 'comingSoonDesc',
  },
  notifications: {
    titleKey: 'notifsTitle',
    glyph: 'bell',
    bodyKey: 'comingSoonDesc',
  },
  about: {
    titleKey: 'aboutTitle',
    glyph: 'info',
    bodyKey: 'comingSoonDesc',
  },
  lineupHistory: {
    titleKey: 'lineupHistTitle',
    glyph: 'lineup',
    bodyKey: 'comingSoonDesc',
  },
  packOpening: {
    titleKey: 'packOpenTitle',
    glyph: 'gift',
    bodyKey: 'comingSoonDesc',
  },
};


// ─── ComingSoonScreen ───────────────────────────────────────────────────────
// A canonical wrapper: PfPageBar (back + title) + body holding HHEmptyState.
// Receives `route` (route key) to look up its title + glyph from APP_I18N.
function ComingSoonScreen({ route, locale = 'fa' }) {
  const APP    = window.APP_I18N?.[locale] || {};
  const PB     = window.PfPageBar;
  const Empty  = window.HHEmptyState;

  const meta   = PH_ROUTE_CONTENT[route] || PH_ROUTE_CONTENT.settings;
  const title  = APP[meta.titleKey] || APP.comingSoon;
  const body   = APP[meta.bodyKey]  || APP.comingSoonDesc;
  const cta    = APP.backToHome;

  return (
    <div className="ph-screen">
      {PB && <PB locale={locale} title={title}/>}
      <div className="ph-screen-scroll">
        <div className="ph-screen-body">
          {Empty
            ? <Empty locale={locale}
                     title={APP.comingSoon}
                     body={body}
                     ctaLabel={cta}
                     ctaIcon="home"
                     glyphIcon={meta.glyph}
                     onCta={() => window.navTo && window.navTo('home')}/>
            : (
                <div className="ph-fallback">
                  <h2>{APP.comingSoon}</h2>
                  <p>{body}</p>
                  <button type="button" className="ph-fallback-btn"
                          onClick={() => window.navTo && window.navTo('home')}>
                    {cta}
                  </button>
                </div>
              )
          }
        </div>
      </div>
    </div>
  );
}


// ─── NotFoundScreen ─────────────────────────────────────────────────────────
function NotFoundScreen({ locale = 'fa' }) {
  const APP    = window.APP_I18N?.[locale] || {};
  const PB     = window.PfPageBar;
  const Empty  = window.HHEmptyState;
  return (
    <div className="ph-screen">
      {PB && <PB locale={locale} title={APP.notFoundTitle}/>}
      <div className="ph-screen-scroll">
        <div className="ph-screen-body">
          {Empty && <Empty locale={locale}
                           title={APP.notFoundTitle}
                           body={APP.notFoundDesc}
                           ctaLabel={APP.backToHome}
                           ctaIcon="home"
                           glyphIcon="search"
                           onCta={() => window.navTo && window.navTo('home')}/>}
        </div>
      </div>
    </div>
  );
}


// ─── Local styles ──────────────────────────────────────────────────────────
// Only layout chrome around the canonical empty state. No new tokens.
const PH_CSS = `
  .ph-screen {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-block-size: 100%;
    inline-size: 100%;
  }
  .ph-screen-scroll {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .ph-screen-body {
    display: flex; align-items: center; justify-content: center;
    min-block-size: calc(100vh - 200px);
    padding-block: 32px 96px;
    padding-inline: 16px;
  }
  /* Reuse HHEmptyState's existing styling — only constrain its width here. */
  .ph-screen-body .hh-empty { inline-size: 100%; max-inline-size: 460px; }

  /* Fallback (when HHEmptyState isn't loaded) — minimal, token-only. */
  .ph-fallback {
    display: flex; flex-direction: column; gap: 12px;
    align-items: center; text-align: center;
    max-inline-size: 460px;
    padding-block: 48px;
  }
  .ph-fallback h2 { color: var(--text-primary); font-size: 22px; font-weight: 800; margin: 0; }
  .ph-fallback p  { color: var(--text-secondary); font-size: 14px; margin: 0; line-height: 1.7; }
  .ph-fallback-btn {
    margin-block-start: 12px;
    padding: 10px 18px;
    background: var(--accent-primary);
    color: var(--bg-deep);
    border: 0; border-radius: 999px;
    font-weight: 700; font-size: 13px;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
  }
  .ph-fallback-btn:hover { transform: translateY(-1px); }
  .ph-fallback-btn:active { transform: translateY(0); opacity: .9; }

  @media (prefers-reduced-motion: reduce) {
    .ph-fallback-btn { transition: none; }
  }
`;

if (typeof document !== 'undefined' &&
    !document.getElementById('placeholder-screens-css')) {
  const s = document.createElement('style');
  s.id = 'placeholder-screens-css';
  s.textContent = PH_CSS;
  document.head.appendChild(s);
}


// ─── Export to window ───────────────────────────────────────────────────────
Object.assign(window, {
  ComingSoonScreen,
  NotFoundScreen,
});