/* app.jsx — Top-level routing, i18n, tweaks */
/* global React, ReactDOM,
   I18nProvider, LanguageSwitcher,
   RouterCtx, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakSlider, TweakToggle,
   ScreenLanding, ScreenAuth, ScreenAuthForgot,
   ScreenBrandDashboard, ScreenDiscovery, ScreenCampaign, ScreenCampaignReport,
   ScreenBrandBriefs, ScreenBrandBriefDetail, ScreenBrandBriefNew,
   ScreenBrandCampaigns, ScreenBrandCampaignNew,
   ScreenBrandReports, ScreenBrandInfluencerDetail, ScreenBrandAFFReport,
   ScreenBrandImport, ScreenBrandSettings,
   ScreenCreator,
   ScreenCreatorDiscover, ScreenCreatorBriefDetail, ScreenCreatorApplications, ScreenCreatorApplicationDetail,
   ScreenCreatorCampaigns, ScreenCreatorCampaignDetail,
   ScreenCreatorCampaignKickoff, ScreenCreatorCampaignUpload, ScreenCreatorCampaignReview,
   ScreenCreatorCampaignRevision, ScreenCreatorCampaignPublish, ScreenCreatorCampaignWrap,
   ScreenCreatorEarnings, ScreenCreatorProfile, ScreenCreatorSettings
*/

// Top-level quick navigation groups (shown in pill chrome)
const TOP_LEVEL = [
  { id: 'landing',          label: 'Landing',  group: 'public' },
  { id: 'auth',             label: 'Auth',     group: 'public' },
  { id: 'brand-dashboard',  label: 'Brand',    group: 'brand' },
  { id: 'creator-dashboard',label: 'Creator',  group: 'creator' },
];

// Map every route to its screen component
const ROUTES = {
  landing:                   ScreenLanding,
  auth:                      ScreenAuth,
  'auth-forgot':             ScreenAuthForgot,
  // Brand portal
  'brand-dashboard':         ScreenBrandDashboard,
  'brand-discovery':         ScreenDiscovery,
  'brand-influencer-detail': ScreenBrandInfluencerDetail,
  'brand-briefs':            ScreenBrandBriefs,
  'brand-brief-detail':      ScreenBrandBriefDetail,
  'brand-brief-new':         ScreenBrandBriefNew,
  'brand-campaigns':         ScreenBrandCampaigns,
  'brand-campaign-detail':   ScreenCampaign,
  'brand-campaign-new':      ScreenBrandCampaignNew,
  'brand-report-detail':     ScreenCampaignReport,
  'brand-reports':           ScreenBrandReports,
  'brand-aff':               ScreenBrandAFFReport,
  'brand-import':            ScreenBrandImport,
  'brand-settings':          ScreenBrandSettings,
  // Creator portal
  'creator-dashboard':       ScreenCreator,
  'creator-discover':        ScreenCreatorDiscover,
  'creator-brief-detail':    ScreenCreatorBriefDetail,
  'creator-applications':    ScreenCreatorApplications,
  'creator-application-detail': ScreenCreatorApplicationDetail,
  'creator-campaigns':         ScreenCreatorCampaigns,
  'creator-campaign-detail':   ScreenCreatorCampaignDetail,
  'creator-campaign-kickoff':  ScreenCreatorCampaignKickoff,
  'creator-campaign-upload':   ScreenCreatorCampaignUpload,
  'creator-campaign-review':   ScreenCreatorCampaignReview,
  'creator-campaign-revision': ScreenCreatorCampaignRevision,
  'creator-campaign-publish':  ScreenCreatorCampaignPublish,
  'creator-campaign-wrap':     ScreenCreatorCampaignWrap,
  'creator-earnings':        ScreenCreatorEarnings,
  'creator-profile':         ScreenCreatorProfile,
  'creator-settings':        ScreenCreatorSettings,
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "screen": "landing",
  "locale": "en",
  "motionLevel": 7,
  "palette": "default",
  "showAmbient": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = tweaks.screen;
  const locale = tweaks.locale;

  // Expose locale setter globally so AppTopbar's LanguageSwitcher can call it without prop drilling
  React.useEffect(() => {
    window.__setLocale = (l) => setTweak('locale', l);
  }, [setTweak]);

  // Routing helpers
  const go = React.useCallback((r) => setTweak('screen', r), [setTweak]);

  // Palette overrides
  React.useEffect(() => {
    const palettes = {
      default:  { '--cyan': '#009CFF', '--indigo': '#1C1CC9', '--mint': '#79FEE7', '--mint-deep': '#1FD6B4', '--pink-hot': '#FF6FA3', '--yellow': '#FEE960' },
      sunset:   { '--cyan': '#FF7A59', '--indigo': '#C13584', '--mint': '#FFCE5C', '--mint-deep': '#F2C411', '--pink-hot': '#FF6FA3', '--yellow': '#FFCE5C' },
      forest:   { '--cyan': '#1FD6B4', '--indigo': '#0F766E', '--mint': '#A7F3D0', '--mint-deep': '#10B981', '--pink-hot': '#FBBF24', '--yellow': '#FDE68A' },
      midnight: { '--cyan': '#6464E8', '--indigo': '#1C1CC9', '--mint': '#A78BFA', '--mint-deep': '#7C3AED', '--pink-hot': '#EC4899', '--yellow': '#FDE68A' }
    };
    const p = palettes[tweaks.palette] || palettes.default;
    Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.palette]);

  // Motion level
  React.useEffect(() => {
    document.documentElement.dataset.motion = tweaks.motionLevel < 3 ? 'low' : tweaks.motionLevel > 7 ? 'high' : 'mid';
  }, [tweaks.motionLevel]);

  const Screen = ROUTES[route] || ScreenLanding;

  // For Auth and Landing, support callback to switch
  const screenProps = {
    onCTA: () => go('auth'),
    onDone: (role) => {
      if (route === 'auth-forgot' && role === 'back') return go('auth');
      return go(role === 'creator' ? 'creator-dashboard' : 'brand-dashboard');
    },
    onForgot: () => go('auth-forgot'),
  };

  // Detect group for chrome highlighting
  const currentGroup = route === 'landing' ? 'public'
    : route === 'auth' ? 'public'
    : route === 'auth-forgot' ? 'public'
    : route.startsWith('brand') ? 'brand'
    : route.startsWith('creator') ? 'creator'
    : 'public';

  return (
    <I18nProvider locale={locale}>
      <RouterCtx.Provider value={{ route, go, locale }}>
        <div data-screen-label={route}>
          {/* Ambient blobs only on landing */}
          {tweaks.showAmbient && route === 'landing' && (
            <div className="bg-poetry" aria-hidden="true">
              <div className="blob b1" />
              <div className="blob b2" />
              <div className="blob b3" />
            </div>
          )}

          {/* Top chrome — quick top-level switcher */}
          <div className="app-chrome no-scrollbar" style={{ overflowX: 'auto' }}>
            {TOP_LEVEL.map(s => (
              <button
                key={s.id}
                className={currentGroup === s.group && (s.id === route || (s.group !== 'public' && route.startsWith(s.group))) ? 'active' : ''}
                onClick={() => go(s.id)}
              >{s.label}</button>
            ))}
          </div>

          <div key={route} style={{ animation: 'screenFade .4s ease-out' }}>
            <Screen {...screenProps} />
          </div>

          <TweaksPanel title="Tweaks">
            <TweakSection label="Language">
              <TweakRadio
                label="Locale"
                value={locale}
                onChange={v => setTweak('locale', v)}
                options={[
                  { value: 'en', label: 'EN' },
                  { value: 'vi', label: 'VI' },
                  { value: 'ms', label: 'MS' },
                ]}
              />
            </TweakSection>

            <TweakSection label="Navigation">
              <TweakSelect
                label="Page"
                value={route}
                onChange={v => go(v)}
                options={Object.keys(ROUTES).map(k => ({ value: k, label: k }))}
              />
            </TweakSection>

            <TweakSection label="Motion">
              <TweakSlider
                label="Motion level"
                value={tweaks.motionLevel}
                onChange={v => setTweak('motionLevel', v)}
                min={0} max={10} step={1}
              />
              <TweakToggle
                label="Ambient blobs"
                value={tweaks.showAmbient}
                onChange={v => setTweak('showAmbient', v)}
              />
            </TweakSection>

            <TweakSection label="Palette">
              <TweakRadio
                label="Color theme"
                value={tweaks.palette}
                onChange={v => setTweak('palette', v)}
                options={[
                  { value: 'default', label: 'Cyan' },
                  { value: 'sunset', label: 'Sunset' },
                  { value: 'forest', label: 'Forest' },
                  { value: 'midnight', label: 'Midnight' },
                ]}
              />
            </TweakSection>
          </TweaksPanel>

          <style>{`
            @keyframes screenFade {
              from { opacity: 0; transform: translateY(8px); }
              to { opacity: 1; transform: translateY(0); }
            }
            [data-motion="low"] .draw-on,
            [data-motion="low"] .grow-h,
            [data-motion="low"] .float-y {
              animation-duration: 0.2s !important;
              animation-delay: 0s !important;
            }
            [data-motion="low"] .bg-poetry { display: none; }
            [data-motion="low"] .orb { animation-duration: 30s; }
          `}</style>
        </div>
      </RouterCtx.Provider>
    </I18nProvider>
  );
}

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