// MJC Admin Dashboard — Main App
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "cardStyle": "shadowed",
  "sidebarStyle": "expanded",
  "accentIntensity": "balanced",
  "showAiInsights": true
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useStateApp('en');
  const [route, setRoute] = useStateApp('overview');
  const [collapsed, setCollapsed] = useStateApp(false);
  const tw = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { values: TWEAK_DEFAULTS };
  const tweaks = tw.values;
  const setTweak = tw.setTweak;

  // Auto-collapse if sidebar style says so
  useEffectApp(() => {
    if (tweaks.sidebarStyle === 'collapsed') setCollapsed(true);
    if (tweaks.sidebarStyle === 'expanded') setCollapsed(false);
  }, [tweaks.sidebarStyle]);

  const I18N = window.MJC_DATA.I18N;
  const t = (key) => I18N[lang][key] || I18N.en[key] || key;

  // Breadcrumbs from route
  const parts = route.split('/');
  const parent = parts[0];
  const child = parts[1];
  const parentKeyMap = {
    'overview': 'overview',
    'ai-sales': 'ai_sales',
    'bookings': 'bookings',
    'fleet': 'fleet',
    'guide': 'tour_guide',
    'accounting': 'accounting',
    'crm': 'customer_crm',
    'suppliers': 'supplier_management',
    'reports': 'reports',
    'hr': 'staff_hr',
    'settings': 'settings'
  };
  const childKeyMap = {
    'inbox': 'enquiry_inbox', 'conversations': 'bot_conversations', 'pipeline': 'lead_pipeline',
    'tours': 'tour_packages', 'flights': 'flight_tickets', 'hotels': 'hotel_reservations',
    'registry': 'vehicle_registry', 'drivers': 'driver_schedule', 'assignment': 'trip_assignment',
    'roster': 'guide_roster', 'daily': 'daily_assignment', 'commission': 'commission', 'expense': 'expense_claims',
    'revenue': 'revenue_dashboard', 'invoices': 'invoices', 'pnl': 'pnl_report'
  };
  const breadcrumbs = [t('brand_name'), t(parentKeyMap[parent] || 'overview')];
  if (child && childKeyMap[child]) breadcrumbs.push(t(childKeyMap[child]));

  // Render module
  const renderModule = () => {
    if (parent === 'overview') return <OverviewPage t={t} lang={lang} />;
    if (parent === 'ai-sales') {
      if (child === 'conversations') return <BotConversations t={t} lang={lang} />;
      if (child === 'pipeline') return <LeadPipeline t={t} lang={lang} />;
      return <EnquiryInbox t={t} lang={lang} />;
    }
    if (parent === 'bookings') return <BookingsPage t={t} lang={lang} />;
    if (parent === 'fleet') return <FleetPage t={t} lang={lang} />;
    if (parent === 'guide') return <TourGuidePage t={t} lang={lang} route={route} />;
    if (parent === 'accounting') return <AccountingPage t={t} lang={lang} route={route} />;
    if (parent === 'crm') return <CRMPage t={t} lang={lang} />;
    if (parent === 'suppliers') return <SuppliersPage t={t} lang={lang} />;
    if (parent === 'reports') return <ReportsPage t={t} lang={lang} />;
    if (parent === 'hr') return <HRPage t={t} lang={lang} />;
    if (parent === 'settings') return <SettingsPage t={t} lang={lang} />;
    return <OverviewPage t={t} lang={lang} />;
  };

  return (
    <div className="app" data-collapsed={collapsed} data-density={tweaks.density} data-card-style={tweaks.cardStyle}>
      <Sidebar
        active={route}
        onNavigate={setRoute}
        t={t}
        collapsed={collapsed}
        onToggleCollapse={() => setCollapsed(c => !c)}
      />
      <Topbar
        t={t}
        lang={lang}
        onLang={setLang}
        breadcrumbs={breadcrumbs}
      />
      <main className="main" key={route}>
        {renderModule()}
      </main>

      {/* Tweaks Panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Density">
            <window.TweakRadio
              label="Spacing"
              value={tweaks.density}
              options={[
                { value: 'compact', label: 'Compact' },
                { value: 'comfortable', label: 'Comfort' },
                { value: 'spacious', label: 'Spacious' }
              ]}
              onChange={(v) => setTweak('density', v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Cards">
            <window.TweakRadio
              label="Style"
              value={tweaks.cardStyle}
              options={[
                { value: 'flat', label: 'Flat' },
                { value: 'shadowed', label: 'Soft' },
                { value: 'outlined', label: 'Outline' }
              ]}
              onChange={(v) => setTweak('cardStyle', v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Sidebar">
            <window.TweakRadio
              label="State"
              value={tweaks.sidebarStyle}
              options={[
                { value: 'expanded', label: 'Expanded' },
                { value: 'collapsed', label: 'Collapsed' }
              ]}
              onChange={(v) => setTweak('sidebarStyle', v)}
            />
          </window.TweakSection>
          <window.TweakSection title="AI Surfaces">
            <window.TweakToggle
              label="Show AI insights"
              value={tweaks.showAiInsights}
              onChange={(v) => setTweak('showAiInsights', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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