import {
  BarChart3,
  Clock,
  Copy,
  FileText,
  Globe,
  Layers,
  Link2,
  Lightbulb,
  Map,
  Smartphone,
  TrendingUp,
} from 'lucide-react';

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

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { cn } from '@/lib/utils';

interface SiteNavProps {
  siteId: number;
  canAnalyze?: boolean;
  canRecommend?: boolean;
  canCannibalization?: boolean;
  canOpportunityMap?: boolean;
  canGeographic?: boolean;
  canDevice?: boolean;
  canSchedule?: boolean;
}

const tabs = [
  {
    key: 'connections',
    label: 'Connections',
    icon: Link2,
    routeName: 'onboarding.index',
    alwaysEnabled: true,
  },
  {
    key: 'analyze',
    label: 'Analyze',
    icon: BarChart3,
    routeName: 'analyze.index',
    alwaysEnabled: false,
  },
  {
    key: 'recommendations',
    label: 'Recommendations',
    icon: Lightbulb,
    routeName: 'recommendations.index',
    alwaysEnabled: false,
  },
  {
    key: 'content-briefs',
    label: 'Content Briefs',
    icon: FileText,
    routeName: 'content-briefs.index',
    alwaysEnabled: true,
  },
  {
    key: 'cannibalization',
    label: 'Cannibalization',
    icon: Copy,
    routeName: 'cannibalization.index',
    alwaysEnabled: false,
  },
  {
    key: 'opportunity-map',
    label: 'Opportunity Map',
    icon: Map,
    routeName: 'opportunity-map.index',
    alwaysEnabled: false,
  },
  {
    key: 'geographic',
    label: 'Geographic',
    icon: Globe,
    routeName: 'geographic.index',
    alwaysEnabled: false,
  },
  {
    key: 'device',
    label: 'Device',
    icon: Smartphone,
    routeName: 'device.index',
    alwaysEnabled: false,
  },
  {
    key: 'pipeline',
    label: 'Pipeline',
    icon: Layers,
    routeName: 'pipeline.index',
    alwaysEnabled: true,
  },
  {
    key: 'roi',
    label: 'ROI',
    icon: TrendingUp,
    routeName: 'sites.roi.index',
    alwaysEnabled: true,
  },
  {
    key: 'schedule',
    label: 'Schedule',
    icon: Clock,
    routeName: 'sites.schedule.edit',
    alwaysEnabled: false,
  },
] as const;

export default function SiteNav({
  siteId,
  canAnalyze = false,
  canRecommend = false,
  canCannibalization = false,
  canOpportunityMap = false,
  canGeographic = false,
  canDevice = false,
  canSchedule = false,
}: SiteNavProps) {
  const { url } = usePage();

  const isEnabled = (tab: (typeof tabs)[number]) => {
    if (tab.alwaysEnabled) return true;
    if (tab.key === 'analyze') return canAnalyze;
    if (tab.key === 'recommendations') return canRecommend;
    if (tab.key === 'cannibalization') return canCannibalization;
    if (tab.key === 'opportunity-map') return canOpportunityMap;
    if (tab.key === 'geographic') return canGeographic;
    if (tab.key === 'device') return canDevice;
    if (tab.key === 'schedule') return canSchedule;
    return false;
  };

  const isActive = (tab: (typeof tabs)[number]) => {
    const tabUrl = route(tab.routeName, siteId);
    return url.startsWith(new URL(tabUrl, window.location.origin).pathname);
  };

  const getTooltipMessage = (tabKey: string) => {
    if (tabKey === 'analyze') {
      return 'Connect Google Search Console to enable analysis';
    }
    if (tabKey === 'recommendations') {
      return 'Connect Google Search Console and run an analysis to view recommendations';
    }
    if (tabKey === 'cannibalization') {
      return 'Connect Google Search Console to detect cannibalization';
    }
    if (tabKey === 'opportunity-map') {
      return 'Connect Google Search Console to view opportunity map';
    }
    if (tabKey === 'geographic') {
      return 'Connect Google Search Console to view geographic performance';
    }
    if (tabKey === 'device') {
      return 'Connect Google Search Console to view device performance';
    }
    return '';
  };

  return (
    <TooltipProvider delayDuration={300}>
      <div className="relative after:pointer-events-none after:absolute after:right-0 after:top-0 after:h-full after:w-8 after:bg-gradient-to-l after:from-background after:to-transparent">
        <nav
          aria-label="Site sections"
          className="flex gap-1 border-b mb-6 overflow-x-auto scrollbar-hide"
        >
          {tabs.map((tab) => {
            const enabled = isEnabled(tab);
            const active = isActive(tab);
            const Icon = tab.icon;

            if (!enabled) {
              return (
                <Tooltip key={tab.key}>
                  <TooltipTrigger asChild>
                    <button
                      type="button"
                      disabled
                      aria-disabled="true"
                      className="flex items-center gap-2 px-4 py-3 text-sm font-medium text-muted-foreground/50 cursor-not-allowed opacity-60 border-b-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <Icon className="h-4 w-4" aria-hidden="true" />
                      {tab.label}
                    </button>
                  </TooltipTrigger>
                  <TooltipContent>{getTooltipMessage(tab.key)}</TooltipContent>
                </Tooltip>
              );
            }

            return (
              <Link
                key={tab.key}
                href={route(tab.routeName, siteId)}
                aria-current={active ? 'page' : undefined}
                className={cn(
                  'flex items-center gap-2 whitespace-nowrap px-4 py-3 text-sm font-medium border-b-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm',
                  active
                    ? 'border-primary text-foreground'
                    : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border',
                )}
              >
                <Icon className="h-4 w-4" aria-hidden="true" />
                {tab.label}
              </Link>
            );
          })}
        </nav>
      </div>
    </TooltipProvider>
  );
}