// Main App — routing, auth, tweaks, cmd-K wiring

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "comfortable",
  "sidebarCollapsed": false,
  "role": "Admin"
}/*EDITMODE-END*/;

function App() {
  // Auth state — persist across reloads using sessionStorage
  const [signedIn, setSignedIn] = useStateApp(() => {
    return sessionStorage.getItem('hc-signed-in') === '1';
  });

  function signIn() {
    sessionStorage.setItem('hc-signed-in', '1');
    setSignedIn(true);
  }
  function signOut() {
    sessionStorage.removeItem('hc-signed-in');
    setSignedIn(false);
  }

  if (!signedIn) {
    return <Login onSignin={signIn} onUseDemo={signIn} />;
  }
  return <Workspace onSignOut={signOut} />;
}

function Workspace({ onSignOut }) {
  const [section, setSection] = useStateApp(() => {
    return localStorage.getItem('hc-section') || 'home';
  });
  const [cmdkOpen, setCmdkOpen] = useStateApp(false);
  const [chatOpen, setChatOpen] = useStateApp(false);
  const [chatDM, setChatDM] = useStateApp(null);
  const [aiOpen, setAiOpen] = useStateApp(false);
  const [qcOpen, setQcOpen] = useStateApp(false);
  const [qcType, setQcType] = useStateApp(null);
  const [, bumpAvatar] = useStateApp(0);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => { localStorage.setItem('hc-section', section); }, [section]);

  // Apply theme & density classes to body
  useEffectApp(() => {
    document.body.classList.toggle('theme-dark', t.theme === 'dark');
    document.body.classList.toggle('compact', t.density === 'compact');
  }, [t.theme, t.density]);

  // Cmd-K / Cmd-J shortcuts
  useEffectApp(() => {
    function onKey(e) {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        setCmdkOpen(o => !o);
      } else if ((e.metaKey || e.ctrlKey) && e.key === 'j') {
        e.preventDefault();
        setAiOpen(o => !o);
      }
    }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  // Cross-section navigation requests (e.g. Licenses → open a Vendor)
  useEffectApp(() => {
    function onGoto(e) {
      const { section: sec, target } = e.detail || {};
      if (sec) setSection(sec);
      if (target) setTimeout(() => window.dispatchEvent(new CustomEvent('hitcents:open', { detail: target })), 60);
    }
    window.addEventListener('hitcents:navigate', onGoto);
    return () => window.removeEventListener('hitcents:navigate', onGoto);
  }, []);

  // Re-render the shell when any profile picture changes (sidebar avatar, etc.)
  useEffectApp(() => {
    function onAvatar() { bumpAvatar(n => n + 1); }
    window.addEventListener('hitcents:avatar-changed', onAvatar);
    return () => window.removeEventListener('hitcents:avatar-changed', onAvatar);
  }, []);
  useEffectApp(() => {
    function onOpenDM(e) {
      setChatDM(e.detail?.empId || null);
      setChatOpen(true);
    }
    window.addEventListener('hitcents:open-dm', onOpenDM);
    return () => window.removeEventListener('hitcents:open-dm', onOpenDM);
  }, []);

  // Role → which employee is "logged in"
  const userByRole = {
    'Admin':    'e1',  // Maren — CEO
    'Manager':  'e2',  // Davis — VP Eng
    'Employee': 'e10', // Imani — Staff Eng
    'Sales':    'e20', // Garrett — Senior AE
    'Support':  'e25', // Esi — Senior Support
    'Finance':  'e9',  // Ramon — Controller
  };
  const user = getEmployee(userByRole[t.role] || 'e1');

  function navigate(id) { setSection(id); }
  function openObject(target) {
    // Defer one tick so the new section can mount its event listener
    setTimeout(() => window.dispatchEvent(new CustomEvent('hitcents:open', { detail: target })), 50);
  }

  function renderSection() {
    switch (section) {
      case 'home':       return <Dashboard user={user} onNavigate={navigate} />;
      case 'hrm':        return <HRM />;
      case 'crm':        return <CRM />;
      case 'customers':  return <Customers />;
      case 'vendors':    return <Vendors />;
      case 'contracts':  return <Contracts />;
      case 'finance':    return <FinanceOverview onNavigate={navigate} />;
      case 'fin-invoices': return <FinanceInvoices />;
      case 'fin-bills':  return <FinanceBills />;
      case 'fin-banking': return <FinanceBanking />;
      case 'fin-ledger': return <FinanceLedger />;
      case 'fin-reports': return <FinanceReports />;
      case 'innovation': return <Innovation />;
      case 'licenses':   return <Licenses />;
      case 'files':      return <Files />;
      case 'settings':   return <Settings />;
      default:           return <Dashboard user={user} onNavigate={navigate} />;
    }
  }

  return (
    <div className={`app ${t.sidebarCollapsed ? 'collapsed' : ''}`}>
      <Sidebar
        active={section}
        onNavigate={navigate}
        collapsed={t.sidebarCollapsed}
        user={user}
        onSignOut={onSignOut} />
      <main className="main">
        <Topbar
          section={section}
          user={user}
          role={t.role}
          onRoleClick={() => alert('Use the Tweaks toggle in the toolbar to switch role (or any of the other in-app tweaks)')}
          onCmdK={() => setCmdkOpen(true)}
          onChatToggle={() => setChatOpen(o => !o)}
          onAIToggle={() => setAiOpen(o => !o)}
          onCreate={(type) => { setQcType(type || null); setQcOpen(true); }}
          chatUnread={28} />
        <div className="content" key={section}>
          {renderSection()}
        </div>
      </main>

      <CmdK
        open={cmdkOpen}
        onClose={() => setCmdkOpen(false)}
        onNavigate={navigate}
        onOpenObject={openObject} />

      <ChatOverlay open={chatOpen} onClose={() => { setChatOpen(false); setChatDM(null); }} currentUser={user} initialDM={chatDM} />
      <AIAssistantOverlay open={aiOpen} onClose={() => setAiOpen(false)} currentUser={user} />
      <QuickCreate open={qcOpen} onClose={() => { setQcOpen(false); setQcType(null); }} onNavigate={navigate} initialType={qcType} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance" />
        <TweakRadio label="Theme"
                    value={t.theme}
                    options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]}
                    onChange={v => setTweak('theme', v)} />
        <TweakRadio label="Density"
                    value={t.density}
                    options={[{value:'comfortable',label:'Comfortable'},{value:'compact',label:'Compact'}]}
                    onChange={v => setTweak('density', v)} />
        <TweakToggle label="Collapse sidebar"
                     value={t.sidebarCollapsed}
                     onChange={v => setTweak('sidebarCollapsed', v)} />

        <TweakSection label="Preview as role" />
        <TweakSelect label="Logged-in role"
                     value={t.role}
                     options={[
                       {value:'Admin',label:'Admin · Maren'},
                       {value:'Manager',label:'Manager · Davis'},
                       {value:'Employee',label:'Employee · Imani'},
                       {value:'Sales',label:'Sales · Garrett'},
                       {value:'Support',label:'Support · Esi'},
                       {value:'Finance',label:'Finance · Ramon'},
                     ]}
                     onChange={v => setTweak('role', v)} />

        <TweakSection label="Account" />
        <TweakButton label="Sign out" secondary onClick={onSignOut} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);