import { Link } from "@tanstack/react-router";
import useModalStore from "@/stores/modalStore";
import { Blend, BookOpen, Diff, Home, Info, Languages, Minus, Puzzle, Settings, TrendingUpDown, Wrench, X } from "lucide-react";
import { AppService } from "@bindings/firefly-launcher/internal/app-service";

export default function Header() {
    const { setIsOpenSettingModal } = useModalStore()

    const controlButtons = [
        {
            icon: <Settings className="w-5 h-5" />,
            action: () => setIsOpenSettingModal(true),
            tip: "Settings",
        },
        {
            icon: <Minus className="w-5 h-5" />,
            action: () => AppService.MinimizeApp(),
            tip: "Minimize",
        },
        {
            icon: <X className="w-5 h-5" />,
            action: () => AppService.CloseApp(),
            tip: "Close",
        },
    ]

    return (
        <div className="navbar sticky top-0 z-50 px-3" style={{ '--wails-draggable': 'drag' } as any}>
            <div className="navbar-start">
                <div className="dropdown">
                    <div tabIndex={0} role="button" className="btn btn-ghost md:hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
                    </div>
                    <ul
                        tabIndex={0}
                        className="menu menu-sm dropdown-content bg-black/50 backdrop-blur-md rounded-box z-1 mt-3 w-52 p-2 shadow">
                        <li><Link to="/">Home</Link></li>

                        <li>
                            <a>Tools</a>
                            <ul className="p-2">
                                <li><Link to="/language">Language</Link></li>
                                <li><Link to="/diff">Diff</Link></li>
                            </ul>
                        </li>
                        <li>
                            <a>Plugins</a>
                            <ul className="p-2">
                                <li><Link to="/analysis">Analysis (Veritas)</Link></li>
                                <li><Link to="/srtools">SrTools</Link></li>
                            </ul>
                        </li>
                        <li><Link to="/howto">How to?</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>
                </div>
                <Link to="/" className="grid grid-cols-1 items-start text-left gap-0">
                    <div className="flex items-center justify-center">
                        <img src="/appicon.png" alt="Logo" className='w-13 h-13 rounded-lg mx-2' />
                        <div className="flex flex-col justify-center items-start">
                            <h1 className="text-xl font-bold">
                                <span className="text-emerald-500"
                                    style={{
                                        textShadow: '0 1px 2px rgba(255, 255, 255, 0.2)',
                                    }}
                                >Firefly </span>
                                <span className="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-orange-500 to-red-500"
                                    style={{
                                        textShadow: '0 1px 2px rgba(255, 255, 255, 0.2)',
                                    }}
                                >
                                    Launcher
                                </span>
                            </h1>
                            <p
                                className="text-white text-sm"
                                style={{
                                    textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
                                }}
                            >
                                By Kain
                            </p>
                        </div>
                    </div>
                </Link>
            </div>
            <div className="navbar-center hidden md:flex bg-black/40 backdrop-blur-sm rounded-lg shadow-lg">
                <ul className="menu menu-horizontal px-1 gap-4 text-white">
                    <li>
                        <Link to="/" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
                            <Home size={18} /> Home
                        </Link>
                    </li>
                    <li>
                        <details>
                            <summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 transition-colors">
                                <Wrench size={18} /> Tools
                            </summary>
                            <ul className="p-2 bg-black/75 text-white rounded-lg">
                                <li>
                                    <Link to="/language" className="flex items-center gap-2 hover:text-cyan-300">
                                        <Languages size={18} /> Language
                                    </Link>
                                </li>
                                <li>
                                    <Link to="/diff" className="flex items-center gap-2 hover:text-cyan-300">
                                        <Diff size={18} /> Client update
                                    </Link>
                                </li>
                            </ul>
                        </details>
                    </li>
                    <li>
                        <details>
                            <summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 transition-colors">
                                <Puzzle size={18} /> Plugins
                            </summary>
                            <ul className="p-2 bg-black/75 text-white rounded-lg">
                                <li>
                                    <Link to="/analysis" className="flex items-center gap-2 hover:text-cyan-300">
                                        <TrendingUpDown size={18} /> Analysis (Veritas)
                                    </Link>
                                </li>
                                <li>
                                    <Link to="/srtools" className="flex items-center gap-2 hover:text-cyan-300">
                                        <Blend size={18} /> Firefly Tools
                                    </Link>
                                </li>
                            </ul>
                        </details>
                    </li>
                    <li>
                        <Link to="/howto" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
                            <BookOpen size={18} /> How to?
                        </Link>
                    </li>
                    <li>
                        <Link to="/about" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
                            <Info size={18} /> About
                        </Link>
                    </li>
                </ul>
            </div>

            <div className="navbar-end flex gap-2 z-52">
                <div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm rounded-lg">
                    {controlButtons.map((btn, i) => (
                        <div key={i} className="tooltip tooltip-bottom" data-tip={btn.tip}>
                            <button
                                onClick={btn.action}
                                className="btn btn-ghost btn-circle bg-transparent border-none flex items-center justify-center"
                            >
                                <div className="hover:text-cyan-300 transition-colors">
                                    {btn.icon}
                                </div>
                            </button>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}