import React, { useState, useEffect, useRef } from 'react';
import { cn } from './util/cn';

// Define interfaces for the components
interface DropdownItem {
    name: string;
    href?: string;
}

interface DropdownMenuProps {
    items: DropdownItem[];
    isVisible: boolean;
    widthClass: string;
    leftClass: string;
}

interface NavItemWithDropdownProps {
    title: string;
    items: DropdownItem[];
    widthClass: string;
    leftClass: string;
}

interface TickerItem {
    id: number;
    text: string;
    href: string;
    highlight?: string;
    highlightClass: string;
}

// Helper component for dropdown menus
const DropdownMenu: React.FC<DropdownMenuProps> = ({ items, isVisible, widthClass, leftClass }) => (
    <div
        className={cn(
            'absolute top-full box-content',
            leftClass,
            widthClass,
            'pt-3 pr-[3px] pb-[10px] pl-[17px]',
            'bg-custom-blue-dark z-4002',
            isVisible ? 'block' : 'hidden',
            'transition-opacity duration-150 ease-in-out',
            isVisible ? 'opacity-100' : 'opacity-0'
        )}
    >
        <span className="absolute left-0 top-0 w-[15px] h-[15px] bg-sp-img bg-[-96px_0px] z-10"></span>
        <ul className="list-none">
            {items.map((item) => (
                <li key={item.name} className="relative">
                    <a
                        href={item.href || '#'}
                        className="block text-white text-xs font-normal leading-6 tracking-0.025em text-shadow-blue-dark hover:text-custom-yellow"
                    >
                        {item.name}
                    </a>
                </li>
            ))}
        </ul>
    </div>
);

// Helper component for Nav Items with Dropdowns
const NavItemWithDropdown: React.FC<NavItemWithDropdownProps> = ({ title, items, widthClass, leftClass }) => {
    const [isDropdownVisible, setIsDropdownVisible] = useState(false);
    const timeoutRef = useRef<number | null>(null);

    const showDropdown = () => {
        if (timeoutRef.current) clearTimeout(timeoutRef.current);
        setIsDropdownVisible(true);
    };

    const hideDropdown = () => {
        timeoutRef.current = setTimeout(() => {
            setIsDropdownVisible(false);
        }, 150);
    };

    return (
        <li
            className={cn(
                'relative float-left ml-5'
            )}
            onMouseEnter={showDropdown}
            onMouseLeave={hideDropdown}
        >
            <a href="#" className="text-white text-sm font-bold leading-11 tracking-0.025em text-shadow-blue-dark">
                {title}
            </a>
            {title === '갤러리' && <span className="block w-[77px] h-[12px] absolute left-0 bottom-0"></span>}
            <DropdownMenu
                items={items}
                isVisible={isDropdownVisible}
                widthClass={widthClass}
                leftClass={leftClass}
            />
        </li>
    );
};

// Helper component for More Button Dropdown
const MoreButtonDropdown: React.FC<Omit<NavItemWithDropdownProps, 'title'>> = ({ items, widthClass, leftClass }) => {
    const [isDropdownVisible, setIsDropdownVisible] = useState(false);
    const timeoutRef = useRef<number | null>(null);

    const showDropdown = () => {
        if (timeoutRef.current) clearTimeout(timeoutRef.current);
        setIsDropdownVisible(true);
    };

    const hideDropdown = () => {
        timeoutRef.current = setTimeout(() => {
            setIsDropdownVisible(false);
        }, 150);
    };

    return (
        <li
            className="relative float-left ml-5"
            onMouseEnter={showDropdown}
            onMouseLeave={hideDropdown}
        >
            <button
                type="button"
                className="text-white text-sm font-bold leading-11 tracking-0.025em cursor-pointer align-middle bg-transparent border-none"
                aria-haspopup="true"
                aria-expanded={isDropdownVisible}
            >
                더보기
                <span className="sr-only">더보기</span>
            </button>
            <DropdownMenu
                items={items}
                isVisible={isDropdownVisible}
                widthClass={widthClass}
                leftClass={leftClass}
            />
        </li>
    );
};

// Main Ticker component
const InfoTicker: React.FC = () => {
    const tickerItems: TickerItem[] = [
        { id: 1, text: '디시 로터리 응모', href: '#', highlightClass: '' },
        { id: 2, text: '어제 %HIGHLIGHT%개 게시글 등록', href: '#', highlight: '911,981', highlightClass: 'text-custom-yellow-light' },
        { id: 3, text: '어제 %HIGHLIGHT%개 댓글 등록', href: '#', highlight: '2,527,905', highlightClass: 'text-custom-cyan' },
        { id: 4, text: '총 갤러리 수 %HIGHLIGHT%개', href: '#', highlight: '80,516', highlightClass: 'text-custom-pink' },
    ];

    const [currentItemIndex, setCurrentItemIndex] = useState(0);
    const [animating, setAnimating] = useState(false);

    useEffect(() => {
        const intervalId = setInterval(() => {
            setAnimating(true);

            const animTimeout = setTimeout(() => {
                setAnimating(false);
                setCurrentItemIndex((prevIndex) => (prevIndex + 1) % tickerItems.length);
            }, 500); // Animation duration

            return () => clearTimeout(animTimeout);
        }, 3000);

        return () => clearInterval(intervalId);
    }, [tickerItems.length]);

    const currentItem = tickerItems[currentItemIndex];
    const nextItemIndex = (currentItemIndex + 1) % tickerItems.length;
    const nextItem = tickerItems[nextItemIndex];

    const renderTickerItem = (item: TickerItem) => {
        const parts = item.text.split('%HIGHLIGHT%');
        return (
            <a href={item.href} className="text-white text-sm">
                {parts[0]}
                {item.highlight && (
                    <em className={cn(`not-italic font-bold tracking-0.7px`, item.highlightClass)}>
                        {` ${item.highlight} `}
                    </em>
                )}
                {parts[1]}
            </a>
        );
    };

    return (
        <div className="w-[306px] h-11 text-center text-sm text-white leading-11 overflow-hidden">
            <div className="relative w-full h-full box-border px-[6.5px]">
                <div className="h-11 flex items-center justify-center bg-custom-blue-hover" key={currentItem.id}>
                    {renderTickerItem(currentItem)}
                </div>
                <div
                    className={cn(
                        "transition-transform duration-500 ease-in z-10",
                        animating ? "-translate-y-full" : ""
                    )}
                    key={nextItem.id}
                >
                    <div className="h-11 flex items-center justify-center bg-custom-blue-hover">
                        {renderTickerItem(nextItem)}
                    </div>
                </div>
            </div>
        </div>
    );
};

// Main Navigation Bar Component
export function GlobalNavigationBar(): JSX.Element {
    const galleryItems: DropdownItem[] = [
        { name: '게임', href: '#' }, { name: '연예/방송', href: '#' }, { name: '스포츠', href: '#' },
        { name: '교육/금융/IT', href: '#' }, { name: '여행/음식/생물', href: '#' }, { name: '취미/생활', href: '#' },
    ];

    const moreItems: DropdownItem[] = [
        { name: '디시뉴스', href: '#' }, { name: '디시게임', href: '#' }, { name: '디시위키', href: '#' },
        { name: '이벤트', href: '#' }, { name: '디시콘', href: '#' },
    ];

    return (
        <div className={cn("bg-custom-blue-hover relative min-w-[1160px] border border-custom-blue-hover")}>
            <nav className="w-[1160px] h-11 mx-auto flex justify-between items-center">
                <h2 className="sr-only">GNB</h2>

                <ul className="list-none m-0 p-0 flex items-center">
                    <NavItemWithDropdown
                        title="갤러리"
                        items={galleryItems}
                        widthClass="w-[104px]"
                        leftClass="left-0"
                    />
                    <li className="relative float-left ml-5">
                        <a href="#" className="text-custom-yellow text-sm font-bold leading-11 tracking-0.025em text-shadow-blue-dark">
                            마이너갤
                        </a>
                    </li>
                    <li className="relative float-left ml-5">
                        <a href="#" className="text-white text-sm font-bold leading-11 tracking-0.025em text-shadow-blue-dark">
                            미니갤
                        </a>
                    </li>
                    <li className="relative float-left ml-5">
                        <a href="#" className="text-white text-sm font-bold leading-11 tracking-0.025em text-shadow-blue-dark">
                            인물갤
                        </a>
                    </li>
                    <li className="relative float-left ml-5">
                        <a href="#" className="text-white text-sm font-bold leading-11 tracking-0.025em text-shadow-blue-dark">
                            갤로그
                        </a>
                    </li>
                    <li className="relative float-left ml-5">
                        <a href="#" className="text-white text-sm font-bold leading-11 tracking-0.025em text-shadow-blue-dark">
                            디시트렌드
                        </a>
                    </li>
                    <MoreButtonDropdown
                        items={moreItems}
                        widthClass="w-[67px]"
                        leftClass="left-[-7px]"
                    />
                </ul>

                <InfoTicker />
            </nav>
        </div>
    );
}

export function Header({
    isMinorGallery = true, // Default value for isMinorGallery
}: {
    isMinorGallery?: boolean;
}) {
    const [isNightAlertVisible, setIsNightAlertVisible] = useState(true);
    const logo_img = "/dcin_logo.png"; // Hardcoded based on original script
    const minor_gallery_img = "/tit_mgallery.png"; // Hardcoded based on original script

    return (
        <header className="bg-transparent">
            <div className="relative w-[1160px] h-[105px] mx-auto bg-transparent">
                {/* Logo */}
                <h1 className="overflow-hidden absolute left-0 top-[40px] text-center bg-transparent">
                    {/* Assuming two logo images or variations were intended */}
                    <a href="/" className="text-custom-gray-dark float-left">
                        <img src={logo_img} alt="DCInside Logo" className="bg-transparent" />
                    </a>
                    {isMinorGallery && (
                        <a href="/" className="text-custom-gray-dark float-left">
                            <img src={minor_gallery_img} alt="DCInside Logo Alt" className="bg-transparent" />
                        </a>
                    )}
                </h1>

                {/* Search Bar */}
                <div className="absolute left-1/2 top-[37px] -ml-[182px] bg-transparent">
                    <h2 className="sr-only">갤러리 검색</h2> {/* Replaced complex styling with sr-only */}
                    <form action="/search" method="get" className="bg-transparent"> {/* Added form action/method placeholders */}
                        <fieldset className="bg-transparent">
                            <legend className="sr-only">통합검색</legend> {/* Replaced complex styling with sr-only */}
                            <div className="bg-custom-blue-hover w-[364px] h-[46px]">
                                <div className="bg-white float-left w-[315px] mt-1 ml-1">
                                    <input
                                        type="text"
                                        name="keyword" // Added name attribute
                                        placeholder="갤러리 & 통합 검색" // Added placeholder
                                        className="align-middle text-sm font-apple-dotum w-[297px] h-[38px] px-[9px] bg-transparent text-custom-gray-dark font-bold border-none outline-none"
                                    />
                                </div>
                                <button
                                    type="submit"
                                    className="cursor-pointer align-middle text-xs font-apple-dotum bg-transparent bg-[url('https://nstatic.dcinside.com/dc/w/images/sp/sp_img.png?1112')] bg-no-repeat float-left w-[45px] h-[44px] bg-[0px_-89px]"
                                    aria-label="검색" // Added aria-label for accessibility
                                >
                                    <span className="sr-only">검색</span> {/* Replaced complex styling with sr-only */}
                                </button>
                            </div>
                            {/* Search Suggestions Dropdown (Initially Hidden) */}
                            <div className="bg-white absolute w-full box-border border-2 border-custom-blue-dark z-[4001] left-0 top-[46px] hidden">
                                {/* Dropdown content would go here */}
                            </div>
                        </fieldset>
                    </form>
                    {/* Another absolute positioned div from source (Initially Hidden) */}
                    <div className="bg-white absolute w-full box-border border-2 border-custom-blue-dark z-[4001] left-0 top-[45px] hidden">
                        {/* Content, if any, would go here */}
                    </div>
                </div>

                {/* Top Right Navigation */}
                <div className="absolute top-[9px] right-0 flex items-center">
                    <ul className="list-none flex items-center overflow-inherit leading-[17px] divide-solid divide-x divide-custom-border-gray">
                        {['갤러리', '미니갤', '인물갤', '갤로그', '디시트렌드', '디시뉴스', '디시게임', '이벤트', '디시콘'].map((item) => (
                            <li key={item} className="h-[10px] flex items-center">
                                <a href="#" className="text-custom-dropdown-text text-[11px] px-1.5 py-0.5 block"> {/* Added padding/block */}
                                    {item}
                                </a>
                            </li>
                        ))}
                    </ul>
                    <div className="flex items-center">
                        <a
                            href="#"
                            className="bg-custom-blue-hover text-white text-[11px] inline-block px-[3px] h-[16px] box-content leading-[16px]
                             border border-custom-blue-dark shadow-[0_-1px_0_rgb(29,39,97)] ml-1.5
                             " // Added margin
                        >
                            로그인
                        </a>
                    </div>
                    {/* Night Mode Toggle */}
                    <div className="relative ml-[10px]"> {/* Added margin from style */}
                        <a href="#" className="text-custom-dropdown-text text-[11px] leading-[18px] flex items-center">
                            <em className="inline-block w-[11px] h-[11px] bg-sp-img bg-[-255px_-844px] mr-1 align-[-1px]"></em>
                            야간모드
                        </a>
                        {/* Night Mode Tooltip */}
                        {isNightAlertVisible && (
                            <div className="bg-transparent absolute z-[999] left-[-35px] top-[25px] cursor-pointer"
                                onClick={() => setIsNightAlertVisible(false)}
                            >
                                <div className="bg-custom-green-light relative border border-custom-border-gray px-[10px] text-white text-xs h-[23px] rounded-full flex items-center"> {/* Used flex to center text */}
                                    <p className="bg-transparent whitespace-nowrap overflow-hidden max-w-[780px]">
                                        야간 모드를 이용해 보세요
                                    </p>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </header>
    );
}


export function VisitHistory({
    recentVisits,
}: {
    recentVisits?: {
        id: number;
        name: string;
        isMinor?: boolean;
    }[];
}) {
    recentVisits = recentVisits ?? [];
    // --- State for Interactivity (Example - not fully implemented in static version) ---
    const [isDropdownOpen, setIsDropdownOpen] = useState(false); // To control the main dropdown visibility
    const [activeTab, setActiveTab] = useState('recent'); // 'recent' or 'favorites' for the dropdown tabs


    return (
        <div className="w-[1160px] mx-auto relative"> {/* Added relative positioning for children */}

            {/* --- Horizontal Recent Visit Bar --- */}
            <div className="bg-custom-dropdown-bg h-[38px] leading-[38px] pr-[66px] pl-[12px] align-top box-border text-[rgb(68,68,68)] w-[1160px] relative"> {/* Adjusted position to relative, or keep absolute if intended */}

                <h3 className="float-left text-xs text-custom-blue-dark align-top tracking-[-0.075em] leading-[38px]">
                    {activeTab === 'recent' ? '최근 방문' : '즐겨찾기 갤러리'} {/* Dynamic text based on active tab */}
                </h3>

                {/* "Open Layer" Button - Toggles Dropdown */}
                <button
                    onClick={() => setIsDropdownOpen(!isDropdownOpen)} // Example state toggle
                    aria-label="최근 방문/즐겨찾기 레이어 열기"
                    className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs relative top-[12px] float-left w-[15px] h-[15px] ml-[10px]"
                >
                    <span className="sr-only">레이어 열기</span>
                    <em className={`bg-transparent inline-block w-[15px] h-[15px] bg-sp-img bg-[-56px_-168px] mt-[1px] align-top`}></em>
                </button>

                {/* "Previous" Button */}
                <button aria-label="이전 목록" className="cursor-pointer align-middle font-apple-dotum
            text-[12px] float-left relative top-[13px] left-0
        text-xs ml-[15px] mr-[9px] leading-[12px]">
                    <span className="sr-only">이전</span>
                    <em className={`inline-block w-[5px] h-[11px] bg-sp-img bg-[-119px_-56px] leading-[38px]`}></em>
                </button>

                {/* Visit List Container */}
                <div className="overflow-hidden float-left"> {/* Added margins to avoid overlap with buttons */}
                    <ul className="list-none relative whitespace-nowrap space-x-[15px]">
                        {recentVisits.map((item) => (
                            <li key={item.id} className="inline-block text-xs align-middle leading-[38px]"> {/* Adjusted alignment */}
                                <a href="#" className="bg-transparent text-[rgb(68,68,68)] inline-block tracking-[-0.075em] leading-[38px]">
                                    {item.name}
                                </a>
                                {item.isMinor && (
                                    <em className="inline-block h-[12px] leading-[12px] mt-[1px] ml-[2px] align-text-top text-[13px] not-italic text-custom-dropdown-text">
                                        ⓜ
                                    </em>
                                )}
                                <button aria-label={`${item.name} 삭제`} className="bg-transparent cursor-pointer align-top font-apple-dotum text-xs h-[36px] ml-[12px] leading-[38px]">
                                    <span className="sr-only hidden">삭제</span> {/* Hidden in original */}
                                    <em className={`bg-transparent inline-block w-[7px] h-[7px] align-[1px] bg-sp-img bg-[-264px_-961px] cursor-pointer`}></em>
                                </button>
                            </li>
                        ))}
                    </ul>
                    {/* Hidden list from original HTML */}
                    <ul className="list-none relative whitespace-nowrap bg-transparent hidden"></ul>
                </div>

                {/* "Next" Button */}
                <button aria-label="다음 목록" className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs right-[51px] absolute top-[13px] leading-[12px]">
                    <span className="sr-only">다음</span>
                    <em className={`bg-transparent inline-block w-[5px] h-[11px] bg-sp-img bg-[-110px_-56px] leading-[38px]`}></em>
                </button>

                {/* "All" Button */}
                <button
                    onClick={() => setIsDropdownOpen(true)} // Example: Open dropdown on click
                    className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs absolute right-[12px] top-0 leading-[38px] text-custom-blue-dark underline">
                    전체
                </button>

            </div>

            {/* --- Dropdown/Modal (Initially Hidden) --- */}
            {/* Controlled by isDropdownOpen state */}
            <div className={cn(
                `bg-white absolute z-[4000] text-left border border-custom-border-gray w-[1160px] left-0 top-[38px]`,
                isDropdownOpen ? 'block' : 'hidden'
            )}>
                {/* Adjusted top position relative to bar */}
                <div className="bg-transparent overflow-hidden relative w-full h-auto px-[8px] min-h-[197px] text-xs leading-normal box-border">

                    {/* Tabs */}
                    <div className="">
                        <ul className="list-none box-border">
                            <li className="float-left w-1/2 text-center border-b border-custom-blue-hover relative"> {/* Adjusted border color */}
                                <button
                                    onClick={() => setActiveTab('recent')} // Example state change
                                    className={`cursor-pointer align-middle font-apple-dotum text-sm relative w-full h-[40px] font-bold ${
                                        activeTab === 'recent' ? 'text-custom-blue-hover' : 'text-custom-gray-dark'}`}
                                >
                                    최근 방문
                                </button>
                                {activeTab === 'recent' && (
                                    <div className='absolute left-0 bottom-0 w-full right-0 h-1 bg-custom-blue-dark'></div>
                                )}
                            </li>
                            <li className={cn`float-left w-1/2 text-center border-b border-custom-blue-hover relative` /* Adjusted border color */}>
                                <button
                                    onClick={() => setActiveTab('favorites')} // Example state change
                                    className={`cursor-pointer align-middle font-apple-dotum text-sm relative w-full h-[40px] font-bold ${
                                        activeTab === 'favorites' ? 'text-custom-blue-hover' : 'text-custom-gray-dark'}`}>
                                    즐겨찾기
                                </button>
                                {activeTab === 'favorites' && (
                                    <div className='absolute left-0 bottom-0 w-full right-0 h-1 bg-custom-blue-dark'></div>
                                )}
                            </li>
                        </ul>
                    </div>

                    <div className="clear-both"> {/* Added clear-both and padding */}
                        {/* Recent Visit Content (Visible when activeTab is 'recent') */}
                        <div className={cn`${activeTab === 'recent' ? 'block' : 'hidden'}`}>
                            <div className="overflow-hidden">
                                <ul className="list-none overflow-hidden min-h-[123px] mt-[10px] -ml-[17px] px-[10px]">
                                    {recentVisits.map((item) => (
                                        <li key={`dd-${item.id}`} className="overflow-hidden float-left w-[146px] relative ml-[16px] mr-[3px] text-custom-gray-dark">
                                            <a href="#" className="bg-transparent text-custom-gray-dark leading-[22px] inline-block max-w-[82%] align-top text-ellipsis overflow-hidden whitespace-nowrap">
                                                {item.name}
                                            </a>
                                            {item.isMinor && (
                                                <em className="bg-transparent 
                                                not-italic
                                                inline-block h-[12px] leading-[12px] mt-[2px] ml-[2px] align-text-top text-[13px] text-custom-dropdown-text">
                                                    ⓜ
                                                </em>
                                            )}
                                            <button aria-label={`${item.name} 삭제`} className="bg-transparent cursor-pointer align-top font-apple-dotum text-xs h-[22px] absolute top-0 right-0">
                                                <span className="sr-only">삭제</span>
                                                <em className={`bg-transparent inline-block w-[7px] h-[7px] align-[1px] bg-sp-img bg-[-127px_-153px] cursor-pointer`}></em>
                                            </button>
                                        </li>
                                    ))}
                                </ul>
                                <div className="bg-transparent relative h-[20px] mt-[5px] mb-[13px]">
                                    <button className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs absolute right-[6px] bottom-[-1px] text-custom-blue-dark underline p-[3px]">
                                        전체 삭제
                                    </button>
                                </div>
                            </div>
                        </div>

                        {/* Favorites Content (Visible when activeTab is 'favorites') */}
                        <div className={cn`${activeTab === 'favorites' ? 'block' : 'hidden'} min-h-[158px] relative`}> {/* Added min-height and relative */}
                            {/* In a real app, you'd fetch and display favorites or show login prompt */}
                            <p className="bg-transparent float-left px-[19px] text-xs text-custom-gray-medium absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 mt-[24px]">
                                <a href="#" className="bg-transparent text-custom-gray-medium">
                                    <span className="bg-transparent underline">로그인</span> 후 이용 가능합니다.
                                </a>
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    );
}