import { useEffect, useState, useMemo } from 'react';
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import {
  Activity,
  BarChart3,
  Calculator,
  CalendarDays,
  ChevronDown,
  ClipboardCheck,
  ClipboardList,
  Database,
  Info,
  LayoutGrid,
  LogOut,
  Map,
  Menu,
  Receipt,
  Search,
  Settings,
  ShieldCheck,
  Tag,
  TrendingDown,
  User,
  X,
  Landmark,
  Repeat,
  ShoppingCart,
  type LucideIcon,
} from 'lucide-react';
import { api } from '@/api';
import { cn } from '@/lib/utils';
import { BRAND } from '@/lib/brand';
import { useAuth } from '@/hooks/useAuth';
import { useOverdueCount } from '@/hooks/useQueries';
import { ThemeToggle } from '@/components/ui/theme-toggle';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { NavPill } from './NavPill';
import { BrandBlock } from './BrandBlock';

interface SidebarNavItem {
  to: string;
  icon: LucideIcon;
  label: string;
  end?: boolean;
  simplefinOnly?: boolean;
  accountToolsOnly?: boolean;
}

const userNavItems: SidebarNavItem[] = [
  { to: '/calendar', icon: CalendarDays, label: 'Calendar' },
  { to: '/analytics', icon: BarChart3, label: 'Analytics' },
];

const adminNavItems: SidebarNavItem[] = [
  { to: '/', icon: LayoutGrid, label: 'Tracker', end: true },
  { to: '/admin', icon: ShieldCheck, label: 'Admin Panel', end: true },
  { to: '/admin/status', icon: Activity, label: 'System Status' },
  { to: '/roadmap', icon: Map, label: 'Roadmap' },
];

const trackerItems: SidebarNavItem[] = [
  { to: '/', icon: LayoutGrid, label: 'Overview', end: true },
  { to: '/summary', icon: ClipboardList, label: 'Summary' },
  { to: '/bills', icon: Receipt, label: 'Bills' },
  { to: '/subscriptions', icon: Repeat, label: 'Subscriptions' },
  { to: '/categories', icon: Tag, label: 'Categories' },
  { to: '/health', icon: ClipboardCheck, label: 'Health' },
  { to: '/spending', icon: ShoppingCart, label: 'Spending' },
  { to: '/bank-transactions', icon: Landmark, label: 'Banking', simplefinOnly: true },
  { to: '/snowball', icon: TrendingDown, label: 'Snowball' },
  { to: '/payoff', icon: Calculator, label: 'Payoff' },
  { to: '/data', icon: Database, label: 'Data', accountToolsOnly: true },
];

interface TrackerMenuProps {
  onNavigate?: () => void;
  badge?: number;
  badgeNames?: string[];
  items?: SidebarNavItem[];
}

function TrackerMenu({
  onNavigate,
  badge = 0,
  badgeNames = [],
  items = trackerItems,
}: TrackerMenuProps) {
  const location = useLocation();
  const navigate = useNavigate();
  const isTrackerActive = useMemo(
    () =>
      items.some((item) =>
        item.end ? location.pathname === item.to : location.pathname.startsWith(item.to),
      ),
    [items, location.pathname],
  );

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          className={cn(
            'inline-flex items-center gap-2 rounded-full border px-3 py-2 text-sm font-medium transition-all',
            'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
            isTrackerActive
              ? 'border-primary/25 bg-primary text-primary-foreground shadow-sm shadow-primary/20'
              : 'border-transparent text-muted-foreground hover:border-border/60 hover:bg-accent/85 hover:text-accent-foreground hover:shadow-sm',
          )}
          aria-expanded={isTrackerActive}
          aria-haspopup="menu"
        >
          <LayoutGrid className="h-4 w-4" />
          Tracker
          {badge > 0 && (
            <TooltipProvider delayDuration={300}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold leading-none text-white">
                    {badge > 99 ? '99+' : badge}
                  </span>
                </TooltipTrigger>
                <TooltipContent side="right" className="max-w-[200px]">
                  <p className="font-semibold mb-1">{badge} past due</p>
                  {badgeNames.slice(0, 5).map((name) => (
                    <p key={name} className="text-xs opacity-80">
                      · {name}
                    </p>
                  ))}
                  {badgeNames.length > 5 && (
                    <p className="text-xs opacity-60">+{badgeNames.length - 5} more</p>
                  )}
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
          <ChevronDown className="h-3.5 w-3.5 opacity-75" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        {items.map((item) => {
          const Icon = item.icon;
          return (
            <DropdownMenuItem
              key={item.to}
              onSelect={() => {
                navigate(item.to);
                onNavigate?.();
              }}
            >
              <Icon className="h-4 w-4" />
              {item.label}
            </DropdownMenuItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

function UserMenu({ adminMode = false }: { adminMode?: boolean }) {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const name = useMemo(
    () =>
      user?.display_name ||
      user?.displayName ||
      user?.name ||
      user?.username ||
      (adminMode ? 'Admin' : 'Profile'),
    [user, adminMode],
  );
  const accountToolsAllowed = useMemo(() => !user?.is_default_admin, [user]);
  const userRole = useMemo(() => user?.role, [user]);
  const initials = useMemo(() => {
    const source = name.trim() || (adminMode ? 'Admin' : 'User');
    return source
      .split(/\s+/)
      .slice(0, 2)
      .map((part) => part[0]?.toUpperCase())
      .join('');
  }, [adminMode, name]);

  const handleLogout = async () => {
    try {
      await logout();
    } catch {
      /* ignore */
    }
    navigate('/login', { replace: true });
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          className="inline-flex h-9 items-center gap-2 rounded-full border border-border/75 bg-card/75 px-2.5 text-sm font-medium text-foreground shadow-sm shadow-black/5 transition-all hover:bg-accent hover:text-accent-foreground hover:shadow focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
          aria-label="Open user menu"
        >
          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-[10px] font-bold text-primary">
            {initials || <User className="h-3.5 w-3.5" />}
          </span>
          <span className="hidden max-w-[140px] truncate sm:inline">{name}</span>
          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-60">
        <DropdownMenuLabel>
          <span className="block truncate text-sm font-semibold">{name}</span>
          <span className="mt-0.5 block text-xs font-normal text-muted-foreground">
            {adminMode ? 'Admin workspace' : 'Welcome back'}
          </span>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        {userRole === 'admin' && !adminMode && (
          <>
            <DropdownMenuItem onSelect={() => navigate('/admin')}>
              <ShieldCheck className="h-4 w-4" />
              Admin Panel
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => navigate('/admin/status')}>
              <Activity className="h-4 w-4" />
              System Status
            </DropdownMenuItem>
            <DropdownMenuSeparator />
          </>
        )}
        {accountToolsAllowed && (
          <>
            <DropdownMenuItem onSelect={() => navigate('/profile')}>
              <User className="h-4 w-4" />
              Profile
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => navigate('/settings')}>
              <Settings className="h-4 w-4" />
              Settings
            </DropdownMenuItem>
            <DropdownMenuSeparator />
          </>
        )}
        <DropdownMenuItem onSelect={() => navigate('/about')}>
          <Info className="h-4 w-4" />
          About
        </DropdownMenuItem>
        {user?.role === 'admin' && (
          <DropdownMenuItem onSelect={() => navigate('/roadmap')}>
            <Map className="h-4 w-4" />
            Roadmap
          </DropdownMenuItem>
        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem destructive onSelect={handleLogout}>
          <LogOut className="h-4 w-4" />
          Logout
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default function Sidebar({
  adminMode = false,
}: {
  adminMode?: boolean;
  mainContentId?: string;
}) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const { user } = useAuth();
  const items = useMemo(() => (adminMode ? adminNavItems : userNavItems), [adminMode]);
  const [simplefinReady, setSimplefinReady] = useState(false);
  const { data: overdueData } = useOverdueCount();
  const od = overdueData as { count?: number; names?: string[] } | undefined;
  const overdueCount = !adminMode ? (od?.count ?? 0) : 0;
  const overdueNames = !adminMode ? (od?.names ?? []) : [];
  const accountToolsAllowed = !user?.is_default_admin;
  const trackerMenuItems = useMemo(
    () =>
      trackerItems.filter(
        (item) =>
          (!item.simplefinOnly || simplefinReady) &&
          (!item.accountToolsOnly || accountToolsAllowed),
      ),
    [simplefinReady, accountToolsAllowed],
  );

  useEffect(() => {
    if (adminMode) return undefined;
    let cancelled = false;
    api
      .simplefinStatus()
      .then((status) => {
        const s = status as { enabled?: boolean; has_connections?: boolean };
        if (!cancelled) setSimplefinReady(Boolean(s?.enabled && s?.has_connections));
      })
      .catch(() => {
        if (!cancelled) setSimplefinReady(false);
      });
    return () => {
      cancelled = true;
    };
  }, [adminMode]);

  return (
    <header className="sticky top-0 z-40 border-b border-border/65 bg-card/90 shadow-sm shadow-black/10 backdrop-blur-xl supports-backdrop-filter:bg-card/82">
      <div className="mx-auto flex h-18 w-full max-w-[1500px] items-center gap-4 px-4 sm:px-6 lg:px-8">
        <BrandBlock adminMode={adminMode} />

        <nav
          className="hidden items-center gap-1.5 lg:flex"
          aria-label={adminMode ? 'Admin navigation' : 'Primary navigation'}
        >
          {!adminMode && (
            <TrackerMenu badge={overdueCount} badgeNames={overdueNames} items={trackerMenuItems} />
          )}
          {items.map((item) => (
            <NavPill key={item.to} item={item} />
          ))}
        </nav>

        <div className="ml-auto flex items-center gap-2">
          {!adminMode && (
            <Button
              type="button"
              variant="outline"
              className="hidden h-9 gap-2 rounded-full border-border/75 bg-card/75 px-3 text-muted-foreground shadow-sm shadow-black/5 md:inline-flex"
              onClick={() => window.dispatchEvent(new Event('command-palette:open'))}
              title="Find a bill"
            >
              <Search className="h-4 w-4" />
              <span className="text-sm">Search bills</span>
              <kbd className="rounded border border-border bg-background px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
                Ctrl K
              </kbd>
            </Button>
          )}
          <ThemeToggle className="rounded-full border border-border/75 bg-card/75 shadow-sm shadow-black/5" />
          <UserMenu adminMode={adminMode} />
          <Button
            type="button"
            variant="outline"
            size="icon"
            className="rounded-full bg-card/70 lg:hidden"
            aria-label={mobileOpen ? 'Close navigation menu' : 'Open navigation menu'}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((v) => !v)}
          >
            {mobileOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
          </Button>
        </div>
      </div>

      {mobileOpen && (
        <div className="max-h-[76vh] overflow-y-auto border-t border-border/70 bg-card/95 px-4 py-3 shadow-lg shadow-black/15 lg:hidden">
          <div className="mx-auto mb-3 flex max-w-[1500px] items-center justify-between gap-3 rounded-2xl border border-border/65 bg-muted/35 px-3 py-3">
            <div className="min-w-0">
              <p className="text-sm font-semibold text-foreground">
                {adminMode ? 'Admin workspace' : BRAND.name}
              </p>
              <p className="mt-0.5 truncate text-xs text-muted-foreground">
                {adminMode ? 'System care and access' : 'Choose where you want to go next'}
              </p>
            </div>
            {!adminMode && (
              <Button
                type="button"
                variant="outline"
                size="sm"
                className="shrink-0 rounded-full bg-card/80"
                onClick={() => {
                  setMobileOpen(false);
                  window.dispatchEvent(new Event('command-palette:open'));
                }}
              >
                <Search className="h-4 w-4" />
                Search
              </Button>
            )}
          </div>
          <nav
            className="mx-auto grid max-w-[1500px] gap-1"
            aria-label={adminMode ? 'Admin mobile navigation' : 'Mobile navigation'}
          >
            {!adminMode &&
              trackerMenuItems.map((item) => (
                <NavPill
                  key={item.to}
                  item={item}
                  onNavigate={() => setMobileOpen(false)}
                  badge={item.to === '/' ? overdueCount : undefined}
                  badgeNames={item.to === '/' ? overdueNames : undefined}
                />
              ))}
            {items.map((item) => (
              <NavPill key={item.to} item={item} onNavigate={() => setMobileOpen(false)} />
            ))}
          </nav>
        </div>
      )}
    </header>
  );
}