import React, { useState } from 'react';
import { Link, usePage } from '@inertiajs/react';
import { HiChartBar, HiLogout, HiMenuAlt2, HiX } from 'react-icons/hi';
import { FaUsers, FaTruck, FaShip } from "react-icons/fa";
import { FaUserGear } from "react-icons/fa6";
import { GiMoneyStack } from "react-icons/gi";
import { MdInventory } from "react-icons/md";
import LogoutConfirm from '../micro/logout-confirm';

interface DashboardLayoutProps {
  children: React.ReactNode;
  pageName: string;
}

export default function DashboardLayout({ children, pageName }: DashboardLayoutProps) {
  const { auth } = usePage<any>().props;
  const user = auth?.user;

  const {url} = usePage()

  // state
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [logout, setLogout] = useState(false)

  const navigation = [
    { name: 'Dashboard Utama', href: '/dashboard', icon: HiChartBar },
    { name: 'Admin Panel', href: '/admin', icon: FaUserGear, show: user?.role === 'admin' },
  ];

  const modulNavigation = [
    { name: 'Kepegawaian', href: '/dashboard/kepegawaian', icon: FaUsers, show: user?.role === 'admin' || user?.departments?.includes('Kepegawaian') },
    { name: 'Keuangan', href: '/dashboard/keuangan', icon: GiMoneyStack, show: user?.role === 'admin' || user?.departments?.includes('Keuangan')  },
    { name: 'Inventaris', href: '/dashboard/inventaris', icon: MdInventory, show: user?.role === 'admin' || user?.departments?.includes('Warehouse')  },
    { name: 'Supply Chain', href: '/dashboard/scm', icon: FaTruck, show: user?.role === 'admin' || user?.departments?.includes('Supplier')  },
    { name: 'Operasional', href: '/dashboard/operasional', icon: FaShip, show: user?.role === 'admin' || user?.departments?.includes('Operasional')  },
  ]

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 flex font-sans antialiased selection:bg-blue-600 selection:text-white">
      
      {/* Overlay Mobile */}
      {sidebarOpen && (
        <div 
          onClick={() => setSidebarOpen(false)} 
          className="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm lg:hidden transition-opacity"
        />
      )}

      {/* SIDEBAR (TEMA BIRU LAUT PREMIUN) */}
      <aside className={`fixed lg:static top-0 left-0 z-50 h-screen w-72 bg-linear-to-b from-blue-900 via-blue-800 to-slate-900 text-white flex flex-col justify-between transition-transform duration-300 ease-in-out ${
        sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
      }`}>
        
        {/* BAGIAN ATAS: Header & Navigasi (Scrollable) */}
        <div className="flex flex-col min-h-0 flex-1">
          {/* Header Branding */}
          <div className="h-15 flex items-center justify-between px-6 border-b border-white/10 shrink-0">
            <div>
              <h1 className="text-lg font-extrabold text-white tracking-wide leading-none">
                PT ALREDHO TEKNIK
              </h1>
            </div>
            <button 
              onClick={() => setSidebarOpen(false)}
              className="lg:hidden text-blue-200 hover:text-white p-1 rounded-lg hover:bg-blue-800/50 cursor-pointer"
            >
              <HiX className="w-6 h-6" />
            </button>
          </div>

          {/* Container Scrollable */}
          <div className="p-3 space-y-4 overflow-y-auto flex-1 no-scrollbar">
            
            <div>
              <div className="px-3 mb-2 text-[10px] font-bold uppercase tracking-wider text-blue-200/60">
                Menu Utama
              </div>
              <nav className="space-y-1">
                {navigation.map((item) => {
                  if (item.show === false) return null;
                  const Icon = item.icon;
                  return (
                    <Link
                      key={item.name}
                      href={item.href}
                      className="flex items-center gap-3.5 px-3.5 py-2.5 text-xs font-semibold rounded-xl transition-all duration-200 group text-blue-100 hover:bg-white/10 hover:text-white"
                    >
                      <Icon className="w-4 h-4 transition-colors text-blue-200 group-hover:text-white" />
                      <span>{item.name}</span>
                    </Link>
                  );
                })}
              </nav>
            </div>

            <div className="border-t border-white/10 my-2" />

            <div>
              <div className="px-3 mb-2 text-[10px] font-bold uppercase tracking-wider text-blue-200/60">
                Modul Sistem
              </div>
              <nav className="space-y-1">
                {modulNavigation.map((item) => {
                  if (item.show === false) return null;
                  const Icon = item.icon;
                  return (
                    <Link
                      key={item.name}
                      href={item.href}
                      className="flex items-center gap-3.5 px-3.5 py-2.5 text-xs font-semibold rounded-xl transition-all duration-200 group text-blue-100 hover:bg-white/10 hover:text-white"
                    >
                      <Icon className="w-4 h-4 transition-colors text-blue-200 group-hover:text-white" />
                      <span>{item.name}</span>
                    </Link>
                  );
                })}
              </nav>
            </div>

          </div>
        </div>

        {/* BAGIAN BAWAH: Sticky Footer (Profil User + Tombol Logout) */}
        <div className="p-4 border-t border-blue-800/50 bg-blue-950/60 shrink-0 space-y-3">
          
          {/* User Profile Card */}
          <Link href={'/dashboard/profile'} className="p-3 bg-white/10 border border-blue-400/20 backdrop-blur-md rounded-xl flex items-center gap-3 shadow-inner">
            <div className="min-w-0 flex-1">
              <p className="text-xs font-bold text-white truncate line-clamp-1">{user?.username || 'Pengguna'}</p>
              <p className="text-[11px] text-blue-200/80 capitalize flex items-center gap-1.5 mt-0.5">
                Role: {user?.role || 'User'}
              </p>
            </div>
          </Link>

          {/* Tombol Logout */}
          <button
            type="button"
            onClick={() => setLogout(true)}
            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 text-xs font-semibold text-white bg-red-600 hover:bg-red-700 rounded-xl transition duration-200 cursor-pointer"
          >
            <HiLogout className="w-4 h-4" />
            <span>Keluar / Logout</span>
          </button>
        </div>
      </aside>

      {/* CONTENT AREA (HALAMAN KONTEN TERANG) */}
      <div className="flex-1 flex flex-col min-w-0 h-screen overflow-y-auto bg-slate-50">
        
        {/* TOPBAR (STANDARISASI HEIGHT h-16, SOLID & ALIGNED) */}
        <header className="h-15 bg-white border-b border-slate-200 sticky top-0 z-30 px-6 flex items-center justify-between shadow-2xs shrink-0">
          <div className="flex items-center gap-3">
            <h2 className="text-sm font-bold text-slate-800 leading-none">
              {pageName ? `Panel ${pageName}` : 'Panel Operasional'}
            </h2>
          </div>

          <button
            onClick={() => setSidebarOpen(true)}
            className="lg:hidden p-2 text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
            aria-label="Buka Menu"
          >
            <HiMenuAlt2 className="w-5 h-5" />
          </button>
        </header>

        {/* MAIN BODY CONTAINER */}
        <main className="p-4 sm:p-6 lg:p-8 flex-1">
          {children}
        </main>
      </div>

      {/* additional components */}
      {/* logout confirm component */}
      <LogoutConfirm 
        isOpen={logout} 
        onClose={() => setLogout(false)} 
      />

    </div>
  );
}