import { Link, useParams } from "@tanstack/react-router"
import { Icon } from "@wordpress/components"
import { arrowLeft, arrowRight, cog, plugins, home, search, wordpress, pin } from "@wordpress/icons"
import { __ } from "@wordpress/i18n"
import Logo from "./Logo"
import { useRoutes } from "../../hooks/useRoutes"
import useSearchModalStore from "@/stores/searchModalStore"
import useSearchStore from "@/stores/searchStore"
import useNavigationOpenStore from "@/stores/navigationOpenStore"
import { getGroupQueryOptions } from "@/shared/ploogins-groups/query-options"
import { useQuery } from "@tanstack/react-query"

declare const plooginsData: PlooginsData;

const Navigation = () =>  {
    const { isInstalled, isSearch, isRoot, isSettings, isGroup } = useRoutes()
    const { setOpen } = useSearchModalStore()
    const { query } = useSearchStore()
    const { isOpen, setIsOpen } = useNavigationOpenStore()
    const { uuid: groupUUID } = useParams({ strict: false })
    const { data: group, isPending: isGroupPending } = useQuery(getGroupQueryOptions(groupUUID ?? ''))

    return(
        <div className={`hidden md:!block p-4 w-full text-neutral-100 transition-all duration-300 ${isOpen ? 'max-w-[250px]' : 'max-w-[80px]'}`}>

            <div className="space-y-6">
                <div className="flex items-center justify-between gap-1">
                    {isOpen && <Logo/>}
                    <button role="button" className={`cursor-pointer text-white ${isOpen ? 'w-6 h-6' : 'flex block w-full justify-center'}`} onClick={() => setIsOpen(!isOpen)}>
                        <Icon className="w-6 h-6 fill-current" icon={isOpen ? arrowLeft : arrowRight} />
                    </button>
                </div>

                <Link
                    className="block flex items-center gap-2 p-2 transition-colors bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50"
                    to={plooginsData.wp_admin_dashboard_url}
                >
                    <Icon className="w-8 h-8 fill-current" icon={wordpress} />
                    {isOpen && <span className="font-medium">{__("Return to WordPress", "ploogins-ai-assistant")}</span>}
                </Link>
            </div>

            <div className="pt-6">
                <button role="button"
                    onClick={() => {
                        setOpen(true)
                    }}
                    className="w-full block cursor-pointer flex items-center gap-2 p-2 transition-colors bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50"
                >
                    <Icon className="w-8 h-8 fill-current" icon={search} />
                    {isOpen && <span className="font-medium">{__("New AI Search", "ploogins-ai-assistant")}</span>}
                </button>

                <Link
                    className={`block flex items-center gap-2 p-2 transition-colors ${isRoot
                            ? 'bg-neutral-600 !text-white'
                            : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                        }`} 
                    to="/"
                >
                    <Icon className="w-8 h-8 fill-current" icon={home} />
                    {isOpen && <span className="font-medium">{__("Dashboard", "ploogins-ai-assistant")}</span>}
                </Link>


                {query && (
                <Link 
                    className={`block flex items-center gap-2 p-2 transition-colors ${
                        isSearch 
                            ? 'bg-neutral-600 !text-white' 
                            : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                    }`} 
                    to="/search"
                >
                    <Icon className="w-8 h-8 fill-current" icon={pin} />
                    {isOpen && <span className="font-medium">{__("Search Results", "ploogins-ai-assistant")}</span>}
                </Link>
                )}
                
                <Link 
                    className={`block flex items-center gap-2 p-2 transition-colors ${
                        isInstalled 
                            ? 'bg-neutral-600 !text-white' 
                            : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                    }`} 
                    to="/installed"
                >
                    <Icon className="w-8 h-8 fill-current" icon={plugins} />
                    {isOpen && <span className="font-medium">{__("Installed Plugins", "ploogins-ai-assistant")}</span>}
                </Link>

                {
                    isGroup && (
                        <Link
                            className={`block flex items-center gap-2 p-2 transition-colors ${isGroup
                                ? 'bg-neutral-600 !text-white'
                                : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                            }`}
                            to="/group/$uuid"
                            params={{ uuid: group?.uuid ?? '' }}
                        >
                            {
                                isGroupPending ? (
                                    <div className="w-8 h-8 rounded-lg bg-neutral-700 animate-pulse"></div>
                                ) : (
                                    <img src={group?.icon} alt={group?.name} className="w-8 h-8 object-contain rounded-lg" />
                                )
                            }
                            {isOpen && <span className="font-medium">{isGroupPending ? __("Loading...", "ploogins-ai-assistant") : group?.name}</span>}
                        </Link>
                    )
                }

                <Link
                    className={`block flex items-center gap-2 p-2 transition-colors ${isSettings
                            ? 'bg-neutral-600 !text-white'
                            : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                        }`}
                    to="/settings"
                >
                    <Icon className="w-8 h-8 fill-current" icon={cog} />
                    {isOpen && <span className="font-medium">{__("Settings", "ploogins-ai-assistant")}</span>}
                </Link>
            </div>
        </div>
    )

}

export default Navigation;