import { useMemo } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import {
  ArrowUpRightIcon,
  ChevronRightIcon,
  PanelLeftCloseIcon,
  PanelLeftIcon,
} from 'lucide-react';

import { navCount, useSeoBadges } from '../../context/seo-badges.context';
import { classNames } from '../../lib/utils';
import { SEO_NAV_SECTIONS } from '../../lib/seo/nav-sections';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import {
  activeTreeKey,
  containsActivePath,
  queryLinkClaims,
  searchLinkActive,
  type NavItem,
} from '../../lib/navigation/nav-model';
import {
  useNavAccordion,
  type NavAccordion,
} from '../../lib/navigation/use-nav-accordion';
import logo from '../../assets/logo.png';
import { canSeeSeoAnalytics } from '../../lib/seo/analytics-access';

import { creditMeterLabel } from './credit-meter';
import { buildVisibleNav, type VisibleNavOptions } from './nav-config';
import { NavCountPill } from './nav-count';
import { flattenNav } from './nav-search';
import { NavBadge, NavTag } from './nav-pills';
import NavUserChip from './nav-user-chip';
import SidebarSearch from './sidebar-search';

export interface SidebarCredits {
  used: number;
  granted: number;
}

interface SidebarProps extends VisibleNavOptions {
  className?: string;
  email?: string;
  credits?: SidebarCredits | null;
  onHide?: () => void;
}

function NavTooltip({
  description,
  children,
}: {
  description?: string;
  children: React.ReactNode;
}): React.ReactElement {
  if (!description) return <>{children}</>;
  return (
    <Tooltip>
      {children}
      <TooltipContent
        side="right"
        sideOffset={10}
        className="max-w-[264px] text-left text-[12px] leading-[1.45]"
      >
        {description}
      </TooltipContent>
    </Tooltip>
  );
}

/**
 * One 260px column: brand, search, the sections with one module open at a
 * time (the one holding the current route opens itself), then billing with
 * the month's credits and the account chip.
 */
export function Sidebar({
  className,
  email,
  credits,
  onHide,
  canSeeBulkUpload,
}: SidebarProps) {
  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 searchItems = useMemo(
    () => flattenNav(sections, utilityItems),
    [sections, utilityItems]
  );
  const location = useLocation();
  const modules = useMemo(
    () => sections.flatMap(section => section.items),
    [sections]
  );
  const accordion = useNavAccordion(
    activeTreeKey(location.pathname, modules, location.search)
  );

  return (
    <aside
      aria-label="Main navigation"
      className={classNames(
        'hidden h-full w-[260px] flex-none flex-col border-r border-nav-line bg-nav-surface px-2.5 py-3.5 md:flex',
        className
      )}
    >
      <div className="mb-2.5 flex flex-none items-center gap-2.5 pl-2.5 pr-1">
        <NavLink
          to="/dashboard"
          className="flex min-w-0 flex-1 items-center gap-2.5"
          aria-label="Recomaze home"
        >
          <img src={logo} alt="" className="h-[26px] w-[26px] shrink-0" />
          <span className="truncate text-[15px] font-semibold text-nav-foreground">
            Recomaze
          </span>
        </NavLink>
        {onHide && (
          <button
            type="button"
            onClick={onHide}
            aria-label="Hide menu"
            title="Hide menu"
            className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] text-nav-hint transition-colors hover:bg-nav-hover hover:text-nav-foreground"
          >
            <PanelLeftCloseIcon className="h-[17px] w-[17px]" />
          </button>
        )}
      </div>

      <SidebarSearch collapsed={false} items={searchItems} />

      <div className="-mx-0.5 flex min-h-0 flex-1 flex-col overflow-y-auto px-0.5">
        <nav className="flex flex-none flex-col pb-1">
          {sections.map(section => (
            <div
              key={section.menuKey ?? section.title}
              className="flex flex-col"
            >
              {section.title && (
                <p className="px-2.5 pb-1 pt-3.5 text-[12px] leading-none text-nav-hint">
                  {section.title}
                </p>
              )}
              {section.items.map(item => (
                <NavEntry
                  key={item.label}
                  item={item}
                  accordion={accordion}
                  pathname={location.pathname}
                  search={location.search}
                />
              ))}
            </div>
          ))}
        </nav>

        <SidebarFooter
          email={email}
          credits={credits}
          utilityItems={utilityItems}
          pathname={location.pathname}
        />
      </div>
    </aside>
  );
}

const navRowClasses = ({ isActive }: { isActive: boolean }): string =>
  classNames(
    'flex items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[14px] text-nav-foreground transition-colors hover:bg-nav-hover',
    isActive && 'bg-nav-hover font-medium'
  );

/** A module row carries the count of one of its pages while it is collapsed. */
const MODULE_COUNT_ROUTE: Record<string, string> = { seo: '/seo/checkup' };

/**
 * Whether a query-addressed row of the third level is the one on screen:
 * same page, and every query key it names matches the location, the
 * page's default section standing in when the URL names none.
 */
const thirdLevelActive = (
  pathname: string,
  search: string,
  to: string
): boolean => {
  const [path, query = ''] = to.split('?');
  if (pathname !== path) return false;
  const have = new URLSearchParams(search);
  for (const [key, value] of new URLSearchParams(query)) {
    const fallback =
      key === 'section' ? (SEO_NAV_SECTIONS[path]?.defaultKey ?? null) : null;
    if ((have.get(key) ?? fallback) !== value) return false;
  }
  return true;
};

function NavEntry({
  item,
  accordion,
  pathname,
  search,
}: {
  item: NavItem;
  accordion: NavAccordion;
  pathname: string;
  search: string;
}) {
  const Icon = item.icon;
  const { counts } = useSeoBadges();
  // A page with rows under it opens its rows when you are on the page
  // itself, not only on one of its rows, so the page counts as a row of its
  // own tree here.
  const trees = useMemo(
    () =>
      (item.children ?? []).map(child =>
        child.children && child.menuKey
          ? {
              ...child,
              children: [
                ...child.children,
                { label: child.label, icon: child.icon, to: child.to },
              ],
            }
          : child
      ),
    [item.children]
  );
  const nested = useNavAccordion(activeTreeKey(pathname, trees, search));

  if (!item.children) {
    return (
      <NavTooltip description={item.description}>
        <TooltipTrigger
          render={<NavLink to={item.to ?? '#'} className={navRowClasses} />}
        >
          <Icon className="h-[18px] w-[18px] shrink-0" />
          <span className="truncate">{item.label}</span>
          {item.tag && <NavTag label={item.tag} />}
          {item.badge && <NavBadge label={item.badge} />}
        </TooltipTrigger>
      </NavTooltip>
    );
  }

  const menuKey = item.menuKey ?? item.label;
  const open = accordion.isOpen(menuKey);
  // A module whose page you are on reads as selected even while collapsed;
  // the chevron says whether its list is showing, not whether it is current.
  const holdsRoute = containsActivePath(pathname, item.children);
  const claimedByQuery = queryLinkClaims(pathname, search, item.children);
  const collapsedCount = open
    ? undefined
    : navCount(counts, MODULE_COUNT_ROUTE[menuKey]);

  return (
    <div className="flex flex-col">
      <NavTooltip description={item.description}>
        <TooltipTrigger
          render={
            <button
              type="button"
              onClick={() => accordion.toggle(menuKey)}
              aria-expanded={open}
              className={classNames(
                'flex w-full items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[14px] text-nav-foreground transition-colors hover:bg-nav-hover',
                holdsRoute && 'bg-nav-hover font-medium'
              )}
            />
          }
        >
          <Icon className="h-[18px] w-[18px] shrink-0" />
          <span className="truncate">{item.label}</span>
          {item.tag && <NavTag label={item.tag} />}
          {item.badge && <NavBadge label={item.badge} />}
          {collapsedCount && <NavCountPill {...collapsedCount} />}
          <ChevronRightIcon
            className={classNames(
              'ml-auto h-[14px] w-[14px] shrink-0 text-nav-hint transition-transform',
              open && 'rotate-90'
            )}
          />
        </TooltipTrigger>
      </NavTooltip>

      {open && (
        <div className="flex flex-col pl-[30px]">
          {item.children.map(child => (
            <SubLink
              key={child.label}
              item={child}
              pathname={pathname}
              search={search}
              siblingClaims={claimedByQuery}
              nested={nested}
            />
          ))}
        </div>
      )}
    </div>
  );
}

function SubLink({
  item,
  pathname,
  search,
  siblingClaims,
  nested,
}: {
  item: NavItem;
  pathname: string;
  search: string;
  siblingClaims: boolean;
  nested: NavAccordion;
}) {
  const { counts } = useSeoBadges();
  const count = navCount(counts, item.to);
  // A link carrying a query (?tab=) decides its own active state, or every
  // sibling on the same pathname would light at once.
  const byQuery = searchLinkActive(pathname, search, item);

  if (item.children && item.menuKey) {
    return (
      <SubTree
        item={item}
        pathname={pathname}
        search={search}
        nested={nested}
        count={count}
      />
    );
  }

  if (item.external) {
    return (
      <NavTooltip description={item.description}>
        <TooltipTrigger
          render={
            <a
              href={item.to}
              target="_blank"
              rel="noreferrer noopener"
              className="flex items-center gap-2 rounded-[10px] px-2.5 py-1.5 text-[13px] text-nav-idle transition-colors hover:bg-nav-hover hover:text-nav-foreground"
            />
          }
        >
          <span className="truncate">{item.label}</span>
          <ArrowUpRightIcon className="h-3 w-3 shrink-0 text-nav-hint" />
        </TooltipTrigger>
      </NavTooltip>
    );
  }

  return (
    <NavTooltip description={item.description}>
      <TooltipTrigger
        render={
          <NavLink
            to={item.to ?? '#'}
            end
            className={({ isActive }: { isActive: boolean }) =>
              classNames(
                'flex items-center gap-2 rounded-[10px] px-2.5 py-1.5 text-[13px] transition-colors hover:bg-nav-hover',
                (byQuery ?? (isActive && !siblingClaims))
                  ? 'font-medium text-nav-foreground'
                  : 'text-nav-idle hover:text-nav-foreground'
              )
            }
          />
        }
      >
        <span className="truncate">{item.label}</span>
        {item.badge && <NavBadge label={item.badge} />}
        {count && <NavCountPill {...count} />}
      </TooltipTrigger>
    </NavTooltip>
  );
}

/**
 * A page with rows of its own under it (the checkup's groups, a settings
 * page's sections): the page link with a chevron, then the rows, open on
 * the page you are on and one at a time otherwise.
 */
function SubTree({
  item,
  pathname,
  search,
  nested,
  count,
}: {
  item: NavItem;
  pathname: string;
  search: string;
  nested: NavAccordion;
  count: ReturnType<typeof navCount>;
}) {
  const { counts } = useSeoBadges();
  const menuKey = item.menuKey ?? item.label;
  const open = nested.isOpen(menuKey);
  const page = (item.to ?? '').split('?')[0];
  const onPage = pathname === page;

  return (
    <div className="flex flex-col">
      <div className="flex items-center gap-1">
        <NavTooltip description={item.description}>
          <TooltipTrigger
            render={
              <NavLink
                to={item.to ?? '#'}
                end
                className={classNames(
                  'flex min-w-0 flex-1 items-center gap-2 rounded-[10px] px-2.5 py-1.5 text-[13px] transition-colors hover:bg-nav-hover',
                  onPage
                    ? 'font-medium text-nav-foreground'
                    : 'text-nav-idle hover:text-nav-foreground'
                )}
              />
            }
          >
            <span className="truncate">{item.label}</span>
            {count && <NavCountPill {...count} />}
          </TooltipTrigger>
        </NavTooltip>
        <button
          type="button"
          onClick={() => nested.toggle(menuKey)}
          aria-expanded={open}
          aria-label={`${open ? 'Collapse' : 'Expand'} ${item.label}`}
          className="flex h-7 w-7 flex-none items-center justify-center rounded-[8px] text-nav-hint transition-colors hover:bg-nav-hover hover:text-nav-foreground"
        >
          <ChevronRightIcon
            className={classNames(
              'h-[13px] w-[13px] transition-transform',
              open && 'rotate-90'
            )}
          />
        </button>
      </div>
      {open && (
        <div className="ml-2.5 flex flex-col border-l border-nav-line pl-2">
          {(item.children ?? []).map(child => {
            if (!child.to) {
              return (
                <p
                  key={child.label}
                  className="px-2 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-[0.04em] text-nav-hint"
                >
                  {child.label}
                </p>
              );
            }
            const active = thirdLevelActive(pathname, search, child.to);
            const childCount = navCount(counts, child.to);
            return (
              <NavTooltip key={child.label} description={child.description}>
                <TooltipTrigger
                  render={
                    <NavLink
                      to={child.to ?? '#'}
                      className={classNames(
                        'flex items-center gap-2 rounded-[8px] px-2 py-1 text-[12.5px] transition-colors hover:bg-nav-hover',
                        active
                          ? 'font-medium text-nav-foreground'
                          : 'text-nav-idle hover:text-nav-foreground'
                      )}
                    />
                  }
                >
                  <span className="truncate">{child.label}</span>
                  {childCount && <NavCountPill {...childCount} />}
                </TooltipTrigger>
              </NavTooltip>
            );
          })}
        </div>
      )}
    </div>
  );
}

function SidebarFooter({
  email,
  credits,
  utilityItems,
  pathname,
}: {
  email?: string;
  credits?: SidebarCredits | null;
  utilityItems: NavItem[];
  pathname: string;
}) {
  const pct =
    credits && credits.granted > 0
      ? Math.min(100, Math.round((credits.used / credits.granted) * 100))
      : 0;
  const billing = utilityItems[0];
  const Icon = billing?.icon;
  const active = !!billing?.to && containsActivePath(pathname, [billing]);

  return (
    <div className="mt-auto flex flex-none flex-col gap-2 pt-2">
      {billing?.to && (
        <NavLink
          to={billing.to}
          className={classNames(
            'block rounded-[10px] px-2.5 py-2 transition-colors hover:bg-nav-hover',
            active && 'bg-nav-hover'
          )}
        >
          <span className="flex items-center gap-2 text-[13px] font-medium text-nav-foreground">
            {Icon && <Icon className="h-3.5 w-3.5 shrink-0 text-nav-hint" />}
            <span className="truncate">{billing.label}</span>
          </span>
          {credits && credits.granted > 0 && (
            <>
              <p className="mt-1 text-[12px] text-nav-hint">
                {creditMeterLabel(credits.used, credits.granted)}
              </p>
              <div className="mt-1.5 h-1 overflow-hidden rounded-full bg-nav-chip">
                <div
                  className="h-full rounded-full bg-nav-accent"
                  style={{ width: `${pct}%` }}
                />
              </div>
            </>
          )}
        </NavLink>
      )}
      <div className="border-t border-nav-line pt-2">
        <NavUserChip email={email} className="px-1" />
      </div>
    </div>
  );
}

export function SidebarShowButton({ onShow }: { onShow: () => void }) {
  return (
    <button
      type="button"
      onClick={onShow}
      aria-label="Show menu"
      title="Show menu"
      className="glass fixed left-3 top-3 z-30 hidden h-9 w-9 items-center justify-center rounded-[10px] bg-nav-surface text-nav-hint transition-colors hover:bg-nav-hover hover:text-nav-foreground md:flex"
    >
      <PanelLeftIcon className="h-[17px] w-[17px]" />
    </button>
  );
}