'use client';

import { useState } from 'react';
import { usePathname } from 'next/navigation';
import { motion } from 'framer-motion';

import { Sidebar } from './Sidebar';
import { Header } from './Header';
import { allNavItems } from '@/config/dashboard';

import Image from 'next/image';
export function DashboardShell({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const pathname = usePathname();

  // Kalkulasi Title secara dinamis
  const currentItem = allNavItems.find((item) =>
    'exact' in item && item.exact
      ? pathname === item.href
      : pathname.startsWith(item.href)
  );
  const pageTitle = currentItem?.label ?? 'Dashboard';

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 flex relative overflow-hidden">
      {/* Global Background for Glassmorphism */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-yellow-300/30 rounded-full blur-[120px] -translate-y-1/3 translate-x-1/3 opacity-50" />
        <div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-300/30 rounded-full blur-[120px] opacity-50" />
        {/* Floating Mascot Background */}
        <div className="absolute bottom-10 right-10 opacity-10">
          <Image
            src="/mascots/salta-saltu-salto-happy.avif"
            alt="Mascots"
            className="w-[400px] h-auto object-contain"
            width={500}
            height={500}
          />
        </div>
      </div>

      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

      {/* Main Content Area */}
      <div className="flex-1 flex flex-col min-w-0 lg:pl-[280px] relative z-10 transition-all duration-300 ease-in-out">
        <Header
          onMenuClick={() => setSidebarOpen(true)}
          pageTitle={pageTitle}
        />

        {/* Content Wrapper + Animasi Masuk */}
        <motion.main
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
          className="flex-1 p-4 lg:p-8"
        >
          {children}
        </motion.main>
      </div>
    </div>
  );
}