import React from 'react';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { ThemeProvider } from '@/components/ThemeProvider';
import { ToastProvider } from '@/components/Toast';
import { AppShell } from '@/components/AppShell';

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700', '800'],
  display: 'swap',
  variable: '--font-inter',
});

export const metadata: Metadata = {
  title: 'Zyphon',
  description: 'Unified Messaging Gateway',
};

/* Match reference v5 FOUC: data-theme + accent presets (short + long CSS vars) */
const FOUC_SCRIPT = `try{
var m=localStorage.getItem('zy-theme')||'light';
var d=m==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):m;
var h=document.documentElement;
h.dataset.theme=d;
h.setAttribute('data-theme',d);
h.classList.remove('dark','light');
var ui={};try{ui=JSON.parse(localStorage.getItem('zy-ui')||'{}')}catch(e){}
var ACC={vermilion:['#E4572E','#CF4723','#FDECE6','#FF7A4D','#FF8F68','#3A241C'],indigo:['#4F46E5','#4338CA','#EEF0FF','#818CF8','#A5B4FC','#22233F'],emerald:['#0F9D6B','#0B835A','#E1F5EC','#34D399','#6EE7B7','#12281F'],teal:['#0E8F96','#0B7A80','#DFF4F5','#2DD4BF','#5EEAD4','#10282A'],violet:['#7C3AED','#6D28D9','#F0E8FE','#A78BFA','#C4B5FD','#2A2140'],rose:['#E11D48','#BE123C','#FEE6EC','#FB7185','#FDA4AF','#3A1820'],amber:['#D97706','#B45309','#FEF0D9','#FBBF24','#FCD34D','#35260E'],slate:['#334155','#1E293B','#E7EBF0','#94A3B8','#CBD5E1','#222A35']};
var a=ACC[ui.accent||ui.acc||'vermilion']||ACC.vermilion,dark=d==='dark'||d==='midnight',o=dark?3:0;
var onac=dark?'#141311':'#ffffff';
h.style.setProperty('--ac',a[o]);h.style.setProperty('--ach',a[o+1]);h.style.setProperty('--acs',a[o+2]);h.style.setProperty('--onac',onac);
h.style.setProperty('--accent',a[o]);h.style.setProperty('--accent-hover',a[o+1]);h.style.setProperty('--accent-soft',a[o+2]);h.style.setProperty('--on-accent',onac);
h.dataset.den=(ui.density||ui.den)==='compact'?'compact':'comfortable';
h.dataset.rad=ui.radius||ui.rad||'default';
var fs=ui.fontSize||ui.fs||'md';h.dataset.fs=fs==='default'?'md':fs;
h.dataset.hc=(ui.highContrast||ui.hc)?'on':'off';h.dataset.rm=(ui.reduceMotion||ui.rm)?'on':'off';
}catch(e){}`;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-theme="light" className={inter.variable} suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: FOUC_SCRIPT }} />
      </head>
      <body className={inter.className}>
        <ThemeProvider>
          <ToastProvider>
            <AppShell>{children}</AppShell>
          </ToastProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}