import {
  HeadContent,
  Outlet,
  Scripts,
  createRootRoute,
} from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanStackDevtools } from '@tanstack/react-devtools'

import appCss from '../styles.css?url'
import { AsciiPanel } from '#/components/ascii/AsciiPanel'
import { NavigationMenu } from '#/components/panels/NavigationMenu'
import { BetslipProvider } from '#/components/providers/BetslipProvider'
import { CurrencyProvider } from '#/components/providers/CurrencyProvider'
import { BetslipSidecar } from '#/components/panels/BetslipSidecar'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: "Quark's Holo-Grid Ledger",
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
    ],
  }),
  shellComponent: RootDocument,
  component: RootComponent,
})

// RootDocument renders the outer HTML envelope
function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      className="bg-black text-slate-300 font-mono select-none antialiased h-screen overflow-hidden"
    >
      <head>
        <HeadContent />
      </head>
      <body className="h-screen max-h-screen p-3 flex flex-col gap-3 box-border bg-black">
        {children}
        <TanStackDevtools
          config={{
            position: 'bottom-right',
          }}
          plugins={[
            {
              name: 'Tanstack Router',
              render: <TanStackRouterDevtoolsPanel />,
            },
          ]}
        />
        <Scripts />
      </body>
    </html>
  )
}

// RootComponent renders the actual terminal UI workspace layout
function RootComponent() {
  return (
    <BetslipProvider>
      <CurrencyProvider>
        <div className="flex flex-col gap-3 h-full w-full">
          {/* ================= HEADER SECTION ================= */}
          <header className="flex justify-between items-center p-3 border border-slate-800 bg-slate-950 text-xs tracking-widest text-slate-400">
            <div className="font-bold text-amber-500">
              [=] QUARK'S HOLO-GRID LEDGER // SUB-NET RECEPTOR
            </div>
            <div className="flex gap-6">
              <span>STARDATE: 54201.3</span>
              <span className="text-emerald-400">
                BALANCE: 4,250.00 LATINUM
              </span>
            </div>
          </header>

          {/* ================= WORKSPACE INTERFACE GRID ================= */}
          <main className="flex-1 grid grid-cols-12 gap-3 min-h-0">
            {/* COLUMN 1: Subspace Navigation Sidecar (Left) */}
            <section className="col-span-3 h-full min-h-0">
              <AsciiPanel
                title="System Array"
                subtitle="Quadrants"
                variant="slate"
              >
                <NavigationMenu />
              </AsciiPanel>
            </section>

            {/* COLUMN 2: Target Matrix / Main Display (Center) */}
            <section className="col-span-6 h-full min-h-0">
              {/* The Outlet element renders the individual nested route content dynamically */}
              <Outlet />
            </section>

            {/* COLUMN 3: Transaction Ledger Ticket (Right) */}
            <section className="col-span-3 h-full min-h-0">
              <AsciiPanel
                title="Wager Slip"
                subtitle="Secure Link"
                variant="amber"
              >
                <BetslipSidecar />
              </AsciiPanel>
            </section>
          </main>

          {/* ================= DIAGNOSTIC BASE FOOTER ================= */}
          <footer className="p-2 border border-slate-900 bg-black/60 text-[10px] text-slate-600 flex justify-between tracking-wide">
            <span>SYSTEM RUNTIME: OK // CORE MODULES ACTIVE</span>
            <span>POWERED BY TANSTACK START + VITE</span>
          </footer>
        </div>
      </CurrencyProvider>
    </BetslipProvider>
  )
}
