import type { Metadata } from 'next'
import '../src/styles/index.css'
import { BackToTop } from '../src/components/BackToTop'
import { MatomoAnalytics } from '../src/components/MatomoAnalytics'

export const metadata: Metadata = {
  title: 'Filamenteka',
  description: 'Automatsko praćenje filamenata sa kodiranjem bojama',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="sr" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                document.documentElement.classList.add('no-transitions');
                // Apply dark mode immediately for admin pages
                if (window.location.pathname.startsWith('/upadaj')) {
                  document.documentElement.classList.add('dark');
                } else {
                  // For non-admin pages, check localStorage
                  try {
                    const darkMode = localStorage.getItem('darkMode');
                    if (darkMode === 'true') {
                      document.documentElement.classList.add('dark');
                    }
                  } catch (e) {}
                }
                // Remove no-transitions class after a short delay
                window.addEventListener('load', function() {
                  setTimeout(function() {
                    document.documentElement.classList.remove('no-transitions');
                  }, 100);
                });
              })();
            `,
          }}
        />
      </head>
      <body suppressHydrationWarning>
        {children}
        <BackToTop />
        {process.env.NEXT_PUBLIC_MATOMO_URL && process.env.NEXT_PUBLIC_MATOMO_SITE_ID && (
          <MatomoAnalytics 
            matomoUrl={process.env.NEXT_PUBLIC_MATOMO_URL}
            siteId={process.env.NEXT_PUBLIC_MATOMO_SITE_ID}
          />
        )}
      </body>
    </html>
  )
}