// Nordbank — main app: router, tweaks panel, mount.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent":   "#13B5B1",
  "ctaShape": "pill",
  "density":  "regular",
  "heroArt":  true
}/*EDITMODE-END*/;

// Apply tweaks live by patching a few CSS custom properties + a couple of
// class toggles. Keeps the surface small and avoids invasive rewrites.
function applyTweaks(tw) {
  const root = document.documentElement;
  root.style.setProperty('--nb-accent', tw.accent || '#13B5B1');
  root.style.setProperty('--nb-density', tw.density === 'comfy' ? '1.15' : '1');
  document.body.classList.toggle('nb-comfy', tw.density === 'comfy');
  document.body.classList.toggle('nb-cta-square', tw.ctaShape === 'square');
  document.body.classList.toggle('nb-no-hero-art', !tw.heroArt);
}

// Inject the small CSS that the tweaks rely on.
(function injectTweakStyles(){
  if (document.getElementById('nb-tweak-css')) return;
  const css = `
    /* Live accent override: rewrite teal-500/700 hits in our design. */
    .text-teal-500 { color: var(--nb-accent, #13B5B1) !important; }
    .text-teal-700 { color: color-mix(in oklch, var(--nb-accent, #13B5B1) 80%, #0B2545) !important; }
    .bg-teal-50  { background-color: color-mix(in oklch, var(--nb-accent, #13B5B1) 12%, white) !important; }
    .bg-teal-500 { background-color: var(--nb-accent, #13B5B1) !important; }
    .stroke-teal { stroke: var(--nb-accent, #13B5B1) !important; }
    .nb-comfy main { font-size: calc(1em * var(--nb-density, 1)); }
    .nb-cta-square a[href^="#/apply"], .nb-cta-square .nb-cta-pill { border-radius: 12px !important; }
    .nb-no-hero-art svg[width="640"][height="520"] { display: none; }
  `;
  const tag = document.createElement('style');
  tag.id = 'nb-tweak-css';
  tag.textContent = css;
  document.head.appendChild(tag);
})();

// -----------------------------------------------------------------------------
// Router-aware mount
// -----------------------------------------------------------------------------

function App() {
  useLang();
  const route = useRoute();
  const user = useCurrentUser();
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(tw); }, [tw.accent, tw.ctaShape, tw.density, tw.heroArt]);

  // Auth gate: /portal/* requires a session.
  React.useEffect(() => {
    if (route.startsWith('/portal') && !user) navigate('/login');
  }, [route, user]);

  // Portal owns its own chrome (sidebar instead of Header/Footer).
  if (route.startsWith('/portal')) {
    if (!user) return null; // about to redirect
    return (
      <>
        <Portal />
        <TweaksPanel title="Tweaks">{tweakControls(tw, setTweak)}</TweaksPanel>
      </>
    );
  }

  const page = (() => {
    if (route === '/' || route === '') return <Landing />;
    if (route === '/loans') return <Loans />;
    if (route === '/loans/consumer') return <ConsumerLoan />;
    if (route.startsWith('/apply')) return <Apply />;
    if (route === '/insurance-portal') return <InsurancePortal />;
    if (route === '/login') return <Login />;
    if (route === '/about') return <About />;
    return <NotFound />;
  })();

  return (
    <>
      <Layout>{page}</Layout>
      <TweaksPanel title="Tweaks">{tweakControls(tw, setTweak)}</TweaksPanel>
    </>
  );
}

function tweakControls(tw, setTweak) {
  return (
    <>
      <TweakSection label="Brand"/>
      <TweakColor
        label="Accent"
        value={tw.accent}
        options={["#13B5B1","#7A5AE0","#E08A2F","#1F9D6C"]}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="CTA shape"
        value={tw.ctaShape}
        options={["pill","square"]}
        onChange={(v) => setTweak('ctaShape', v)}
      />
      <TweakSection label="Layout"/>
      <TweakRadio
        label="Density"
        value={tw.density}
        options={["regular","comfy"]}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakToggle
        label="Hero artwork"
        value={tw.heroArt}
        onChange={(v) => setTweak('heroArt', v)}
      />
      <TweakSection label="Data"/>
      <TweakButton
        label="Reset wizard state"
        onClick={() => {
          try { localStorage.removeItem('nordbank.application'); } catch (e) {}
          navigate('/apply');
          setTimeout(() => location.reload(), 50);
        }}
      />
      <TweakButton
        label="Reset DB + log out"
        onClick={() => {
          try {
            logoutUser();
            localStorage.removeItem('nordbank.application');
            dbReset();
          } catch (e) {}
          navigate('/');
          setTimeout(() => location.reload(), 50);
        }}
      />
    </>
  );
}

function NotFound() {
  return (
    <div className="max-w-2xl mx-auto px-4 md:px-6 py-24 text-center">
      <p className="text-xs font-semibold tracking-[0.18em] uppercase text-navy-300">404</p>
      <h1 className="mt-3 text-4xl font-semibold tracking-tight text-navy-900">Not found</h1>
      <p className="mt-3 text-navy-500">The page you asked for doesn't exist.</p>
      <RouterLink to="/" className="mt-6 inline-flex items-center gap-2 bg-navy-900 text-white text-sm font-semibold px-6 py-3 rounded-full">
        ← Home
      </RouterLink>
    </div>
  );
}

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