import { PropsWithChildren, useEffect, useRef, useState } from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import {
    Bars3Icon, BellIcon, ChevronDownIcon,
    HomeIcon, CalendarDaysIcon, InboxArrowDownIcon, PaperAirplaneIcon,
    ClipboardDocumentCheckIcon, BanknotesIcon,
    MicrophoneIcon, BuildingOffice2Icon,
    Cog6ToothIcon, Squares2X2Icon, UserGroupIcon, ClockIcon, FolderIcon,
    BookOpenIcon,
} from '@heroicons/react/24/solid';
import { PageProps } from '@/types';
import { useAll, useList } from '@/hooks/useResource';
import { NotificationBell } from '@/Components/ui/NotificationBell';
import { ROLE_AVATAR, ROLE_BADGE } from '@/lib/roleColors';

import { GlobalUploadWidget } from '@/Components/ui/GlobalUploadWidget';
import LoginPanduanModal from '@/Components/Panduan/LoginPanduanModal';
import { useAuth } from '@/hooks/useAuth';

const NAV = [
    { section: 'Utama', items: [
        { href: '/dashboard', label: 'Dashboard', icon: HomeIcon },
        { href: '/panduan', label: 'Panduan & Teknis', icon: BookOpenIcon, menuKey: 'panduan' },
        { href: '/kegiatan', label: 'Data Kegiatan', icon: CalendarDaysIcon, menuKey: 'kegiatan' },
        { href: '/file-manager', label: 'File Manager', icon: FolderIcon, menuKey: 'file_manager' },
    ]},
    { section: 'Surat & Disposisi', items: [
        { href: '/surat-masuk', label: 'Surat Masuk', icon: InboxArrowDownIcon, menuKey: 'surat_masuk' },
        { href: '/surat-keluar', label: 'Surat Keluar', icon: PaperAirplaneIcon, menuKey: 'surat_keluar' },
        { href: '/disposisi', label: 'Disposisi', icon: ClipboardDocumentCheckIcon, menuKey: 'disposisi' },
    ]},
    { section: 'Honor', items: [
        { href: '/honor', label: 'Penugasan & Honor', icon: BanknotesIcon, menuKey: 'honor' },
    ]},
    { section: 'Kolaborasi', items: [
        { href: '/board', label: 'Papan Tugas', icon: Squares2X2Icon, menuKey: 'board' },
    ]},
    { section: 'Master Data', items: [
        { href: '/master/narasumber', label: 'Narasumber', icon: MicrophoneIcon, menuKey: 'narasumber' },
        { href: '/master/klien', label: 'Klien', icon: BuildingOffice2Icon, menuKey: 'klien' },
    ]},
    { section: 'Laporan', items: [
        { href: '/aktivitas', label: 'Riwayat Aktivitas', icon: ClockIcon },
    ]},
];

const ADMIN_ONLY_HREF = '/settings';

// ponytail: page titles not covered by NAV (add here when a new such page appears).
const EXTRA_TITLES: [string, string][] = [
    ['/panduan/create', 'Buat Panduan & Teknis'],
    ['/profile', 'Profil'],
    ['/audit', 'Audit Data'],
    ['/rekap-sdm', 'Rekap SDM & Klien'],
];

function initials(name?: string) {
    if (!name) return '?';
    return name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join('').toUpperCase();
}

export default function AppLayout({ children, title }: PropsWithChildren<{ title?: string }>) {
    const { url, props } = usePage<PageProps>();
    const [mobileOpen, setMobileOpen] = useState(false);
    const [userMenuOpen, setUserMenuOpen] = useState(false);
    const navRef = useRef<HTMLElement>(null);
    const user = props.auth?.user;
    const role = user?.role;

    useEffect(() => {
        const el = navRef.current;
        if (!el) return;

        const saved = sessionStorage.getItem('sidebar-scroll');
        if (saved) el.scrollTop = Number(saved);

        const onScroll = () => sessionStorage.setItem('sidebar-scroll', String(el.scrollTop));
        el.addEventListener('scroll', onScroll);
        return () => el.removeEventListener('scroll', onScroll);
    }, []);

    const { data: belumSelesai } = useList('disposisi-belum-selesai', '/disposisi', { belum_selesai: 1, per_page: 1 });
    const { data: sidebarBadges } = useAll<Record<string, number>>('sidebar-badges', '/sidebar-badges');
    const notifCount = belumSelesai?.total ?? 0;

    const { canView } = useAuth();

    const systemItems = [
        ...(role === 'Admin' || role === 'Superadmin' ? [{ href: ADMIN_ONLY_HREF, label: 'Pengaturan', icon: Cog6ToothIcon }] : []),
    ];

    const nav = NAV.map((group) => {
        let items = group.items as Array<{ href: string; label: string; icon: any; menuKey?: string }>;

        if (group.section === 'Master Data' && (role === 'Superadmin' || canView('users'))) {
            items = [...items, { href: '/users', label: 'Manajemen User', icon: UserGroupIcon, menuKey: 'users' }];
        }

        items = items.filter((i) => {
            if (i.menuKey) {
                return canView(i.menuKey);
            }
            return true;
        });

        return { ...group, items };
    }).filter((group) => group.items.length > 0);

    if (systemItems.length > 0) {
        nav.push({ section: 'Sistem', items: systemItems });
    }

    const activeSection = nav.find((g) => g.items.some((item) => url.startsWith(item.href)));
    const pageTitle = title
        ?? activeSection?.items.find((item) => url.startsWith(item.href))?.label
        ?? EXTRA_TITLES.find(([href]) => url.startsWith(href))?.[1]
        ?? '';

    return (
        <div className="min-h-screen bg-gray-50 flex">
            <Head title={pageTitle} />
            {(mobileOpen || userMenuOpen) && (
                <div
                    className="fixed inset-0 z-20"
                    onClick={() => { setMobileOpen(false); setUserMenuOpen(false); }}
                />
            )}

            <aside
                className={`w-64 shrink-0 bg-white border-r border-gray-200 fixed inset-y-0 left-0 z-30 flex flex-col transition-transform
                    ${mobileOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0`}
            >
                <div className="h-16 shrink-0 flex items-center px-5 border-b border-gray-200">
                    <span className="font-bold text-sky-600 text-base tracking-wide">SAGARA</span>
                </div>
                <nav
                    ref={navRef}
                    className="py-5 pr-1.5 flex-1 overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#d1d5db_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent"
                >
                    {nav.map((group) => (
                        <div key={group.section} className="mb-5">
                            <div className="px-5 text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
                                {group.section}
                            </div>
                            {group.items.map((item) => {
                                const badgeVal = sidebarBadges?.[item.href] ?? 0;
                                return (
                                    <Link
                                        key={item.href}
                                        href={item.href}
                                        onClick={() => setMobileOpen(false)}
                                        className={`flex items-center justify-between pl-5 pr-3.5 py-2.5 text-[15px] rounded-l-md transition-colors ${
                                            url.startsWith(item.href)
                                                ? 'text-sky-600 bg-sky-50 font-medium border-r-2 border-sky-600'
                                                : 'text-gray-600 hover:bg-gray-50'
                                        }`}
                                    >
                                        <div className="flex items-center gap-3">
                                            <item.icon className="w-5 h-5 shrink-0" />
                                            <span>{item.label}</span>
                                        </div>
                                        {badgeVal > 0 && (
                                            <span className={`px-2 py-0.5 text-[11px] font-bold rounded-full leading-none shrink-0 ${
                                                item.href === '/disposisi' || item.href === '/surat-masuk'
                                                    ? 'bg-rose-100 text-rose-700 border border-rose-200'
                                                    : item.href === '/panduan'
                                                    ? 'bg-sky-100 text-sky-700 border border-sky-200'
                                                    : 'bg-amber-100 text-amber-800 border border-amber-200'
                                            }`}>
                                                {badgeVal > 99 ? '99+' : badgeVal}
                                            </span>
                                        )}
                                    </Link>
                                );
                            })}
                        </div>
                    ))}
                </nav>
            </aside>

            <div className="flex-1 md:ml-64 flex flex-col min-w-0">
                <header className="h-16 sticky top-0 z-40 bg-white/85 backdrop-blur-md border-b border-gray-200/80 shadow-sm flex items-center justify-between px-4 md:px-8">
                    <div className="flex items-center gap-3 min-w-0">
                        <button
                            onClick={() => setMobileOpen((v) => !v)}
                            className="md:hidden p-2 rounded-lg text-gray-500 hover:bg-gray-100"
                        >
                            <Bars3Icon className="w-5 h-5" />
                        </button>
                        <div className="min-w-0">
                            {activeSection && (
                                <div className="text-[11px] text-gray-400 leading-none mb-0.5">{activeSection.section}</div>
                            )}
                            <h2 className="font-semibold text-gray-900 text-base truncate leading-tight">{pageTitle}</h2>
                        </div>
                    </div>

                    <div className="flex items-center gap-2 shrink-0">
                        <NotificationBell />

                        <div className="w-px h-6 bg-gray-200 mx-1" />

                        <div className="relative">
                            <button
                                onClick={() => setUserMenuOpen((v) => !v)}
                                className="flex items-center gap-2 pl-1 pr-2 py-1 rounded-lg hover:bg-gray-100"
                            >
                                <span className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-semibold shrink-0 ${ROLE_AVATAR[role ?? ''] ?? 'bg-gray-500'}`}>
                                    {initials(user?.name)}
                                </span>
                                <span className="hidden sm:flex flex-col items-start leading-tight">
                                    <span className="text-sm font-medium text-gray-800 max-w-32 truncate">{user?.name}</span>
                                    {role && (
                                        <span className={`text-[10px] font-medium px-1.5 rounded-full ${ROLE_BADGE[role] ?? 'bg-gray-100 text-gray-600'}`}>
                                            {role}
                                        </span>
                                    )}
                                </span>
                                <ChevronDownIcon className={`w-3.5 h-3.5 text-gray-400 transition-transform hidden sm:block ${userMenuOpen ? 'rotate-180' : ''}`} />
                            </button>

                            {userMenuOpen && (
                                <div className="absolute right-0 top-full mt-2 w-48 bg-white border border-gray-200 rounded-xl shadow-lg py-1.5 z-30">
                                    <Link
                                        href="/profile"
                                        onClick={() => setUserMenuOpen(false)}
                                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                                    >
                                        Profil Saya
                                    </Link>
                                    <div className="my-1 border-t border-gray-100" />
                                    <Link
                                        href="/logout"
                                        method="post"
                                        as="button"
                                        className="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                                    >
                                        Keluar
                                    </Link>
                                </div>
                            )}
                        </div>
                    </div>
                </header>

                <main className="flex-1 p-4 md:p-8 overflow-x-auto">{children}</main>
            </div>
            <GlobalUploadWidget />
            <LoginPanduanModal />
        </div>
    );
}