"use client";

import { useEffect } from "react";
import { ThemeProvider, useTheme } from "next-themes";

// Gövde zemini (bg-slate-50) — açık ve koyu temadaki karşılığı
const ZEMIN = { light: "#f8fafc", dark: "#080e19" };

/**
 * Mobil adres çubuğu rengi: layout'taki `themeColor` sistemi izler; kullanıcı
 * sitede sistemden farklı bir tema seçtiyse meta etiketleri ona eşitlenir.
 */
function AdresCubuguRengi() {
  const { resolvedTheme } = useTheme();
  useEffect(() => {
    const renk = resolvedTheme === "dark" ? ZEMIN.dark : ZEMIN.light;
    for (const meta of document.querySelectorAll('meta[name="theme-color"]')) {
      meta.setAttribute("content", renk);
    }
  }, [resolvedTheme]);
  return null;
}

/**
 * Tema (DESIGN.md §2.3): <html>'e `dark` sınıfı yazılır, renkler
 * globals.css'teki `.dark` token eşlemesinden gelir. Varsayılan açık tema;
 * kullanıcı footer'daki TemaSecici ile koyu ya da "sistem"e geçer, seçim
 * tarayıcıda saklanır.
 */
export function TemaSaglayici({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="light"
      enableSystem
      storageKey="kt-tema"
      disableTransitionOnChange
    >
      <AdresCubuguRengi />
      {children}
    </ThemeProvider>
  );
}