import { DASHBOARD_PATH } from "@/lib/deployment";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/AppSidebar";
import { PageTransition } from "@/components/PageTransition";
import { useLocation, Link } from "react-router-dom";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { useFinanceData } from "@/context/FinanceDataContext";
import { normalizeMerchant } from "@/lib/merchant";
import React from "react";
import { Eye, EyeOff, Search } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { CommandPalette } from "@/components/CommandPalette";
import { OPEN_PALETTE_EVENT } from "@/components/commandPaletteConfig";
import { isMac, MOD_LABEL } from "@/hooks/useHotkeys";
import { toggleAmountsHidden, usePrivacy } from "@/lib/privacy";
import { accountDisplayName } from "@/lib/accounts";

const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

function DynamicBreadcrumbs() {
  const location = useLocation();
  const { investmentAccounts, accounts, transactions } = useFinanceData();
  const paths = location.pathname.split("/").filter(Boolean);

  // Resolve an opaque id segment (e.g. /investments/<uuid>) to a human label so
  // the breadcrumb shows the account name instead of a raw UUID.
  const labelFor = (segment: string, index: number) => {
    const acct = investmentAccounts.find((a) => a.id === segment);
    if (acct) return acct.label;

    if (index > 0 && paths[index - 1] === "accounts") {
      const account = accounts.find((a) => a.id === segment);
      if (account) return accountDisplayName(account);
    }

    // A transaction id is the child of /transactions. Its ids look like
    // `plaid-t-0-3-2`, which the generic title-caser turned into the nonsense
    // "Plaid T 0 3 2", show the merchant, or a plain label when the row is not
    // loaded (the list is server-paged, so it often is not).
    if (index > 0 && paths[index - 1] === "transactions") {
      const txn = transactions.find((t) => t.id === segment);
      return txn ? normalizeMerchant(txn.description) : "Transaction";
    }

    if (UUID_RE.test(segment) || /^[0-9a-f]{16,}$/i.test(segment)) return "Details";
    return segment.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
  };
  
  if (location.pathname === DASHBOARD_PATH || paths.length === 0) {
    return (
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbPage>Overview</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    );
  }

  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem className="hidden md:block">
          <BreadcrumbLink asChild>
            <Link to={DASHBOARD_PATH}>Overview</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        
        {paths.map((path, index) => {
          const isLast = index === paths.length - 1;
          const to = `/${paths.slice(0, index + 1).join("/")}`;
          const title = labelFor(path, index);
          
          return (
            <React.Fragment key={to}>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                {isLast ? (
                  <BreadcrumbPage>{title}</BreadcrumbPage>
                ) : (
                  <BreadcrumbLink asChild className="hidden md:block">
                    <Link to={to}>{title}</Link>
                  </BreadcrumbLink>
                )}
              </BreadcrumbItem>
            </React.Fragment>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
}

/** Right side of the top bar: open the command palette, hide amounts. */
function TopBarActions() {
  const hidden = usePrivacy();
  return (
    <div className="ml-auto flex items-center gap-1">
      <button
        type="button"
        onClick={() => window.dispatchEvent(new Event(OPEN_PALETTE_EVENT))}
        aria-keyshortcuts={`${isMac ? "Meta" : "Control"}+K`}
        className="flex h-8 items-center gap-2 rounded-md border border-border/60 bg-background px-2.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
      >
        <Search className="h-3.5 w-3.5" />
        <span className="hidden sm:inline">Search…</span>
        <kbd className="hidden sm:inline rounded border border-border bg-muted px-1 font-mono text-[10px] leading-4">{MOD_LABEL}K</kbd>
      </button>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            type="button"
            onClick={toggleAmountsHidden}
            aria-pressed={hidden}
            aria-label={hidden ? "Show amounts" : "Hide amounts"}
            aria-keyshortcuts="Shift+H"
            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
          >
            {hidden ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
          </button>
        </TooltipTrigger>
        <TooltipContent side="bottom">{hidden ? "Show amounts" : "Hide amounts"} <span className="ml-1 opacity-60">⇧H</span></TooltipContent>
      </Tooltip>
    </div>
  );
}

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <div className="min-h-screen flex w-full">
        <AppSidebar />
        <div className="flex-1 flex flex-col min-w-0">
          <header className="h-12 flex items-center gap-2 px-4 shrink-0 border-b border-border/30 bg-background/80 backdrop-blur-sm sticky top-0 z-10 print:hidden">
            <div className="lg:hidden">
              <SidebarTrigger />
            </div>
            <DynamicBreadcrumbs />
            <TopBarActions />
          </header>
          <main id="scroll-container" className="flex-1 overflow-x-clip p-4 md:p-6 lg:p-8 relative print:overflow-visible print:p-0">
            <PageTransition>{children}</PageTransition>
          </main>
          <CommandPalette />
        </div>
      </div>
    </SidebarProvider>
  );
}