'use client';

import React, { useEffect, useState } from 'react';

interface ThemeProviderProps {
  children: React.ReactNode;
}

export default function ThemeProvider({ children }: ThemeProviderProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    async function applyTheme() {
      let themeMode = 'dark';
      let accentColor = 'orange';
      try {
        const res = await fetch('/api/settings');
        const data = await res.json();
        if (data.success) {
          themeMode = data.data.themeMode || 'dark';
          accentColor = data.data.accentColor || 'orange';
        }
      } catch {
        // use defaults
      }
      // Set data-theme + data-accent attributes for FoodMart CSS variables
      document.documentElement.setAttribute('data-theme', themeMode);
      document.documentElement.setAttribute('data-accent', accentColor);
      // Toggle .dark class so shadcn/ui components use matching colors
      if (themeMode === 'dark') {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
      setMounted(true);
    }
    applyTheme();
  }, []);

  if (!mounted) {
    return (
      <div className="dark min-h-screen" data-theme="dark" data-accent="orange">
        {children}
      </div>
    );
  }

  return <>{children}</>;
}