import { useMemo } from 'react';

import { Link, usePage } from '@inertiajs/react';

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { getSiteNavItems } from '@/config/site-navigation';
import type { SiteNavGroup, SiteNavItem } from '@/config/site-navigation';
import { cn } from '@/lib/utils';
import type { PageProps, SiteSummary } from '@/types';

import { useSidebar } from './sidebar-context';
import { SidebarSiteSwitcher } from './SidebarSiteSwitcher';

function isNavActive(url: string, href: string): boolean {
  const segments = href.split('/').filter(Boolean);
  if (segments.length <= 1) return url === href || url === href + '/';
  return url.startsWith(href);
}

interface SiteNavItemRenderedProps {
  item: SiteNavItem & { disabled: boolean };
  siteId: number;
  collapsed: boolean;
  url: string;
}

function SiteNavItemRendered({ item, siteId, collapsed, url }: SiteNavItemRenderedProps) {
  const href = route(item.routeName, siteId);
  const isActive = isNavActive(url, new URL(href, window.location.origin).pathname);
  const Icon = item.icon;

  if (item.disabled) {
    const content = (
      <span aria-disabled="true" className={cn('flex items-center gap-3 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-foreground/35 cursor-not-allowed', collapsed && 'justify-center px-0')}>
        <Icon className="h-4 w-4 shrink-0" />
        {!collapsed && <span className="flex-1">{item.label}</span>}
      </span>
    );
    return (
      <Tooltip>
        <TooltipTrigger asChild>{content}</TooltipTrigger>
        <TooltipContent side="right">{item.disabledTooltip ?? `${item.label} is not available`}</TooltipContent>
      </Tooltip>
    );
  }

  const linkContent = (
    <Link href={href} aria-current={isActive ? 'page' : undefined} className={cn('flex items-center gap-3 rounded-md px-2 py-1.5 text-sm font-medium transition-colors', 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground', isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'text-sidebar-foreground/80', collapsed && 'justify-center px-0')}>
      <Icon className="h-4 w-4 shrink-0" />
      {!collapsed && <span className="flex-1">{item.label}</span>}
    </Link>
  );

  if (collapsed) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
        <TooltipContent side="right">{item.label}</TooltipContent>
      </Tooltip>
    );
  }
  return linkContent;
}

interface SiteNavGroupRenderedProps {
  group: SiteNavGroup & { items: Array<SiteNavItem & { disabled: boolean }> };
  siteId: number;
  collapsed: boolean;
  url: string;
}

function SiteNavGroupRendered({ group, siteId, collapsed, url }: SiteNavGroupRenderedProps) {
  return (
    <div className="px-3 py-1">
      {!collapsed && <h3 className="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/40">{group.label}</h3>}
      <nav className="flex flex-col gap-0.5">
        {group.items.map((item) => <SiteNavItemRendered key={item.key} item={item} siteId={siteId} collapsed={collapsed} url={url} />)}
      </nav>
    </div>
  );
}

export function SidebarSiteNav() {
  const { collapsed } = useSidebar();
  const { props, url } = usePage<PageProps>();
  const { sites = [] } = props;

  const currentSite = useMemo<SiteSummary | null>(() => {
    const match = url.match(/\/sites\/(\d+)/);
    if (!match) return null;
    const siteId = parseInt(match[1], 10);
    return sites.find((s) => s.id === siteId) ?? null;
  }, [url, sites]);

  if (sites.length === 0) return null;

  const siteNavGroups = currentSite ? getSiteNavItems(currentSite) : [];

  return (
    <div className="border-b border-sidebar-border">
      <div className="px-2 py-2">
        <TooltipProvider delayDuration={0}>
          <SidebarSiteSwitcher sites={sites} currentSite={currentSite} collapsed={collapsed} />
        </TooltipProvider>
      </div>
      {currentSite && siteNavGroups.length > 0 && (
        <TooltipProvider delayDuration={0}>
          <div className="pb-2">
            {siteNavGroups.map((group) => <SiteNavGroupRendered key={group.label} group={group} siteId={currentSite.id} collapsed={collapsed} url={url} />)}
          </div>
        </TooltipProvider>
      )}
    </div>
  );
}

export function MobileSidebarSiteNav({ onNavigate }: { onNavigate?: () => void }) {
  const { props, url } = usePage<PageProps>();
  const { sites = [] } = props;

  const currentSite = useMemo<SiteSummary | null>(() => {
    const match = url.match(/\/sites\/(\d+)/);
    if (!match) return null;
    const siteId = parseInt(match[1], 10);
    return sites.find((s) => s.id === siteId) ?? null;
  }, [url, sites]);

  if (sites.length === 0) return null;
  const siteNavGroups = currentSite ? getSiteNavItems(currentSite) : [];

  return (
    <div className="border-b border-sidebar-border pb-2">
      <div className="px-3 py-2">
        <SidebarSiteSwitcher sites={sites} currentSite={currentSite} collapsed={false} />
      </div>
      {currentSite && siteNavGroups.length > 0 && (
        <nav className="flex flex-col gap-1 px-3">
          {siteNavGroups.map((group) => (
            <div key={group.label}>
              <h3 className="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/40">{group.label}</h3>
              {group.items.map((item) => {
                const Icon = item.icon;
                const href = route(item.routeName, currentSite.id);
                const isActive = isNavActive(url, new URL(href, window.location.origin).pathname);
                if (item.disabled) {
                  return <span key={item.key} className="flex items-center gap-3 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-foreground/35 cursor-not-allowed"><Icon className="h-4 w-4 shrink-0" /><span className="flex-1">{item.label}</span></span>;
                }
                return (
                  <Link key={item.key} href={href} onClick={onNavigate} aria-current={isActive ? 'page' : undefined} className={cn('flex items-center gap-3 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground', isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'text-sidebar-foreground/80')}>
                    <Icon className="h-4 w-4 shrink-0" /><span className="flex-1">{item.label}</span>
                  </Link>
                );
              })}
            </div>
          ))}
        </nav>
      )}
    </div>
  );
}