'use client';

import { useState, useEffect } from 'react';
import Head from 'next/head';
import Preloader from "../../components/partials/preloaders";
// import Sidebar from "../../components/partials/header";
import Overlay from "../../components/partials/overlay";
// import Header from '../../components/partials/Header';
import Breadcrumb from "../../components/partials/breadcrumb";
import Video01 from "../../components/partials/video/video-01";
import Video02 from "../../components/partials/video/video-02";
import Video04 from "../../components/partials/video/video-04";

export default function VideosPage() {
  const [darkMode, setDarkMode] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [sidebarToggle, setSidebarToggle] = useState(false);

  useEffect(() => {
    const savedDarkMode = JSON.parse(
      localStorage.getItem('darkMode') || 'false'
    );
    setDarkMode(savedDarkMode);
    setLoaded(true);
  }, []);

  useEffect(() => {
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
  }, [darkMode]);

  if (!loaded) {
    return <Preloader />;
  }

  return (
   <div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
      <Head>
        <title>Videos | TailAdmin - Tailwind CSS Admin Dashboard Template</title>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
      </Head>

      <div className="flex h-screen overflow-hidden">
        <div className="relative flex flex-col flex-1 overflow-hidden">
          <Overlay 
            sidebarToggle={sidebarToggle}
            setSidebarToggle={setSidebarToggle}
          />
          
          <main className="h-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">            <div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
              <Breadcrumb pageName="Videos" />
              
              <div className="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-2">
                <div className="space-y-5 sm: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 border-b border-gray-200 dark:border-gray-800">
                      <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                        Video Ratio 16:9
                      </h3>
                    </div>
                    <div className="p-4 sm:p-6">
                      <Video01 />
                    </div>
                  </div>
                  
                  <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 border-b border-gray-200 dark:border-gray-800">
                      <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                        Video Ratio 4:3
                      </h3>
                    </div>
                    <div className="p-4 sm:p-6">
                      <Video02 />
                    </div>
                  </div>
                </div>
                
                <div className="space-y-5 sm: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 border-b border-gray-200 dark:border-gray-800">
                      <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                        Video Ratio 4:3
                      </h3>
                    </div>
                    <div className="p-4 sm:p-6">
                      <Video02 />
                    </div>
                  </div>
                  
                  <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 border-b border-gray-200 dark:border-gray-800">
                      <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                        Video Ratio 1:1
                      </h3>
                    </div>
                    <div className="p-4 sm:p-6">
                      <Video04 />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}