import { useI18n } from "@/lib/i18n";
import { Link, usePage } from "@inertiajs/react";
import type { PageProps } from "@inertiajs/core";
import {
    BarChart3,
    BellRing,
    BrainCircuit,
    LayoutGrid,
    Radar,
    ShieldCheck,
    TrendingUp,
    UsersRound,
    Waves,
} from "lucide-react";

import AppLogo from "@/components/app-logo";
import { NavMain } from "@/components/nav-main";
import { NavUser } from "@/components/nav-user";
import { LanguageSwitcher } from "@/components/language-switcher";
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from "@/components/ui/sidebar";
import { dashboard } from "@/routes";
import type { NavItem } from "@/types";
import { hasSubscriptionFeature } from "@/lib/subscription-access";
import { NavFooter } from "./nav-footer";
import { Can } from "@/components/can";

interface SidebarPageProps extends PageProps {
    subscription?: {
        active?: boolean | null;
        features?: readonly string[] | null;
    } | null;
    customerPages?: Record<string, boolean> | null;
}

export function AppSidebar() {
    const { t } = useI18n();
    const { subscription, customerPages } = usePage<SidebarPageProps>().props;
    const customerPageEnabled = (key: string) => customerPages?.[key] !== false;
    const whaleActivityAvailable =
        customerPageEnabled("whale_activity") &&
        hasSubscriptionFeature(subscription, "advanced_insight");

    const overviewNavItems: NavItem[] = [
        {
            title: t("nav.dashboard", "Dashboard"),
            href: dashboard(),
            icon: LayoutGrid,
        },
    ];

    const analysisNavItems: NavItem[] = [
        ...(customerPageEnabled("analytics")
            ? [
                  {
                      title: t("nav.market_analysis", "Market Analysis"),
                      href: "/trading/BTCUSDT",
                      icon: TrendingUp,
                  },
              ]
            : []),
        ...(customerPageEnabled("market_scanner")
            ? [
                  {
                      title: t("nav.market_scanner", "Market Scanner"),
                      href: "/market-scanner",
                      icon: Radar,
                  },
              ]
            : []),
        ...(customerPageEnabled("market_intelligence") &&
        hasSubscriptionFeature(subscription, "advanced_insight")
            ? [
                  {
                      title: t("Market Intelligence"),
                      href: "/market-intelligence",
                      icon: BrainCircuit,
                  },
              ]
            : []),
        ...(whaleActivityAvailable
            ? [
                  {
                      title: t("Whale Activity"),
                      href: "/whale-activity",
                      icon: Waves,
                  },
              ]
            : []),
    ];

    const signalNavItems: NavItem[] = [
        ...(customerPageEnabled("signal_research") &&
        hasSubscriptionFeature(subscription, "signals")
            ? [
                  {
                      title: t("Signal Research"),
                      href: "/signals/research",
                      icon: BarChart3,
                  },
              ]
            : []),
        ...(customerPageEnabled("alerts")
            ? [
                  {
                      title: t("nav.alerts", "Alerts"),
                      href: "/alerts",
                      icon: BellRing,
                  },
              ]
            : []),
    ];

    const accountNavItems: NavItem[] = [
        ...(customerPageEnabled("referrals")
            ? [
                  {
                      title: t("nav.referrals", "Referrals"),
                      href: "/referrals",
                      icon: UsersRound,
                  },
              ]
            : []),
    ];

    const footerNavItems: NavItem[] = [];

    return (
        <Sidebar collapsible="icon" variant="inset" className="border-border/70 bg-sidebar/95 backdrop-blur-xl">
            <SidebarHeader className="border-b border-border/60 pb-3 pt-3">
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link href={dashboard()} prefetch>
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent className="py-4">
                <NavMain items={overviewNavItems} label="Overview" />
                {analysisNavItems.length > 0 && (
                    <NavMain items={analysisNavItems} label="Analysis" />
                )}
                {signalNavItems.length > 0 && (
                    <NavMain items={signalNavItems} label="Signals" />
                )}

                {accountNavItems.length > 0 && (
                    <NavMain items={accountNavItems} label="Account" />
                )}
            </SidebarContent>

            <SidebarFooter className="border-t border-border/60 pt-3">
                <div className="px-2 pb-2">
                    <LanguageSwitcher />
                </div>

                <Can admin>
                    <NavFooter
                        items={[
                            ...footerNavItems,
                            {
                                title: t("nav.admin", "Admin"),
                                href: "/admin/settings",
                                icon: ShieldCheck,
                            },
                        ]}
                        className="mt-auto"
                    />
                </Can>
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}