'use client';

import { useQueryClient } from '@tanstack/react-query';
import type { LucideIcon } from 'lucide-react';
import { Activity, BookOpenText, ChartCandlestick, Eye, Landmark, LineChart, LogOut, Menu } from 'lucide-react';
import Link from 'next/link';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { authClient } from '@/lib/auth-client';
import { TaskDetailModal } from '@/components/notifications/task-detail-modal';
import { TaskNotificationsDrawer } from '@/components/notifications/task-notifications-drawer';
import { TaskNotificationsTrigger } from '@/components/notifications/task-notifications-trigger';
import {
  companyAnalysisQueryOptions,
  filingsQueryOptions,
  holdingsQueryOptions,
  latestPortfolioInsightQueryOptions,
  portfolioSummaryQueryOptions,
  recentTasksQueryOptions,
  watchlistQueryOptions
} from '@/lib/query/options';
import type { ActiveContext, NavGroup, NavItem } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { useTaskNotificationsCenter } from '@/hooks/use-task-notifications-center';
import { cn } from '@/lib/utils';

type AppShellProps = {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  activeTicker?: string | null;
  breadcrumbs?: Array<{ label: string; href?: string }>;
  children: React.ReactNode;
};

type NavConfigItem = NavItem & {
  icon: LucideIcon;
};

const NAV_ITEMS: NavConfigItem[] = [
  {
    id: 'home',
    href: '/',
    label: 'Home',
    icon: Activity,
    group: 'overview',
    matchMode: 'exact',
    mobilePrimary: true
  },
  {
    id: 'analysis',
    href: '/analysis',
    label: 'Analysis',
    icon: LineChart,
    group: 'research',
    matchMode: 'prefix',
    preserveTicker: true,
    mobilePrimary: true
  },
  {
    id: 'financials',
    href: '/financials',
    label: 'Financials',
    icon: Landmark,
    group: 'research',
    matchMode: 'exact',
    preserveTicker: true,
    mobilePrimary: false
  },
  {
    id: 'filings',
    href: '/filings',
    label: 'Filings',
    icon: BookOpenText,
    group: 'research',
    matchMode: 'exact',
    preserveTicker: true,
    mobilePrimary: true
  },
  {
    id: 'portfolio',
    href: '/portfolio',
    label: 'Portfolio',
    icon: ChartCandlestick,
    group: 'portfolio',
    matchMode: 'exact',
    mobilePrimary: true
  },
  {
    id: 'watchlist',
    href: '/watchlist',
    label: 'Watchlist',
    icon: Eye,
    group: 'portfolio',
    matchMode: 'exact',
    mobilePrimary: true
  }
];

const GROUP_LABELS: Record<NavGroup, string> = {
  overview: 'Overview',
  research: 'Research',
  portfolio: 'Portfolio'
};

function normalizeTicker(value: string | null | undefined) {
  const normalized = value?.trim().toUpperCase() ?? '';
  return normalized.length > 0 ? normalized : null;
}

function toTickerHref(baseHref: string, activeTicker: string | null) {
  if (!activeTicker) {
    return baseHref;
  }

  const separator = baseHref.includes('?') ? '&' : '?';
  return `${baseHref}${separator}ticker=${encodeURIComponent(activeTicker)}`;
}

function resolveNavHref(item: NavItem, context: ActiveContext) {
  if (!item.preserveTicker) {
    return item.href;
  }

  return toTickerHref(item.href, context.activeTicker);
}

function isItemActive(item: NavItem, pathname: string) {
  if (item.matchMode === 'prefix') {
    return pathname === item.href || pathname.startsWith(`${item.href}/`);
  }

  return pathname === item.href;
}

function buildDefaultBreadcrumbs(pathname: string, activeTicker: string | null) {
  const analysisHref = toTickerHref('/analysis', activeTicker);
  const financialsHref = toTickerHref('/financials', activeTicker);
  const filingsHref = toTickerHref('/filings', activeTicker);

  if (pathname === '/') {
    return [{ label: 'Home' }];
  }

  if (pathname.startsWith('/analysis/reports/')) {
    return [
      { label: 'Analysis', href: analysisHref },
      { label: 'Reports', href: analysisHref },
      { label: activeTicker ?? 'Summary' }
    ];
  }

  if (pathname.startsWith('/analysis')) {
    return [{ label: 'Analysis' }];
  }

  if (pathname.startsWith('/financials')) {
    return [
      { label: 'Analysis', href: analysisHref },
      { label: 'Financials' }
    ];
  }

  if (pathname.startsWith('/filings')) {
    return [
      { label: 'Analysis', href: analysisHref },
      { label: 'Filings' }
    ];
  }

  if (pathname.startsWith('/portfolio')) {
    return [{ label: 'Portfolio' }];
  }

  if (pathname.startsWith('/watchlist')) {
    return [
      { label: 'Portfolio', href: '/portfolio' },
      { label: 'Watchlist' }
    ];
  }

  return [{ label: 'Home', href: '/' }, { label: pathname }];
}

export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs, children }: AppShellProps) {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();

  const [isSigningOut, setIsSigningOut] = useState(false);
  const [isMoreOpen, setIsMoreOpen] = useState(false);
  const notifications = useTaskNotificationsCenter();
  const { data: session } = authClient.useSession();
  const sessionUser = (session?.user ?? null) as { name?: string | null; email?: string | null; role?: unknown } | null;

  const role = typeof sessionUser?.role === 'string'
    ? sessionUser.role
    : Array.isArray(sessionUser?.role)
      ? sessionUser.role.filter((entry): entry is string => typeof entry === 'string').join(', ')
      : null;

  const displayName = sessionUser?.name || sessionUser?.email || 'Authenticated user';

  const derivedTickerFromPath = useMemo(() => {
    if (!pathname.startsWith('/analysis/reports/')) {
      return null;
    }

    const segments = pathname.split('/').filter(Boolean);
    const tickerSegment = segments[2];
    return tickerSegment ? normalizeTicker(decodeURIComponent(tickerSegment)) : null;
  }, [pathname]);

  const context: ActiveContext = useMemo(() => {
    const queryTicker = normalizeTicker(searchParams.get('ticker'));

    return {
      pathname,
      activeTicker: normalizeTicker(activeTicker) ?? queryTicker ?? derivedTickerFromPath
    };
  }, [activeTicker, derivedTickerFromPath, pathname, searchParams]);

  const navEntries = useMemo(() => {
    return NAV_ITEMS.map((item) => {
      const href = resolveNavHref(item, context);
      return {
        ...item,
        href,
        active: isItemActive(item, pathname)
      };
    });
  }, [context, pathname]);

  const groupedNav = useMemo(() => {
    const groups: Array<{ group: NavGroup; items: typeof navEntries }> = [
      { group: 'overview', items: [] },
      { group: 'research', items: [] },
      { group: 'portfolio', items: [] }
    ];

    for (const entry of navEntries) {
      const group = groups.find((candidate) => candidate.group === entry.group);
      if (group) {
        group.items.push(entry);
      }
    }

    return groups;
  }, [navEntries]);

  const mobilePrimaryEntries = useMemo(() => {
    return navEntries.filter((entry) => entry.mobilePrimary);
  }, [navEntries]);

  const mobileMoreEntries = useMemo(() => {
    return navEntries.filter((entry) => !entry.mobilePrimary);
  }, [navEntries]);

  const breadcrumbItems = useMemo(() => {
    if (breadcrumbs && breadcrumbs.length > 0) {
      return breadcrumbs;
    }

    return buildDefaultBreadcrumbs(pathname, context.activeTicker);
  }, [breadcrumbs, context.activeTicker, pathname]);

  const prefetchForHref = (href: string) => {
    router.prefetch(href);

    if (href.startsWith('/analysis')) {
      if (context.activeTicker) {
        void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
      }
      return;
    }

    if (href.startsWith('/financials')) {
      if (context.activeTicker) {
        void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
      }
      return;
    }

    if (href.startsWith('/filings')) {
      void queryClient.prefetchQuery(filingsQueryOptions({
        ticker: context.activeTicker ?? undefined,
        limit: 120
      }));
      return;
    }

    if (href.startsWith('/portfolio')) {
      void queryClient.prefetchQuery(holdingsQueryOptions());
      void queryClient.prefetchQuery(portfolioSummaryQueryOptions());
      void queryClient.prefetchQuery(latestPortfolioInsightQueryOptions());
      return;
    }

    if (href.startsWith('/watchlist')) {
      void queryClient.prefetchQuery(watchlistQueryOptions());
      return;
    }

    if (href === '/') {
      void queryClient.prefetchQuery(portfolioSummaryQueryOptions());
      void queryClient.prefetchQuery(filingsQueryOptions({ limit: 200 }));
      void queryClient.prefetchQuery(watchlistQueryOptions());
      void queryClient.prefetchQuery(recentTasksQueryOptions(20));
      void queryClient.prefetchQuery(latestPortfolioInsightQueryOptions());
    }
  };

  useEffect(() => {
    const browserWindow = window as Window & {
      requestIdleCallback?: (callback: IdleRequestCallback) => number;
      cancelIdleCallback?: (handle: number) => void;
    };

    const runPrefetch = () => {
      const prioritized = navEntries.filter((entry) => entry.id === 'analysis' || entry.id === 'filings' || entry.id === 'portfolio');
      for (const entry of prioritized) {
        prefetchForHref(entry.href);
      }
    };

    if (browserWindow.requestIdleCallback) {
      const idleId = browserWindow.requestIdleCallback(() => {
        runPrefetch();
      });

      return () => {
        browserWindow.cancelIdleCallback?.(idleId);
      };
    }

    const timeoutId = window.setTimeout(() => {
      runPrefetch();
    }, 320);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [navEntries]);

  useEffect(() => {
    notifications.setIsPopoverOpen(false);
    setIsMoreOpen(false);
  }, [pathname]);

  const signOut = async () => {
    if (isSigningOut) {
      return;
    }

    setIsSigningOut(true);
    try {
      await authClient.signOut();
      router.replace('/auth/signin');
    } finally {
      setIsSigningOut(false);
    }
  };

  return (
    <div className="app-surface">
      <div className="ambient-grid" aria-hidden="true" />
      <div className="noise-layer" aria-hidden="true" />

      <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1300px] gap-6 px-4 pb-12 pt-6 md:px-8">
        <aside className="hidden w-72 shrink-0 flex-col gap-6 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_0_0_1px_rgba(0,255,180,0.06),0_20px_60px_rgba(1,4,10,0.55)] lg:flex">
          <div>
            <p className="terminal-caption text-xs uppercase tracking-[0.25em] text-[color:var(--terminal-muted)]">Fiscal Clone</p>
            <h1 className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">Neon Desk</h1>
            <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">
              Financial intelligence cockpit with durable AI workflows.
            </p>
          </div>

          <nav className="space-y-4" aria-label="Primary">
            {groupedNav.map(({ group, items }) => (
              <div key={group} className="space-y-2">
                <p className="terminal-caption px-2 text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{GROUP_LABELS[group]}</p>
                {items.map((item) => {
                  const Icon = item.icon;

                  return (
                    <Link
                      key={item.id}
                      href={item.href}
                      aria-current={item.active ? 'page' : undefined}
                      onMouseEnter={() => prefetchForHref(item.href)}
                      onFocus={() => prefetchForHref(item.href)}
                      className={cn(
                        'flex items-center gap-3 rounded-xl border px-3 py-2 text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent',
                        item.active
                          ? 'border-[color:var(--line-strong)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] shadow-[0_0_18px_rgba(0,255,180,0.16)]'
                          : 'border-transparent text-[color:var(--terminal-muted)] hover:border-[color:var(--line-weak)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)]'
                      )}
                    >
                      <Icon className="size-4" />
                      {item.label}
                    </Link>
                  );
                })}
              </div>
            ))}
          </nav>

          <div className="mt-auto rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
            <p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Runtime</p>
            <p className="mt-1 truncate text-sm text-[color:var(--terminal-bright)]">{displayName}</p>
            {role ? <p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Role: {role}</p> : null}
            <p className="mt-2 text-xs text-[color:var(--terminal-muted)]">
              AI and market data are driven by environment configuration and live API tasks.
            </p>
            <Button className="mt-3 w-full" variant="ghost" onClick={() => void signOut()} disabled={isSigningOut}>
              <LogOut className="size-4" />
              {isSigningOut ? 'Signing out...' : 'Sign out'}
            </Button>
          </div>
        </aside>

        <div className="min-w-0 flex-1 pb-24 lg:pb-0">
          <header className="mb-4 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-6 py-5 shadow-[0_0_0_1px_rgba(0,255,180,0.05),0_14px_40px_rgba(1,4,10,0.5)]">
            <div className="flex flex-wrap items-start justify-between gap-4">
              <div>
                <p className="terminal-caption text-xs uppercase tracking-[0.3em] text-[color:var(--terminal-muted)]">Live System</p>
                <h2 className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)] md:text-3xl">{title}</h2>
                {subtitle ? (
                  <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p>
                ) : null}
              </div>
              <div className="flex flex-wrap items-center gap-2">
                <TaskNotificationsTrigger
                  unreadCount={notifications.unreadCount}
                  isPopoverOpen={notifications.isPopoverOpen}
                  setIsPopoverOpen={notifications.setIsPopoverOpen}
                  activeTasks={notifications.activeTasks}
                  awaitingReviewTasks={notifications.awaitingReviewTasks}
                  openDrawer={() => notifications.setIsDrawerOpen(true)}
                  openTaskDetails={notifications.openTaskDetails}
                  silenceTask={notifications.silenceTask}
                  markTaskRead={notifications.markTaskRead}
                />
                {actions}
                <Button variant="ghost" onClick={() => void signOut()} disabled={isSigningOut}>
                  <LogOut className="size-4" />
                  {isSigningOut ? 'Signing out...' : 'Sign out'}
                </Button>
              </div>
            </div>
          </header>

          <nav
            aria-label="Breadcrumb"
            className="mb-6 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2"
          >
            <ol className="flex flex-wrap items-center gap-2 text-xs text-[color:var(--terminal-muted)]">
              {breadcrumbItems.map((item, index) => {
                const isLast = index === breadcrumbItems.length - 1;

                return (
                  <li key={`${item.label}-${index}`} className="flex items-center gap-2">
                    {item.href && !isLast ? (
                      <Link
                        href={item.href}
                        onMouseEnter={() => prefetchForHref(item.href as string)}
                        onFocus={() => prefetchForHref(item.href as string)}
                        className="rounded px-1 py-0.5 text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]"
                      >
                        {item.label}
                      </Link>
                    ) : (
                      <span className={cn(isLast ? 'text-[color:var(--terminal-bright)]' : '')} aria-current={isLast ? 'page' : undefined}>
                        {item.label}
                      </span>
                    )}
                    {!isLast ? <span aria-hidden="true">/</span> : null}
                  </li>
                );
              })}
            </ol>
          </nav>

          <main className="min-w-0 space-y-6">{children}</main>
        </div>
      </div>

      <nav
        className="fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--line-weak)] bg-[color:rgba(5,14,22,0.96)] px-2 py-2 backdrop-blur lg:hidden"
        aria-label="Mobile primary"
      >
        <div className="mx-auto flex w-full max-w-[1300px] items-center justify-between gap-1 px-1" style={{ paddingBottom: 'calc(env(safe-area-inset-bottom) * 0.5)' }}>
          {mobilePrimaryEntries.map((item) => {
            const Icon = item.icon;

            return (
              <Link
                key={item.id}
                href={item.href}
                aria-current={item.active ? 'page' : undefined}
                onMouseEnter={() => prefetchForHref(item.href)}
                onFocus={() => prefetchForHref(item.href)}
                className={cn(
                  'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-lg px-2 py-1.5 text-[11px] transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]',
                  item.active
                    ? 'bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)]'
                    : 'text-[color:var(--terminal-muted)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)]'
                )}
              >
                <Icon className="size-4" />
                <span className="truncate">{item.label}</span>
              </Link>
            );
          })}

          <TaskNotificationsTrigger
            mobile
            unreadCount={notifications.unreadCount}
            isPopoverOpen={notifications.isPopoverOpen}
            setIsPopoverOpen={notifications.setIsPopoverOpen}
            activeTasks={notifications.activeTasks}
            awaitingReviewTasks={notifications.awaitingReviewTasks}
            openDrawer={() => notifications.setIsDrawerOpen(true)}
            openTaskDetails={notifications.openTaskDetails}
            silenceTask={notifications.silenceTask}
            markTaskRead={notifications.markTaskRead}
          />

          <button
            type="button"
            aria-haspopup="dialog"
            aria-expanded={isMoreOpen}
            onClick={() => setIsMoreOpen((prev) => !prev)}
            className="flex min-w-0 flex-1 flex-col items-center gap-1 rounded-lg px-2 py-1.5 text-[11px] text-[color:var(--terminal-muted)] transition hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]"
          >
            <Menu className="size-4" />
            <span>More</span>
          </button>
        </div>
      </nav>

      {isMoreOpen ? (
        <div className="fixed inset-0 z-50 bg-[color:rgba(0,0,0,0.55)] lg:hidden" onClick={() => setIsMoreOpen(false)}>
          <div
            role="dialog"
            aria-modal="true"
            className="absolute inset-x-3 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3 shadow-[0_20px_60px_rgba(0,0,0,0.45)]"
            style={{ bottom: 'calc(4.7rem + env(safe-area-inset-bottom))' }}
            onClick={(event) => event.stopPropagation()}
          >
            <p className="terminal-caption mb-2 px-1 text-[11px] uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">More destinations</p>
            <div className="grid grid-cols-2 gap-2">
              {mobileMoreEntries.map((item) => {
                const Icon = item.icon;
                return (
                  <Link
                    key={item.id}
                    href={item.href}
                    aria-current={item.active ? 'page' : undefined}
                    onMouseEnter={() => prefetchForHref(item.href)}
                    onFocus={() => prefetchForHref(item.href)}
                    onClick={() => setIsMoreOpen(false)}
                    className={cn(
                      'flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]',
                      item.active
                        ? 'border-[color:var(--line-strong)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)]'
                        : 'border-transparent text-[color:var(--terminal-muted)] hover:border-[color:var(--line-weak)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)]'
                    )}
                  >
                    <Icon className="size-4" />
                    <span>{item.label}</span>
                  </Link>
                );
              })}
              <button
                type="button"
                onClick={() => {
                  setIsMoreOpen(false);
                  void signOut();
                }}
                className="col-span-2 flex items-center justify-center gap-2 rounded-lg border border-[color:var(--line-weak)] px-3 py-2 text-sm text-[color:var(--terminal-muted)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--terminal-bright)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]"
              >
                <LogOut className="size-4" />
                {isSigningOut ? 'Signing out...' : 'Sign out'}
              </button>
            </div>
          </div>
        </div>
      ) : null}

      <TaskNotificationsDrawer
        isOpen={notifications.isDrawerOpen}
        onClose={() => notifications.setIsDrawerOpen(false)}
        activeTasks={notifications.activeTasks}
        visibleFinishedTasks={notifications.visibleFinishedTasks}
        awaitingReviewTasks={notifications.awaitingReviewTasks}
        showReadFinished={notifications.showReadFinished}
        setShowReadFinished={notifications.setShowReadFinished}
        openTaskDetails={notifications.openTaskDetails}
        markTaskRead={notifications.markTaskRead}
        silenceTask={notifications.silenceTask}
      />

      <TaskDetailModal
        isOpen={notifications.isDetailOpen}
        taskId={notifications.detailTaskId}
        onClose={() => notifications.setIsDetailOpen(false)}
      />
    </div>
  );
}