// app/page.js or app/dashboard/page.js (depending on your structure)
'use client'; // This is needed because we'll use client-side state

import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';

// Dynamically import the chart component to avoid SSR issues
const LineChart = dynamic(() => import("../../components/charts/LineChart"), { 
  ssr: false 
});

export default function LineChartPage() {
  const [darkMode, setDarkMode] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // Load dark mode preference from localStorage
    const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
    if (savedDarkMode !== null) {
      setDarkMode(savedDarkMode);
    }
    setIsLoaded(true);
  }, []);

  useEffect(() => {
    // Save dark mode preference to localStorage when it changes
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
  }, [darkMode]);

  if (!isLoaded) {
    // Preloader while checking dark mode preference
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : ''}`}>
      {/* Main Content Area */}
      <div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
        {/* Main Content */}
        <main>
          <div className="p-4 mx-auto max-w-screen-2xl md:p-6">
            {/* Breadcrumb */}
            <div className="mb-6">
              <nav className="flex" aria-label="Breadcrumb">
                <ol className="inline-flex items-center space-x-1 md:space-x-2">
                  <li className="inline-flex items-center">
                    <a href="#" className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                      Dashboard
                    </a>
                  </li>
                  <li aria-current="page">
                    <div className="flex items-center">
                      <svg className="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"/>
                      </svg>
                      <span className="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Line Chart</span>
                    </div>
                  </li>
                </ol>
              </nav>
            </div>

            {/* Chart Section */}
            <div className="space-y-6">
              <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div className="px-6 py-5">
                  <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                    Line Chart 1
                  </h3>
                </div>
                <div className="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6">
                  {/* Line Chart Component */}
                  <div className="max-w-full overflow-x-auto custom-scrollbar">
                    <div className="min-w-[1000px]">
                      <LineChart />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}