import { Link, usePage } from "@inertiajs/react";
import {
    BarChart3,
    Bell,
    Brain,
    FlaskConical,
    ScanSearch,
    Waves,
} from "lucide-react";
import type { ComponentType } from "react";

import { cn } from "@/lib/utils";

type Group = "analysis" | "signals";

type Item = {
    label: string;
    href: string;
    icon: ComponentType<{ className?: string }>;
    match: (path: string) => boolean;
};

const groups: Record<Group, Item[]> = {
    analysis: [
        {
            label: "Market Analysis",
            href: "/trading/BTCUSDT",
            icon: BarChart3,
            match: (p) => p.startsWith("/trading/"),
        },
        {
            label: "Market Scanner",
            href: "/market-scanner",
            icon: ScanSearch,
            match: (p) => p === "/market-scanner",
        },
        {
            label: "Market Intelligence",
            href: "/market-intelligence",
            icon: Brain,
            match: (p) => p === "/market-intelligence",
        },
        {
            label: "Whale Activity",
            href: "/whale-activity",
            icon: Waves,
            match: (p) => p === "/whale-activity",
        },
    ],
    signals: [
        {
            label: "Signal Research",
            href: "/signals/research",
            icon: FlaskConical,
            match: (p) => p === "/signals/research",
        },
        {
            label: "Alerts",
            href: "/alerts",
            icon: Bell,
            match: (p) => p === "/alerts",
        },
    ],
};

export default function CustomerWorkspaceNav({ group }: { group: Group }) {
    const { url } = usePage();
    const pathname = url.split("?")[0];

    const groupLabel = group === "analysis" ? "Market workspace" : "Signal workspace";

    return (
        <nav
            aria-label={`${group} workspace navigation`}
            className="-mx-1 max-w-full overflow-x-auto overscroll-x-contain px-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        >
            <div className="inline-flex min-w-max items-center gap-1 rounded-xl border border-border/70 bg-muted/35 p-1 shadow-sm backdrop-blur-xl">
                <span className="hidden px-2.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground sm:inline-flex">
                    {groupLabel}
                </span>
                {groups[group].map(({ label, href, icon: Icon, match }) => {
                    const active = match(pathname);

                    return (
                        <Link
                            key={href}
                            href={href}
                            preserveScroll
                            aria-current={active ? "page" : undefined}
                            className={cn(
                                "inline-flex min-h-10 touch-manipulation items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-xs font-medium whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-[0.985] sm:min-h-10",
                                active
                                    ? "border-primary/15 bg-primary/10 text-primary font-semibold"
                                    : "text-muted-foreground hover:bg-muted/70 hover:text-foreground",
                            )}
                        >
                            <Icon className={cn("size-3.5", active && "text-primary")} />
                            {label}
                        </Link>
                    );
                })}
            </div>
        </nav>
    );
}