import React from 'react';
import { Link, Outlet, useNavigate, NavLink, useLocation } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { logout } from '../features/auth/authSlice';
import { FaSignOutAlt, FaUserCircle } from 'react-icons/fa';
import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon';
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';

import routes from '../config/sidebarRoutes';
import SidebarSubmenu from '../components/SidebarSubmenu';


export default function MainLayout() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const location = useLocation(); // Hook สำหรับตรวจสอบ Path ปัจจุบัน

    // ดึงข้อมูลผู้ใช้และ Role จาก Redux Store
    const user = useSelector(state => state.auth.user);
    const role = useSelector(state => state.auth.role);

    const handleLogout = () => {
        dispatch(logout());
        navigate('/login', { replace: true });
    };

    // Logic: ฟังก์ชันตรวจสอบสิทธิ์ (RBAC)
    const canAccess = (requiredRole) => {
        if (role === 'admin') return true;
        if (!requiredRole) return true;

        // ตรวจสอบ Role ของผู้ใช้กับ Role ที่จำเป็น
        const allowedRoles = Array.isArray(requiredRole) ? requiredRole : [requiredRole];
        return allowedRoles.includes(role);
    };

    // ฟังก์ชันปิด Sidebar ใน Mobile
    const closeMobileSidebar = () => {
        document.getElementById('my-drawer-2').checked = false;
    }

    // ฟังก์ชันสำหรับดึงชื่อเมนูตาม Path ปัจจุบัน (สำหรับ Header)
    const getPageTitle = (pathname) => {
        let title = "DDO Console";
        routes.forEach((route) => {
            if (route.path && route.path === pathname) {
                title = route.name;
            } else if (route.submenu) {
                route.submenu.forEach((submenuRoute) => {
                    if (submenuRoute.path === pathname) {
                        title = submenuRoute.name;
                    }
                });
            }
        });
        return title;
    };

    const currentTitle = getPageTitle(location.pathname);


    return (
        <div className="drawer lg:drawer-open">
            {/* 1. Drawer Toggle */}
            <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />

            {/* 2. Main Content Area */}
            <div className="drawer-content flex flex-col bg-base-100">
                {/* Header/Navbar */}
                <div className="navbar bg-base-100 shadow-md sticky top-0 z-10">
                    <div className="flex-none lg:hidden">
                        {/* Mobile Toggle Button (ใช้ Heroicon) */}
                        <label htmlFor="my-drawer-2" className="btn btn-square btn-ghost">
                            <Bars3Icon className="h-5 w-5" />
                        </label>
                    </div>
                    {/* แสดงชื่อหน้าปัจจุบัน */}
                    <div className="flex-1 px-2 mx-2 text-xl font-bold text-primary">
                        {currentTitle}
                    </div>

                    {/* User Profile/Logout Dropdown */}
                    <div className="flex-none">
                        <div className="dropdown dropdown-end">
                            <div tabIndex={0} role="button" className="btn btn-ghost hover:bg-base-300 rounded-lg">
                                <FaUserCircle className="h-5 w-5 mr-2" />
                                {user ? user.username : 'ผู้ใช้งาน'}
                                <span className="badge badge-sm badge-primary ml-2">{role}</span>
                            </div>
                            <ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 z-[1]">
                                <li>
                                    <Link to="/dashboard/profile" className="hover:bg-base-200">
                                        <FaUserCircle /> โปรไฟล์
                                    </Link>
                                </li>
                                <div className="divider my-0"></div>
                                <li>
                                    <button onClick={handleLogout} className="text-error hover:bg-error/10 hover:text-error">
                                        <FaSignOutAlt /> ออกจากระบบ
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                {/* Page Content (Outlet) */}
                <main className="p-4 md:p-8 flex-grow">
                    <Outlet />
                </main>

                {/* Footer (Optional) */}
                <footer className="footer footer-center p-4 bg-base-100 text-base-content border-t border-base-content/10">
                    <aside>
                        <p>Copyright © {new Date().getFullYear()} - Data Decision Operations Console</p>
                    </aside>
                </footer>
            </div>

            {/* 3. Sidebar (ปรับโครงสร้างใหม่) */}
            <div className="drawer-side z-20 border-r border-base-content/10">
                <label htmlFor="my-drawer-2" aria-label="close sidebar" className="drawer-overlay"></label>
                <ul className="menu pt-2 w-64 min-h-full bg-base-100 text-base-content">

                    {/* ปุ่มปิด Sidebar สำหรับ Mobile */}
                    <button
                        className="btn btn-ghost btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden"
                        onClick={closeMobileSidebar}
                    >
                        <XMarkIcon className="h-5 inline-block w-5" />
                    </button>

                    {/* ส่วนโลโก้ DDO Console */}
                    <li className="mb-4 font-semibold text-xl">
                        <Link to={'/dashboard'} className="text-primary">
                            <img className="mask mask-squircle w-10" src="/logo192.png" alt="DDO Console Logo"/>
                            DDO Console
                        </Link>
                    </li>

                    {/* การวนลูปเมนูจาก sidebarRoutes.jsx */}
                    <li className="menu-title">เมนูหลัก</li>
                    {routes.map((route, k) => {
                        // 1. ตรวจสอบสิทธิ์เมนูหลัก
                        if (!canAccess(route.requiredRole)) return null;

                        return (
                            <li key={k} >
                                {route.submenu ?
                                    // 2. ถ้ามี Submenu ใช้ SidebarSubmenu Component
                                    <SidebarSubmenu
                                        {...route}
                                        closeMobileSidebar={closeMobileSidebar} // ส่งฟังก์ชันปิดไปให้ Component ย่อย
                                    /> :
                                    (
                                        // 3. ถ้าไม่มี Submenu ใช้ NavLink ธรรมดา
                                        <NavLink
                                            end
                                            to={route.path}
                                            onClick={closeMobileSidebar}
                                            className={({ isActive }) =>
                                                `text-base ${isActive ? 'bg-base-200 text-primary font-semibold' : 'hover:bg-base-400'}`
                                            }
                                        >
                                            {route.icon} {route.name}
                                        </NavLink>
                                    )
                                }
                            </li>
                        );
                    })}
                </ul>
            </div>
        </div>
    );
}