import type { Metadata } from "next";
import type { ReactNode } from "react";
import "./globals.css";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { WhatsAppWidget } from "@/components/whatsapp-widget";
import { ConditionalShell } from "@/components/conditional-shell";
import { getCategories } from "@/lib/queries";
import { db } from "@/db";
import { siteSettings } from "@/db/schema";
import { eq } from "drizzle-orm";
import { getMarketingTrackingSettings } from "@/lib/marketing/tracking";
import { AnalyticsTracker } from "@/components/analytics-tracker";

export const metadata: Metadata = {
  title: {
    default: "PetMarketim — Patili Dostlar İçin Pet Shop",
    template: "%s | PetMarketim",
  },
  description:
    "PetMarketim.net: Kedi, köpek, kuş, balık ve tüm patili dostlarınız için mama, ödül, oyuncak ve bakım ürünleri. 1.500 TL üzeri ücretsiz kargo!",
};

async function getSiteSettingValue(key: string): Promise<any> {
  try {
    const rows = await db
      .select({ value: siteSettings.value })
      .from(siteSettings)
      .where(eq(siteSettings.key, key))
      .limit(1);
    return rows[0]?.value ?? null;
  } catch {
    return null;
  }
}

export default async function RootLayout({ children }: { children: ReactNode }) {
  let categories: Awaited<ReturnType<typeof getCategories>> = [];
  let customCssValue: string = "";
  let themeSettings: any = null;
  let trackingSettings: any = null;

  try {
    const [cats, cssData, themeData, trackingData] = await Promise.all([
      getCategories(),
      getSiteSettingValue("customCss"),
      getSiteSettingValue("theme"),
      getMarketingTrackingSettings(true),
    ]);
    categories = cats;
    customCssValue = (cssData as any)?.css ?? "";
    themeSettings = themeData;
    trackingSettings = trackingData;
  } catch {
    // DB bağlantısı yokken (build sırasında) sessizce devam
  }

  // Tema renk değişkenlerini CSS custom property olarak enjekte et
  const themeVars = themeSettings
    ? `
      :root {
        ${themeSettings.primaryColor ? `--color-brand-500: ${themeSettings.primaryColor};` : ""}
        ${themeSettings.accentColor ? `--color-brand-600: ${themeSettings.accentColor};` : ""}
      }
    `
    : "";

  const injectedCss = [themeVars, customCssValue].filter(Boolean).join("\n");

  return (
    <html lang="tr">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Nunito:wght@200..1000&display=swap"
          rel="stylesheet"
        />
        {injectedCss && (
          <style
            id="ai-injected-styles"
            dangerouslySetInnerHTML={{ __html: injectedCss }}
          />
        )}
      </head>
      <body className="flex min-h-screen flex-col bg-cream font-sans text-ink antialiased">
        <AnalyticsTracker settings={trackingSettings} />

        <ConditionalShell show="shop">
          <SiteHeader categories={categories} />
        </ConditionalShell>

        <main className="flex-1">{children}</main>

        <ConditionalShell show="shop">
          <SiteFooter />
          <WhatsAppWidget />
        </ConditionalShell>
      </body>
    </html>
  );
}