import React, { useState, useEffect, useRef } from 'react';
import { Link, usePage } from '@inertiajs/react';
import { HeartHandshake, Send, Menu, X, ShieldCheck } from 'lucide-react';

interface PortalLayoutProps {
    children: React.ReactNode;
    title?: string;
}

export default function PortalLayout({ children }: PortalLayoutProps) {
    const { url } = usePage();
    const [open, setOpen] = useState(false);

    // Scroll-aware navbar
    const [scrolled, setScrolled] = useState(false);
    const [hidden, setHidden] = useState(false);
    const lastY = useRef(0);

    useEffect(() => {
        const onScroll = () => {
            const y = window.scrollY;
            setScrolled(y > 8);
            setHidden(y > lastY.current && y > 80);
            lastY.current = y;
        };
        window.addEventListener('scroll', onScroll, { passive: true });
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    const navItems = [
        { label: 'Beranda', href: '/', active: url === '/' },
        {
            label: 'Alumni',
            href: '/alumni',
            active:
                url.startsWith('/alumni') &&
                !url.startsWith('/alumni-bergerak'),
        },
        {
            label: 'Berita & Media',
            href: '/berita',
            active: url.startsWith('/berita'),
        },
        {
            label: 'Alumni Bergerak',
            href: '/alumni-bergerak',
            active: url.startsWith('/alumni-bergerak'),
        },
        {
            label: 'Kontak',
            href: '/contact',
            active: url.startsWith('/contact'),
        },
    ];

    return (
        <div
            className="flex min-h-screen flex-col bg-canvas text-ink"
            style={{ fontFamily: "'Inter', sans-serif" }}
        >
            {/* Top bar — maroon thin strip */}
            <div className="bg-brand px-4 py-2 text-xs text-white/70">
                <div className="mx-auto flex max-w-7xl items-center justify-between gap-2">
                    <span className="hidden sm:block">
                        Portal Resmi Alumni, Fakultas Teknik Universitas
                        Majalengka
                    </span>
                    <div className="ml-auto flex items-center gap-4">
                        <Link
                            href="/kirim-kegiatan"
                            className="flex items-center gap-1 transition-colors hover:text-white"
                        >
                            <Send className="h-3 w-3" /> Kirim Berita & Kegiatan
                        </Link>
                        <span className="text-white/30">|</span>
                        <Link
                            href="/admin/dashboard"
                            className="flex items-center gap-1 transition-colors hover:text-white"
                        >
                            <ShieldCheck className="h-3 w-3" /> Login Admin
                        </Link>
                    </div>
                </div>
            </div>

            {/* Navbar */}
            <header
                className={[
                    'sticky top-0 z-50 border-b border-rule transition-all duration-300',
                    scrolled
                        ? 'bg-white/90 backdrop-blur-md shadow-md'
                        : 'bg-white shadow-sm',
                    hidden ? '-translate-y-full' : 'translate-y-0',
                ].join(' ')}
            >
                <div className="mx-auto max-w-7xl px-6 lg:px-8">
                    <div className="flex h-16 items-center justify-between">
                        {/* Wordmark */}
                        <Link
                            href="/"
                            className="group flex items-center gap-3"
                        >
                            <img
                                src="/logo.png"
                                alt="Logo Fakultas Teknik Universitas Majalengka"
                                width={40}
                                height={40}
                                className="h-10 w-10 object-contain transition-transform duration-200 select-none group-hover:scale-110"
                                fetchPriority="high"
                            />
                            <div className="leading-tight">
                                <span className="block text-[10px] font-bold tracking-widest text-ink-muted uppercase">
                                    Fakultas Teknik UNMA
                                </span>
                                <span className="block text-sm font-bold tracking-tight text-ink">
                                    Portal Alumni
                                </span>
                            </div>
                        </Link>

                        {/* Desktop nav */}
                        <nav
                            className="hidden items-center gap-0.5 lg:flex"
                            aria-label="Navigasi utama"
                        >
                            {navItems.map((item) => (
                                <Link
                                    key={item.href}
                                    href={item.href}
                                    className={[
                                        'relative px-4 py-2 text-sm font-medium transition-colors duration-200 tap-target flex items-center group/nav',
                                        item.active
                                            ? 'text-brand'
                                            : 'text-ink-muted hover:text-ink',
                                    ].join(' ')}
                                >
                                    {item.label}
                                    {/* Animated underline */}
                                    <span
                                        className={[
                                            'absolute bottom-0 left-3 right-3 h-0.5 rounded-full bg-brand transition-all duration-250 origin-left',
                                            item.active
                                                ? 'scale-x-100'
                                                : 'scale-x-0 group-hover/nav:scale-x-100',
                                        ].join(' ')}
                                    />
                                </Link>
                            ))}
                        </nav>

                        {/* CTA */}
                        <div className="hidden items-center gap-3 lg:flex">
                            <Link
                                href="/alumni-bergerak"
                                className="tap-target flex items-center gap-2 bg-brand px-5 py-2 text-sm font-semibold text-white transition-all duration-200 hover:bg-[#6A1A24] hover:shadow-md active:scale-[0.97]"
                            >
                                <HeartHandshake className="h-4 w-4" />
                                Donasi
                            </Link>
                        </div>

                        {/* Mobile hamburger */}
                        <button
                            className="tap-target p-2 text-ink-muted hover:text-ink lg:hidden"
                            onClick={() => setOpen(!open)}
                            aria-label="Buka menu navigasi"
                            aria-expanded={open}
                        >
                            {open ? (
                                <X className="h-5 w-5" />
                            ) : (
                                <Menu className="h-5 w-5" />
                            )}
                        </button>
                    </div>
                </div>

                {/* Mobile nav — fixed overlay, does NOT push page content */}
                {open && (
                    <>
                        {/* Backdrop — tap to close */}
                        <div
                            className="fixed inset-0 top-16 z-40 bg-black/20 lg:hidden"
                            onClick={() => setOpen(false)}
                            aria-hidden="true"
                        />
                        {/* Drawer */}
                        <div className="fixed top-16 right-0 left-0 z-50 animate-in space-y-1 border-t border-rule bg-white px-6 py-4 shadow-lg duration-200 slide-in-from-top-2 lg:hidden">
                            {navItems.map((item) => (
                                <Link
                                    key={item.href}
                                    href={item.href}
                                    onClick={() => setOpen(false)}
                                    className={[
                                        'flex items-center gap-3 px-3 py-3 text-sm font-medium rounded-sm tap-target',
                                        item.active
                                            ? 'bg-brand-light text-brand'
                                            : 'text-ink-muted hover:text-ink hover:bg-gray-50',
                                    ].join(' ')}
                                >
                                    {item.label}
                                </Link>
                            ))}
                            <div className="border-t border-rule pt-3">
                                <Link
                                    href="/alumni-bergerak"
                                    onClick={() => setOpen(false)}
                                    className="tap-target block w-full bg-brand py-3 text-center text-sm font-semibold text-white"
                                >
                                    Alumni Bergerak, Donasi Sekarang
                                </Link>
                            </div>
                        </div>
                    </>
                )}
            </header>

            {/* Page content */}
            <main className="flex-1">{children}</main>

            {/* Footer */}
            <footer className="bg-[#1A0508] text-white/60">
                <div className="mx-auto max-w-7xl px-6 pt-14 pb-8 lg:px-8">
                    <div className="grid grid-cols-1 gap-10 border-b border-white/10 pb-10 md:grid-cols-2 lg:grid-cols-4">
                        {/* Brand */}
                        <div className="space-y-3">
                            <div className="flex items-center gap-3">
                                <img
                                    src="/logo.png"
                                    alt="Logo Fakultas Teknik Universitas Majalengka"
                                    width={36}
                                    height={36}
                                    className="h-9 w-9 object-contain"
                                    loading="lazy"
                                />
                                <div>
                                    <div className="text-sm font-semibold text-white">
                                        Fakultas Teknik
                                    </div>
                                    <div className="text-xs text-white/40">
                                        Universitas Majalengka
                                    </div>
                                </div>
                            </div>
                            <p className="text-xs leading-relaxed">
                                Wadah silaturahmi dan jejaring alumni Fakultas
                                Teknik UNMA, meliputi direktori lulusan, SKPI,
                                dan program Alumni Bergerak.
                            </p>
                        </div>

                        {/* Prodi */}
                        <div>
                            <h4 className="mb-4 text-xs font-bold tracking-widest text-white/90 uppercase">
                                Program Studi
                            </h4>
                            <ul className="space-y-2 text-xs">
                                {[
                                    'Informatika',
                                    'Teknik Mesin',
                                    'Teknik Sipil',
                                    'Teknik Industri',
                                ].map((p) => (
                                    <li key={p}>
                                        <Link
                                            href={`/alumni?prodi=${p}`}
                                            className="transition-colors hover:text-white"
                                        >
                                            {p}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Nav */}
                        <div>
                            <h4 className="mb-4 text-xs font-bold tracking-widest text-white/90 uppercase">
                                Portal
                            </h4>
                            <ul className="space-y-2 text-xs">
                                {[
                                    {
                                        href: '/alumni',
                                        label: 'Direktori Alumni',
                                    },
                                    { href: '/alumni', label: 'Profil & SKPI Alumni' },
                                    {
                                        href: '/alumni-bergerak',
                                        label: 'Alumni Bergerak',
                                    },
                                    {
                                        href: '/kirim-kegiatan',
                                        label: 'Kirim Portofolio',
                                    },
                                    {
                                        href: '/berita',
                                        label: 'Berita & Galeri',
                                    },
                                ].map((l) => (
                                    <li key={l.href}>
                                        <Link
                                            href={l.href}
                                            className="transition-colors hover:text-white"
                                        >
                                            {l.label}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Kontak */}
                        <div>
                            <h4 className="mb-4 text-xs font-bold tracking-widest text-white/90 uppercase">
                                Sekretariat
                            </h4>
                            <p className="text-xs leading-relaxed">
                                Jl. K.H. Abdul Halim No. 103
                                <br />
                                Majalengka, Jawa Barat 45418
                            </p>
                            <p className="mt-3 space-y-1 text-xs">
                                <span className="block">teknik@unma.ac.id</span>
                                <span className="block">(0233) 281496</span>
                            </p>
                        </div>
                    </div>

                    <div className="flex flex-col items-center justify-between gap-3 pt-6 text-xs text-white/30 sm:flex-row">
                        <span>
                            © {new Date().getFullYear()} Portal Alumni FT UNMA
                        </span>
                        <div className="flex items-center gap-4">
                            <Link
                                href="/contact"
                                className="transition-colors hover:text-white/60"
                            >
                                Hubungi Kami
                            </Link>
                            <Link
                                href="/admin/dashboard"
                                className="transition-colors hover:text-white/60"
                            >
                                Login Admin
                            </Link>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}