import { useEffect, useState } from 'react';
import { assetsUrl } from './lib/api';
import Dashboard from './components/Dashboard';
import ReportView from './components/ReportView';
import WidgetConfigurator from './components/WidgetConfigurator';
import StatementGenerator from './components/StatementGenerator';
import Settings from './components/Settings';
type View = '' | 'report' | 'widget' | 'statement' | 'settings';

function parseHash(): View {
  const valid: View[] = ['', 'report', 'widget', 'statement', 'settings'];
  const raw = window.location.hash.replace('#/', '').replace('#', '');
  if (raw && valid.includes(raw as View)) return raw as View;
  // No hash set — use the view PHP passed when navigating from the WP sidebar.
  const initial = (window as any).accessmateConfig?.initialView as string | undefined;
  return initial && valid.includes(initial as View) ? (initial as View) : '';
}

export default function App() {
  const [view, setView] = useState<View>(parseHash);

  useEffect(() => {
    const onHashChange = () => setView(parseHash());
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  const navigate = (v: View) => {
    window.location.hash = v ? `/${v}` : '/';
    setView(v);
  };

  return (
    <div className="aai-app">
      {/* Sidebar nav */}
      <nav className="aai-nav" aria-label="accessmate navigation">
        <div className="aai-nav__brand">
          <img
            src={assetsUrl + 'accessmate-logo-full.svg'}
            alt="AccessMate"
            className="aai-nav__logo"
          />
        </div>

        <ul className="aai-nav__links">
          <NavItem active={view === ''}         onClick={() => navigate('')}>Dashboard</NavItem>
          <NavItem active={view === 'report'}   onClick={() => navigate('report')}>Report</NavItem>
          <NavItem active={view === 'widget'}   onClick={() => navigate('widget')}>Widget</NavItem>
          <NavItem active={view === 'statement'}onClick={() => navigate('statement')}>Statement</NavItem>
          <NavItem active={view === 'settings'} onClick={() => navigate('settings')}>Settings</NavItem>
        </ul>
      </nav>

      {/* Main content */}
      <main className="aai-main" id="main-content">
        {view === ''          && <Dashboard />}
        {view === 'report'    && <ReportView />}
        {view === 'widget'    && <WidgetConfigurator />}
        {view === 'statement' && <StatementGenerator />}
        {view === 'settings'  && <Settings />}
      </main>
    </div>
  );
}

function NavItem({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <li>
      <button
        className={`aai-nav__link${active ? ' aai-nav__link--active' : ''}`}
        onClick={onClick}
        aria-current={active ? 'page' : undefined}
      >
        {children}
      </button>
    </li>
  );
}