/* crm-app.jsx — Root app with routing + Tweaks */

const CRM_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

const CRUMBS = {
  dashboard:     ['CRM', 'Dashboard'],
  'new-proposal':['CRM', 'Nova proposta'],
  contracts:     ['CRM', 'Contratos'],
  cycle:         ['CRM', 'Ciclo Q3 · 2026'],
  customers:     ['CRM', 'Clientes'],
  products:      ['CRM', 'Produtos'],
  billing:       ['CRM', 'Faturação'],
  calendar:      ['CRM', 'Calendário'],
  'contract-detail': ['CRM', 'Contratos', '—'],
  'customer-detail': ['CRM', 'Clientes', '—'],
};

function App() {
  const [t, setTweak] = useTweaks(CRM_TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('dashboard');
  const [contractId, setContractId] = React.useState(null);
  const [customerId, setCustomerId] = React.useState(null);
  const [cmdkOpen, setCmdkOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

  // Global ⌘K
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setCmdkOpen(o => !o);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const openContract = (id) => { setContractId(id); setRoute('contract-detail'); };
  const openCustomer = (id) => { setCustomerId(id); setRoute('customer-detail'); };
  const navigate = (r) => {
    setRoute(r);
    if (r !== 'contract-detail') setContractId(null);
    if (r !== 'customer-detail') setCustomerId(null);
  };

  // Crumbs for current view
  let crumbs = CRUMBS[route] || ['CRM'];
  if (route === 'contract-detail' && contractId) crumbs = ['CRM', 'Contratos', contractId];
  if (route === 'customer-detail' && customerId) crumbs = ['CRM', 'Clientes', CRM_BY_ID[customerId]?.name || customerId];

  return (
    <div className="app">
      <Sidebar route={route} onNav={navigate} onOpenSearch={() => setCmdkOpen(true)} />
      <div className="main">
        <TopBar crumbs={crumbs} onOpenSearch={() => setCmdkOpen(true)} />

        {route === 'dashboard' && <Dashboard onNav={navigate} onOpenContract={openContract}/>}
        {route === 'new-proposal' && <NewProposal onNav={navigate}/>}
        {route === 'contracts' && <ContractsList onOpenContract={openContract}/>}
        {route === 'contract-detail' && <ContractDetail contractId={contractId} onBack={() => navigate('contracts')}/>}
        {route === 'cycle' && <CycleView onOpenContract={openContract}/>}
        {route === 'customers' && <CustomersList onOpenCustomer={openCustomer}/>}
        {route === 'customer-detail' && <CustomerDetail customerId={customerId} onBack={() => navigate('customers')} onOpenContract={openContract}/>}
        {route === 'products' && <ProductsList/>}
        {route === 'billing' && <Billing/>}
        {route === 'calendar' && <CalendarView onOpenContract={openContract}/>}
      </div>

      <CommandPalette
        open={cmdkOpen}
        onClose={() => setCmdkOpen(false)}
        onNav={navigate}
        onOpenContract={openContract}
        onOpenCustomer={openCustomer}
      />

      <TweaksPanel title="Tweaks · RVDE">
        <TweakSection label="Tema" />
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={[
            {value:'light', label:'Claro'},
            {value:'dark',  label:'Escuro'},
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
        <div style={{marginTop:6, fontSize:11, lineHeight:1.5, color:'rgba(41,38,27,.55)'}}>
          <strong style={{color:'rgba(41,38,27,.75)'}}>Claro</strong> · bone sobre papel quente.<br/>
          <strong style={{color:'rgba(41,38,27,.75)'}}>Escuro</strong> · tobacco e sand. Atalho · <span style={{fontFamily:'var(--mono)'}}>⌘K → trocar tema</span>.
        </div>
      </TweaksPanel>
    </div>
  );
}

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