'use client';

import { useEffect, useState } from 'react';
import Head from 'next/head';
import dynamic from 'next/dynamic';
import Preloader from "../../components/partials/preloaders";
// import Sidebar from '../partials/sidebar';
import Overlay from "../../components/partials/overlay";
import Header from "../../components/partials/header";
import Breadcrumb from "../../components/partials/breadcrumb";

// Dynamically import the chart component with SSR disabled
const ChartOne = dynamic(
    () => import("../../components/charts/chart-01"),
    { ssr: false }
);

export default function BarChartPage() {
    const [darkMode, setDarkMode] = useState(false);
    const [loaded, setLoaded] = useState(true);

    // Initialize dark mode from localStorage
    useEffect(() => {
        const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
        if (savedDarkMode !== null) {
            setDarkMode(savedDarkMode);
        }
        setLoaded(true); // Simulate loading completion
    }, []);

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

    return (
        <div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : ''}`}>
            {/* Preloader */}
            {!loaded && <Preloader />}

            {/* Sidebar */}
            {/* <Sidebar /> */}

            {/* Content Area */}
            <div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
                {/* Small Device Overlay */}
                <Overlay />

                {/* Header */}
                <div darkMode={darkMode} setDarkMode={setDarkMode} className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
                    <Header />
                </div>
                {/* Main Content */}
                <main>
                    <div className="p-4 mx-auto max-w-screen-2xl md:p-6">
                        {/* Breadcrumb */}
                        <Breadcrumb pageName="Bar Chart" />

                        <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">
                                        Bar Chart 1
                                    </h3>
                                </div>
                                <div className="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6">
                                    {/* Chart One Component */}
                                    <ChartOne />
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    );
}