import { useCallback, useEffect, useState } from 'react';
import { __, _x, sprintf } from '@wordpress/i18n';
import { api, cfg } from './api.js';
import * as UI from './ui.jsx';
import { Button, Icon, Notice, Spinner, Toasts } from './ui.jsx';
import Dashboard from './screens/Dashboard.jsx';
import Settings from './screens/Settings.jsx';
import Hosted from './screens/Hosted.jsx';
import Notifications from './screens/Notifications.jsx';
import Extend from './screens/Extend.jsx';
import Help from './screens/Help.jsx';

const CORE = { dashboard: Dashboard, settings: Settings, hosted: Hosted, notifications: Notifications, extend: Extend, help: Help };

// Screens in menu order come from PHP (Core's plus any add-on's via `dashbread_admin_screens`).
// Core components are wired here; an add-on's bundle (enqueued after 'dashbread-admin') calls
// window.DashbreadAdmin.registerScreen('license', Component) and the app re-renders.
const SCREENS = {};
// Product name and marks (the White Label add-on sets them; Core says Dashbread).
const brand = Object.assign({ name: 'Dashbread', logo: '', tagline: cfg.pro
  ? sprintf( /* translators: %s: Dashbread Core version number */ __('Core %s · Pro installed', 'dashbread'), cfg.version )
  : sprintf( /* translators: %s: Dashbread Core version number */ __('Core %s · Pro not installed', 'dashbread'), cfg.version ) }, cfg.brand || {});
(cfg.screens || []).forEach((s) => { SCREENS[s.id] = { label: s.label, slug: s.slug, C: CORE[s.id] || null }; });
const screenListeners = new Set();
function registerScreen(id, Component) {
  // PHP decides which screens exist (menus, capabilities, entitlements). A component for a screen
  // PHP didn't list is kept aside, never given a tab.
  if (!SCREENS[id]) return;
  SCREENS[id].C = Component;
  screenListeners.forEach((l) => l());
}
window.DashbreadAdmin = Object.assign(window.DashbreadAdmin || {}, { registerScreen, ui: UI, api, React: window.React });

function Pending() {
  return <Spinner label={__('Loading screen…', 'dashbread')} />;
}

function screenFromUrl(fallback) {
  const page = new URLSearchParams(location.search).get('page') || '';
  return Object.keys(SCREENS).find((k) => SCREENS[k].slug === page) || fallback;
}

/** Keep the wp-admin submenu highlight in sync when switching screens client-side. */
function syncWpMenu(slug) {
  document.querySelectorAll('#toplevel_page_dashbread .wp-submenu li').forEach((li) => {
    const a = li.querySelector('a');
    const on = a && a.getAttribute('href') === 'admin.php?page=' + slug;
    li.classList.toggle('current', !!on);
    a && a.classList.toggle('current', !!on);
  });
}

function readMode() {
  try { return localStorage.getItem('dashbread-admin-mode') || 'light'; } catch (e) { return 'light'; }
}

export default function App({ initial }) {
  const [screen, setScreen] = useState(() => screenFromUrl(initial));
  const [data, setData] = useState(null);
  const [error, setError] = useState('');
  const [mode, setMode] = useState(readMode);
  const [, bump] = useState(0);
  useEffect(() => { const l = () => bump((n) => n + 1); screenListeners.add(l); return () => screenListeners.delete(l); }, []);

  const load = useCallback(async () => {
    setError('');
    try { setData(await api.bootstrap()); } catch (e) { setError(e.message); }
  }, []);
  useEffect(() => { load(); }, [load]);

  useEffect(() => {
    document.documentElement.setAttribute('data-sui-preset', 'console');
    document.documentElement.setAttribute('data-sui-mode', mode);
    try { localStorage.setItem('dashbread-admin-mode', mode); } catch (e) {}
    return () => { document.documentElement.removeAttribute('data-sui-mode'); document.documentElement.removeAttribute('data-sui-preset'); };
  }, [mode]);

  const go = useCallback((key) => {
    if (!SCREENS[key]) return;
    setScreen(key);
    history.pushState({ dashbread: key }, '', cfg.adminUrl + '?page=' + SCREENS[key].slug);
    syncWpMenu(SCREENS[key].slug);
    window.scrollTo(0, 0);
  }, []);

  useEffect(() => {
    const h = () => setScreen(screenFromUrl('dashboard'));
    window.addEventListener('popstate', h);
    return () => window.removeEventListener('popstate', h);
  }, []);

  const Screen = (SCREENS[screen] && SCREENS[screen].C) || Pending;

  return (
    <div className="sa-app">
      <header className="sa-hero">
        {brand.logo ? <img className="sa-hero-logo" src={brand.logo} alt="" /> : <span className="sa-hero-mark">{brand.name.charAt(0).toUpperCase()}</span>}
        <div className="sa-grow">
          <div className="sa-hero-title" data-brand-name>{brand.name}</div>
          {brand.tagline && <div className="sa-hero-sub">{brand.tagline}</div>}
        </div>
        {data && <Button size="sm" className="sa-hero-btn" href={data.status.app_url} target="_blank" icon="external-link">{sprintf( /* translators: %s: public app route, e.g. "app" */ _x('Open /%s', 'button: visit the public app URL', 'dashbread'), data.status.route )}</Button>}
        <button type="button" className="sa-icobtn sa-hero-btn" aria-label={__('Toggle light or dark', 'dashbread')} onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}><Icon name={mode === 'dark' ? 'sun' : 'moon'} size={18} /></button>
      </header>
      <nav className="sa-tabs" aria-label={sprintf( /* translators: %s: product name */ __('%s screens', 'dashbread'), brand.name )}>
        {Object.entries(SCREENS).map(([k, s]) => (
          <a key={k} href={cfg.adminUrl + '?page=' + s.slug} aria-current={k === screen ? 'page' : undefined}
            onClick={(e) => { if (!e.metaKey && !e.ctrlKey) { e.preventDefault(); go(k); } }} className={(k === screen ? 'on' : '') + (k === 'help' ? ' sa-tab-end' : '')}>{s.label}</a>
        ))}
      </nav>
      <div className="sa-body">
        {error && <Notice tone="error"><b>{__('Could not load.', 'dashbread')}</b> {error} <button type="button" className="sa-link" onClick={load}>{__('Retry', 'dashbread')}</button></Notice>}
        {!data && !error && <Spinner />}
        {data && <Screen data={data} setData={setData} go={go} reload={load} />}
      </div>
      <Toasts />
    </div>
  );
}