import React, { useState } from 'react';
import { Link, usePage, router } from '@inertiajs/react';
import { HiChartBar, HiMenuAlt2, HiX, HiLogout, HiUserGroup, HiBriefcase } from 'react-icons/hi';
import { LuLogs } from "react-icons/lu";
import LogoutConfirm from '../micro/logout-confirm';
import { FaTruck } from 'react-icons/fa';

interface OperasionalLayoutProps {
  children: React.ReactNode;
  pageName?: string;
}

export default function OperasionalLayout({ children, pageName = 'Operasional' }: OperasionalLayoutProps) {
  const { url, props } = usePage<any>();
  const user = props.auth?.user;

  // State
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [showLogoutModal, setShowLogoutModal] = useState(false)

  // Navigasi Internal Modul Operasional
  const navigation = [
    { name: 'Overview', href: '/dashboard/operasional', icon: HiChartBar },
    { name: 'Proyek', href: '/dashboard/operasional/projects', icon: HiBriefcase },
    { name: 'Catatan Operasional', href: '/dashboard/operasional/logs', icon: LuLogs, show: user?.role === 'admin' || user?.departments_head?.includes('Operasional') },
  ];

  return (
    <div className="min-h-screen bg-slate-50 flex text-slate-800 font-sans antialiased">
      
      {/* OVERLAY MOBILE */}
      {sidebarOpen && (
        <div
          onClick={() => setSidebarOpen(false)}
          className="fixed inset-0 z-40 bg-slate-900/40 backdrop-blur-xs lg:hidden transition-opacity"
        />
      )}

      {/* SIDEBAR CONTAINER */}
      <aside
        className={`fixed lg:static inset-y-0 left-0 z-50 w-64 bg-white border-r border-slate-200/80 flex flex-col justify-between transition-transform duration-200 ease-in-out ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
        }`}
      >
        {/* UPPER SIDEBAR */}
        <div className="flex flex-col min-h-0 flex-1">
          
          {/* Brand Header Modul */}
          <div className="h-16 px-6 border-b border-slate-100 flex items-center justify-between shrink-0">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-blue-50 text-blue-600 rounded-xl border border-blue-200/60">
                <HiBriefcase className="w-5 h-5" />
              </div>
              <div>
                <h1 className="text-sm font-bold text-slate-800 leading-tight">Modul Operasional</h1>
                <p className="text-[10px] text-slate-400 font-medium">Manajemen Operasional</p>
              </div>
            </div>

            <button
              onClick={() => setSidebarOpen(false)}
              className="lg:hidden p-1.5 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100 transition"
            >
              <HiX className="w-5 h-5" />
            </button>
          </div>

          {/* Navigation Links */}
          <nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto no-scrollbar">
            <div className="px-3 pb-2">
              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
                Menu Utama
              </p>
            </div>

            {navigation.map((item) => {
              if (item.show == false) return null;
              const Icon = item.icon;

              const isActive = item.href === '/dashboard/operasional' 
                ? url === '/dashboard/operasional' 
                : url.startsWith(item.href);

              return (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-semibold transition-all ${
                    isActive
                      ? 'bg-slate-900 text-white shadow-xs'
                      : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900'
                  }`}
                >
                  <Icon className={`w-4 h-4 ${isActive ? 'text-white' : 'text-slate-400'}`} />
                  <span>{item.name}</span>
                </Link>
              );
            })}
          </nav>
        </div>

        {/* LOWER SIDEBAR (FOOTER) */}
        <div className="p-4 border-t border-slate-100 bg-slate-50/50 space-y-2 shrink-0">
          {/* Action Navigation */}
          <div className="space-y-1 pt-1">
            
            {/* Kembali ke Dashboard Operasional */}
            <Link
              href="/dashboard"
              className="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-semibold text-gray-00 bg-white hover:bg-gray-800 hover:text-white border border-gray-700/60 rounded-xl transition duration-150"
            >
              <span>Menu Operasional</span>
            </Link>

            {/* Logout */}
            <button
              type="button"
              onClick={() => setShowLogoutModal(true)}
              className="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-semibold text-white bg-red-600 hover:bg-red-700 active:bg-red-800 rounded-xl transition duration-150 cursor-pointer shadow-xs"
            >
              <HiLogout className="w-4 h-4" />
              <span>Keluar Sistem</span>
            </button>

          </div>
        </div>

      </aside>

      {/* CONTENT AREA */}
      <div className="flex-1 flex flex-col min-w-0 h-screen overflow-y-auto">
        
        {/* TOPBAR KHUSUS MOBILE (lg:hidden) */}
        <header className="lg:hidden h-16 bg-white border-b border-slate-200/80 sticky top-0 z-30 px-6 flex items-center justify-between shadow-2xs shrink-0">
          <div className="flex items-center gap-2.5">
            <div className="p-1.5 bg-emerald-50 text-emerald-600 rounded-lg">
              <HiUserGroup className="w-5 h-5" />
            </div>
            <h2 className="text-sm font-bold text-slate-800 leading-tight">
              {pageName}
            </h2>
          </div>

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

        {/* MAIN CONTENT BODY */}
        <main className="p-4 sm:p-6 lg:p-8 flex-1 max-w-7xl w-full mx-auto">
          {children}
        </main>

      </div>

      {/* MODAL CONFIRM LOGOUT */}
      <LogoutConfirm
        isOpen={showLogoutModal} 
        onClose={() => setShowLogoutModal(false)} 
      />

    </div>
  );
}