import { useState } from "react";
import { Link, Outlet, useNavigate, useRouterState } from "@tanstack/react-router";
import {
  Activity,
  Bell,
  Building2,
  Clock,
  Compass,
  FileStack,
  LayoutDashboard,
  Landmark,
  LogOut,
  Menu,
  MessageSquareText,
  PanelLeftClose,
  Search,
  SlidersHorizontal,
  Users,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { getSession, logout } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface NavItem {
  to: string;
  label: string;
  icon: LucideIcon;
  exact?: boolean;
}

const GROUPS: { title: string; items: NavItem[] }[] = [
  {
    title: "Workspace",
    items: [
      { to: "/firm", label: "Dashboard", icon: LayoutDashboard, exact: true },
      { to: "/firm/clients", label: "Clients", icon: Users },
      { to: "/firm/inbox", label: "Inbox", icon: FileStack },
      { to: "/firm/bank", label: "Bank matching", icon: Landmark },
      { to: "/firm/queries", label: "Client queries", icon: MessageSquareText },
    ],
  },
  { title: "Oversight", items: [{ to: "/firm/activity", label: "Activity", icon: Activity }] },
  {
    title: "Configuration",
    items: [{ to: "/firm/settings/rules", label: "Booking rules", icon: SlidersHorizontal }],
  },
];

export function FirmShell({ children }: { children?: React.ReactNode }) {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const navigate = useNavigate();
  const session = getSession("firm");
  const [collapsed, setCollapsed] = useState(false);
  const [drawer, setDrawer] = useState(false);

  const handleLogout = () => {
    logout("firm");
    navigate({ to: "/firm/login" });
  };

  const isActive = (item: NavItem) =>
    item.exact ? pathname === item.to : pathname === item.to || pathname.startsWith(item.to + "/");

  const crumb =
    GROUPS.flatMap((g) => g.items).find((i) => isActive(i))?.label ??
    (pathname.includes("/invoices/") ? "Invoice review" : "Firm");

  const sidebar = (
    <div className="flex h-full flex-col bg-[#FBFAF7]">
      <div
        className={cn(
          "flex shrink-0 items-center gap-3 border-b border-border/80 px-5 py-5",
          collapsed && "justify-center px-3",
        )}
      >
        <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-[0_1px_2px_rgba(27,77,62,0.18)]">
          <Compass size={19} aria-hidden="true" />
        </span>
        {!collapsed && (
          <div className="min-w-0">
            <p className="font-display text-[18px] leading-none tracking-[-0.02em] text-foreground">
              Abdelouhab
            </p>
            <p className="mt-1 inline-flex rounded-full bg-primary-soft px-2 py-0.5 text-[9px] font-bold tracking-[0.2em] text-primary uppercase">
              Firm
            </p>
          </div>
        )}
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
        <nav aria-label="Firm navigation">
          {GROUPS.map((group, groupIndex) => (
            <div key={group.title} className={cn(groupIndex > 0 && "mt-7")}>
              {!collapsed && (
                <div className="mb-2.5 flex items-center gap-2 px-2">
                  <p className="text-[10px] font-bold tracking-[0.16em] text-muted-foreground uppercase">
                    {group.title}
                  </p>
                  <span className="h-px flex-1 bg-border/70" aria-hidden="true" />
                </div>
              )}
              <ul className="space-y-1">
                {group.items.map((item) => {
                  const active = isActive(item);
                  const Icon = item.icon;
                  return (
                    <li key={item.to}>
                      <Link
                        to={item.to}
                        onClick={() => setDrawer(false)}
                        aria-current={active ? "page" : undefined}
                        title={collapsed ? item.label : undefined}
                        className={cn(
                          "group flex min-h-10 items-center gap-3 rounded-xl px-3 text-[13px] transition-all",
                          active
                            ? "bg-primary text-primary-foreground font-semibold shadow-[0_1px_2px_rgba(27,77,62,0.12)]"
                            : "font-medium text-muted-foreground hover:bg-white/80 hover:text-foreground",
                          collapsed && "justify-center px-0",
                        )}
                      >
                        <span
                          className={cn(
                            "flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors",
                            active
                              ? "bg-white/15 text-primary-foreground"
                              : "bg-white/60 text-muted-foreground group-hover:bg-white group-hover:text-foreground",
                          )}
                        >
                          <Icon size={17} aria-hidden="true" />
                        </span>
                        {!collapsed && <span className="truncate">{item.label}</span>}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}

          {!collapsed && (
            <div className="mt-6 rounded-xl border border-dashed border-border/80 bg-white/40 px-3 py-2.5">
              <p className="flex items-center gap-2 text-[11.5px] text-muted-foreground">
                <Clock size={15} aria-hidden="true" className="shrink-0" />
                <span>Reminders &amp; monthly report — later</span>
              </p>
            </div>
          )}
        </nav>
      </div>

      <div className="shrink-0 border-t border-border/80 bg-[#FBFAF7] px-3 py-3">
        <div
          className={cn(
            "flex items-center gap-3 rounded-xl border border-border/70 bg-white px-3 py-2.5 shadow-sm",
            collapsed && "justify-center border-0 bg-transparent px-0 shadow-none",
          )}
        >
          <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-soft text-[11px] font-bold text-primary">
            SA
          </span>
          {!collapsed && (
            <div className="min-w-0 flex-1">
              <p className="truncate text-[13px] font-semibold text-foreground">Sara</p>
              <p className="truncate text-[11px] text-muted-foreground">
                {session?.email ?? "Accountant"}
              </p>
            </div>
          )}
        </div>
        {!collapsed && (
          <Button
            variant="ghost"
            size="sm"
            className="mt-2 w-full justify-start gap-2 text-[12px] text-muted-foreground"
            onClick={handleLogout}
          >
            <LogOut size={15} aria-hidden="true" />
            Sign out
          </Button>
        )}
      </div>
    </div>
  );

  return (
    <div className="min-h-screen w-full overflow-x-hidden bg-background">
      <div className="mx-auto flex w-full">
        <aside
          className={cn(
            "sticky top-0 hidden h-screen shrink-0 border-r border-border/80 shadow-[inset_-1px_0_0_rgba(217,210,199,0.35)] lg:block",
            collapsed ? "w-[72px]" : "w-[248px]",
          )}
        >
          {sidebar}
        </aside>

        {drawer && (
          <div className="fixed inset-0 z-50 lg:hidden">
            <button
              className="absolute inset-0 bg-foreground/30"
              aria-label="Close navigation"
              onClick={() => setDrawer(false)}
            />
            <div className="absolute inset-y-0 left-0 w-[248px] border-r border-border/80 bg-[#FBFAF7] shadow-[inset_-1px_0_0_rgba(217,210,199,0.35)]">
              {sidebar}
            </div>
          </div>
        )}

        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-background/90 px-4 backdrop-blur md:px-8">
            <Button
              variant="ghost"
              size="icon"
              className="lg:hidden"
              aria-label="Open navigation"
              onClick={() => setDrawer(true)}
            >
              <Menu size={18} />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="hidden lg:inline-flex"
              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
              onClick={() => setCollapsed((c) => !c)}
            >
              <PanelLeftClose size={18} />
            </Button>
            <nav aria-label="Breadcrumb" className="min-w-0 text-[13px] text-muted-foreground">
              <ol className="flex items-center gap-1.5">
                <li>
                  <Link to="/firm" className="hover:text-foreground">
                    Firm
                  </Link>
                </li>
                <li aria-hidden="true">/</li>
                <li className="truncate font-medium text-foreground">{crumb}</li>
              </ol>
            </nav>
            <div className="ml-auto flex items-center gap-2">
              <div className="relative hidden md:block">
                <Search
                  size={16}
                  className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-muted-foreground"
                  aria-hidden="true"
                />
                <Input
                  placeholder="Search"
                  aria-label="Search the workspace"
                  className="h-9 w-52 bg-surface pl-8 text-[13px]"
                />
              </div>
              <Button variant="ghost" size="icon" aria-label="Notifications">
                <Bell size={18} />
              </Button>
              <span
                className="flex size-8 items-center justify-center rounded-full bg-primary-soft text-[12px] font-semibold text-primary"
                title="Sara · Accountant"
              >
                SA
              </span>
            </div>
          </header>
          <main className="min-w-0 flex-1 px-4 py-6 md:px-6 lg:px-8 lg:py-8">{children ?? <Outlet />}</main>
        </div>
      </div>
    </div>
  );
}

export function ClientShell({ children }: { children?: React.ReactNode }) {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const items = [
    { to: "/client", label: "My documents", exact: true },
    { to: "/client/upload", label: "Upload" },
    { to: "/client/queries", label: "Queries" },
  ];

  return (
    <div className="min-h-screen w-full overflow-x-hidden bg-background">
      <header className="border-b border-border bg-surface">
        <div className="mx-auto flex h-16 w-full max-w-[1200px] items-center gap-6 px-4 md:px-8">
          <div className="flex items-center gap-2">
            <span className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
              <Compass size={17} aria-hidden="true" />
            </span>
            <div>
              <p className="font-display text-[16px] leading-none">Abdelouhab</p>
              <p className="mt-1 text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
                Client portal
              </p>
            </div>
          </div>
          <nav aria-label="Client navigation" className="hidden items-center gap-1 sm:flex">
            {items.map((i) => {
              const active = i.exact ? pathname === i.to : pathname.startsWith(i.to);
              return (
                <Link
                  key={i.to}
                  to={i.to}
                  className={cn(
                    "rounded-md px-3 py-2 text-[13.5px] font-medium transition-colors",
                    active ? "bg-primary-soft text-primary" : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {i.label}
                </Link>
              );
            })}
          </nav>
          <div className="ml-auto flex items-center gap-2">
            <span className="flex items-center gap-2 rounded-full border border-border px-2.5 py-1.5">
              <Building2 size={15} className="text-primary" aria-hidden="true" />
              <span className="text-[12.5px] font-medium">Client</span>
            </span>
          </div>
        </div>
        <nav aria-label="Client navigation" className="flex gap-1 border-t border-border px-4 py-2 sm:hidden">
          {items.map((i) => (
            <Link key={i.to} to={i.to} className="rounded-md px-3 py-2 text-[13px] text-muted-foreground">
              {i.label}
            </Link>
          ))}
        </nav>
      </header>
      <main className="mx-auto w-full max-w-[1200px] px-4 py-8 md:px-8">{children ?? <Outlet />}</main>
    </div>
  );
}