import type { Metadata } from 'next';
import { Fraunces, Inter_Tight, JetBrains_Mono } from 'next/font/google';
import { Providers } from '@/components/Providers';
import '@/styles/globals.css';

const interTight = Inter_Tight({
  subsets: ['latin'],
  variable: '--font-sans',
  display: 'swap',
});

const fraunces = Fraunces({
  subsets: ['latin'],
  variable: '--font-display',
  display: 'swap',
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'MeshiTrack',
  description: 'Medicine & Nutrition Management Platform',
};

// Inline script injected before React hydration to read localStorage and
// apply the saved theme/accent without flash of unstyled content.
const themeScript = `
(function() {
  try {
    var t = localStorage.getItem('mt-theme') || 'light';
    var a = localStorage.getItem('mt-accent') || 'sage';
    document.documentElement.setAttribute('data-theme', t);
    var accents = {
      sage:       { brand:'#2f6b4a', deep:'#1e4a32', soft:'#e6efe8', softInk:'#1e4a32' },
      cobalt:     { brand:'#2e5aa8', deep:'#1d3d75', soft:'#e4eaf5', softInk:'#1d3d75' },
      terracotta: { brand:'#b55438', deep:'#7d3825', soft:'#f6e6de', softInk:'#7d3825' },
      graphite:   { brand:'#2c2c28', deep:'#000000', soft:'#e8e6df', softInk:'#2c2c28' },
    };
    var ac = accents[a] || accents.sage;
    var r = document.documentElement.style;
    r.setProperty('--brand', ac.brand);
    r.setProperty('--brand-deep', ac.deep);
    r.setProperty('--brand-soft', ac.soft);
    r.setProperty('--brand-soft-ink', ac.softInk);
    r.setProperty('--viz-1', ac.brand);
  } catch(e) {}
})();
`;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      className={`${interTight.variable} ${fraunces.variable} ${jetbrainsMono.variable}`}
      suppressHydrationWarning
    >
      {}
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
      </head>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
