import { useCallback, useMemo } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { ArrowUpRightIcon, ChevronDownIcon, XIcon } from 'lucide-react';

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from '../ui/sheet';
import { navCount, useSeoBadges } from '../../context/seo-badges.context';
import { classNames } from '../../lib/utils';
import {
  activeSectionKey,
  activeTreeKey,
  containsActivePath,
  matchPathsActive,
  queryLinkClaims,
  searchLinkActive,
  type NavItem,
  type NavSection,
} from '../../lib/navigation/nav-model';
import {
  useNavAccordion,
  useNavSections,
  type NavAccordion,
} from '../../lib/navigation/use-nav-accordion';
import { canSeeSeoAnalytics } from '../../lib/seo/analytics-access';

import { buildVisibleNav, type VisibleNavOptions } from './nav-config';
import { NavCountPill } from './nav-count';
import { NavBadge, NavTag } from './nav-pills';
import NavUserChip from './nav-user-chip';
import { Wordmark } from './wordmark';

interface MobileNavProps extends VisibleNavOptions {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  email?: string;
}

export function MobileNav({
  open,
  onOpenChange,
  email,
  canSeeBulkUpload,
}: MobileNavProps) {
  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
  const badges = useSeoBadges().badges;
  const seoTypes = badges?.types;
  const seoSetupDone = badges?.setup_done ?? true;
  const seoModules = badges?.modules;
  const { sections, utilityItems } = useMemo(
    () =>
      buildVisibleNav({
        canSeeBulkUpload,
        canSeeSeoAnalytics: canSeeSeoAnalytics(),
        seoSetupDone,
        seoTypes,
        seoModules,
      }),
    [canSeeBulkUpload, seoSetupDone, seoTypes, seoModules]
  );
  const location = useLocation();
  const sectionAccordion = useNavSections(
    activeSectionKey(location.pathname, sections)
  );

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="left"
        showCloseButton={false}
        className="flex w-[288px] flex-col gap-0 border-nav-line bg-nav-surface p-0 text-foreground"
      >
        <SheetHeader className="flex flex-none flex-row items-center justify-between border-b border-nav-line px-4 py-3">
          <SheetTitle className="flex items-center">
            <Wordmark className="h-6" />
          </SheetTitle>
          <SheetClose className="flex h-8 w-8 items-center justify-center rounded-md text-nav-hint transition-colors hover:bg-nav-hover hover:text-foreground">
            <XIcon className="h-4 w-4" />
          </SheetClose>
        </SheetHeader>

        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
          <nav className="flex flex-col gap-0.5 p-3">
            {sections.map((section, index) => (
              <MobileNavSectionView
                key={section.title || `section-${index}`}
                section={section}
                onClose={close}
                accordion={sectionAccordion}
              />
            ))}
          </nav>

          <div className="mt-auto flex flex-col gap-[3px] border-t border-nav-line p-3">
            {utilityItems.map(item => (
              <MobileNavRow key={item.label} item={item} onClose={close} />
            ))}
            <div className="mt-1 border-t border-nav-line pt-2">
              <NavUserChip
                email={email}
                className="rounded-[10px] px-2 py-1.5"
              />
            </div>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}

function MobileNavSectionView({
  section,
  onClose,
  accordion,
}: {
  section: NavSection;
  onClose: () => void;
  accordion: NavAccordion;
}) {
  const location = useLocation();
  const menuKey = section.menuKey;
  const isCollapsible = Boolean(menuKey);
  const open = menuKey ? accordion.isOpen(menuKey) : true;
  const subTrees = useNavAccordion(
    activeTreeKey(location.pathname, section.items, location.search)
  );
  const onOverview = section.to ? location.pathname === section.to : false;
  const headerRowClass =
    'group mt-3 flex w-full items-center gap-2 rounded-lg px-3 py-2 transition-colors hover:bg-nav-hover';
  const headerTitleClass = classNames(
    'text-[12px] font-bold uppercase leading-none tracking-[0.18em] transition-colors',
    onOverview ? 'text-nav-accent' : 'text-foreground'
  );
  const chevron = (
    <ChevronDownIcon
      className={classNames(
        'ml-auto h-[14px] w-[14px] text-nav-hint transition-transform',
        open ? 'rotate-180' : ''
      )}
    />
  );

  return (
    <div className="flex flex-col gap-px">
      {section.title !== '' &&
        (isCollapsible && section.to ? (
          <div className={headerRowClass}>
            <NavLink
              to={section.to}
              onClick={onClose}
              className="flex min-w-0 items-center gap-2"
            >
              <span className={headerTitleClass}>{section.title}</span>
              {section.tag && <NavTag label={section.tag} />}
            </NavLink>
            <button
              type="button"
              onClick={() => menuKey && accordion.toggle(menuKey)}
              className="ml-auto -mr-1 flex h-6 w-6 items-center justify-center rounded-md hover:bg-nav-hover"
              aria-expanded={open}
              aria-label={`Toggle ${section.title}`}
            >
              {chevron}
            </button>
          </div>
        ) : isCollapsible ? (
          <button
            type="button"
            onClick={() => menuKey && accordion.toggle(menuKey)}
            className={headerRowClass}
            aria-expanded={open}
          >
            <span className={headerTitleClass}>{section.title}</span>
            {section.tag && <NavTag label={section.tag} />}
            {chevron}
          </button>
        ) : (
          <div className="mt-3 flex items-center gap-2 px-3 py-2">
            <span className={headerTitleClass}>{section.title}</span>
            {section.tag && <NavTag label={section.tag} />}
          </div>
        ))}
      {open &&
        section.items.map(item => (
          <MobileNavRow
            key={item.label}
            item={item}
            onClose={onClose}
            accordion={subTrees}
          />
        ))}
    </div>
  );
}

function MobileNavRow({
  item,
  onClose,
  depth = 0,
  accordion,
  siblingClaims = false,
}: {
  item: NavItem;
  onClose: () => void;
  depth?: number;
  accordion?: NavAccordion;
  siblingClaims?: boolean;
}) {
  const Icon = item.icon;
  const children = item.children ?? [];
  const hasChildren = children.length > 0;
  const menuKey = item.menuKey;
  const isCollapsibleTree = hasChildren && Boolean(menuKey);
  const isSub = depth >= 1;

  const location = useLocation();
  const hasActiveDescendant = isCollapsibleTree
    ? containsActivePath(location.pathname, children)
    : false;
  const forcedActive = matchPathsActive(location.pathname, item);
  const searchActive = searchLinkActive(
    location.pathname,
    location.search,
    item
  );
  const childClaimed = queryLinkClaims(
    location.pathname,
    location.search,
    children
  );
  const treeOpen =
    isCollapsibleTree && menuKey
      ? (accordion?.isOpen(menuKey) ?? false)
      : false;
  // A page with rows under it opens them on the page itself too.
  const trees = useMemo(
    () =>
      children.map(child =>
        child.children && child.menuKey
          ? {
              ...child,
              children: [
                ...child.children,
                { label: child.label, icon: child.icon, to: child.to },
              ],
            }
          : child
      ),
    [children]
  );
  const nested = useNavAccordion(
    activeTreeKey(location.pathname, trees, location.search)
  );
  const showChildren = isCollapsibleTree ? treeOpen : true;
  const { counts } = useSeoBadges();
  const count = navCount(counts, item.to);

  const iconSize = isSub ? 'h-4 w-4' : 'h-[18px] w-[18px]';
  const rowBase = classNames(
    'flex items-center gap-2.5 rounded-[10px] font-semibold transition-colors',
    isSub ? 'px-2.5 py-2 text-[13.5px]' : 'px-3 py-2.5 text-[14px]'
  );

  if (!item.to && !hasChildren) {
    return (
      <p className="px-2.5 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-[0.04em] text-nav-hint">
        {item.label}
      </p>
    );
  }

  return (
    <div>
      {item.to && item.external ? (
        <a
          href={item.to}
          target="_blank"
          rel="noreferrer noopener"
          onClick={onClose}
          className={classNames(
            rowBase,
            'w-full text-foreground hover:bg-nav-hover'
          )}
        >
          <Icon className={classNames(iconSize, 'shrink-0')} />
          <span className="flex-1 truncate text-left">{item.label}</span>
          <ArrowUpRightIcon className="h-3 w-3 shrink-0 text-nav-hint" />
        </a>
      ) : item.to ? (
        <div className="flex items-center gap-1">
          <NavLink
            to={item.to}
            onClick={onClose}
            end={!hasChildren}
            className={({ isActive }) =>
              classNames(
                rowBase,
                'min-w-0 flex-1',
                item.emphasis
                  ? 'border border-[rgba(200,23,93,0.30)] bg-[linear-gradient(95deg,rgba(200,23,93,0.14),rgba(123,63,228,0.08))] text-foreground'
                  : (searchActive ?? (isActive && !siblingClaims)) ||
                      forcedActive
                    ? 'bg-nav-accent/12 text-nav-accent'
                    : isSub
                      ? 'text-foreground [&>svg]:text-nav-idle hover:bg-nav-hover hover:text-foreground'
                      : 'text-foreground hover:bg-nav-hover'
              )
            }
          >
            {depth < 2 && (
              <Icon
                className={classNames(
                  iconSize,
                  'shrink-0',
                  item.emphasis && 'text-nav-accent'
                )}
              />
            )}
            <span className="flex-1 truncate text-left">{item.label}</span>
            {item.tag && <NavTag label={item.tag} />}
            {item.badge && <NavBadge label={item.badge} />}
            {count && <NavCountPill {...count} />}
          </NavLink>
          {isCollapsibleTree && menuKey && (
            <button
              type="button"
              onClick={() => accordion?.toggle(menuKey)}
              aria-expanded={treeOpen}
              aria-label={`${treeOpen ? 'Collapse' : 'Expand'} ${item.label}`}
              className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] text-nav-hint transition-colors hover:bg-nav-hover"
            >
              <ChevronDownIcon
                className={classNames(
                  'h-[14px] w-[14px] transition-transform',
                  treeOpen ? 'rotate-180' : ''
                )}
              />
            </button>
          )}
        </div>
      ) : (
        <button
          type="button"
          onClick={
            isCollapsibleTree && menuKey
              ? () => accordion?.toggle(menuKey)
              : undefined
          }
          className={classNames(
            rowBase,
            'w-full hover:bg-nav-hover',
            !treeOpen && hasActiveDescendant
              ? 'text-nav-accent'
              : 'text-foreground'
          )}
          aria-expanded={isCollapsibleTree ? treeOpen : undefined}
        >
          <Icon className={classNames(iconSize, 'shrink-0')} />
          <span className="flex-1 truncate text-left">{item.label}</span>
          {item.tag && <NavTag label={item.tag} />}
          {item.badge && <NavBadge label={item.badge} />}
          {isCollapsibleTree && (
            <ChevronDownIcon
              className={classNames(
                'h-[14px] w-[14px] shrink-0 text-nav-hint transition-transform',
                treeOpen ? 'rotate-180' : ''
              )}
            />
          )}
        </button>
      )}

      {hasChildren && showChildren && (
        <div className="ml-[21px] mt-0.5 flex flex-col gap-0.5 border-l border-nav-rule pl-2.5">
          {children.map(child => (
            <MobileNavRow
              key={child.label}
              item={child}
              onClose={onClose}
              depth={depth + 1}
              accordion={nested}
              siblingClaims={childClaimed}
            />
          ))}
        </div>
      )}
    </div>
  );
}