import { Link, useRouterState, useNavigate } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import {
  LayoutDashboard, Layers, Settings, LogOut, Check, ChevronsUpDown, Bell, CreditCard,
  Store, Package, ShoppingBag, Boxes, MessageSquare, RotateCcw, BarChart3, FileText,
} from "lucide-react";
import {
  Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel,
  SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar,
} from "@/components/ui/sidebar";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
  DropdownMenuSeparator, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { getMe } from "@/lib/dashboard.functions";
import { listWorkspaces, setDefaultWorkspace } from "@/lib/workspaces.functions";
import { listMyEbayAccounts } from "@/lib/ebay.functions";
import { recordLoginEvent } from "@/lib/auth.functions";
import { performSignOut } from "@/lib/auth-helpers";
import { toast } from "sonner";

type CoreItem = {
  title: string;
  url: "/dashboard" | "/workspaces" | "/notifications" | "/subscription" | "/settings";
  icon: typeof LayoutDashboard;
};

const CORE: CoreItem[] = [
  { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
  { title: "Workspaces", url: "/workspaces", icon: Layers },
  { title: "Notifications", url: "/notifications", icon: Bell },
  { title: "Subscription", url: "/subscription", icon: CreditCard },
  { title: "Settings", url: "/settings", icon: Settings },
];

// Placeholder routes for eBay features enabled once an account is connected.
// Until Phase 2 implements them, they route back to the dashboard.
type EbayItem = { title: string; icon: typeof LayoutDashboard };
const EBAY_ITEMS: EbayItem[] = [
  { title: "eBay Accounts", icon: Store },
  { title: "Listings", icon: Package },
  { title: "Orders", icon: ShoppingBag },
  { title: "Inventory", icon: Boxes },
  { title: "Messages", icon: MessageSquare },
  { title: "Returns", icon: RotateCcw },
  { title: "Analytics", icon: BarChart3 },
  { title: "Reports", icon: FileText },
];

export function AppSidebar() {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const path = useRouterState({ select: (r) => r.location.pathname });
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const fetchMe = useServerFn(getMe);
  const fetchWorkspaces = useServerFn(listWorkspaces);
  const fetchAccounts = useServerFn(listMyEbayAccounts);
  const doSetDefault = useServerFn(setDefaultWorkspace);
  const record = useServerFn(recordLoginEvent);

  const me = useQuery({ queryKey: ["me"], queryFn: () => fetchMe({ data: undefined as never }) });
  const workspaces = useQuery({ queryKey: ["workspaces"], queryFn: () => fetchWorkspaces({ data: undefined as never }) });
  const accounts = useQuery({ queryKey: ["my-ebay-accounts"], queryFn: () => fetchAccounts({ data: undefined as never }) });
  const hasEbay = (accounts.data?.length ?? 0) > 0;

  const isActive = (p: string) => path === p || path.startsWith(p + "/");
  const current = workspaces.data?.find((w) => w.is_default) ?? workspaces.data?.[0];

  async function switchWorkspace(id: string) {
    try {
      await doSetDefault({ data: { id } });
      await queryClient.invalidateQueries();
      toast.success("Workspace switched");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Failed to switch workspace");
    }
  }

  async function handleSignOut() {
    await record({ data: { event: "logout" } }).catch(() => {});
    await performSignOut(queryClient, () => navigate({ to: "/auth", replace: true }));
  }

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <div className="flex items-center gap-2 px-2 py-1.5">
          <span className="inline-block h-6 w-6 shrink-0 rounded-md bg-primary" />
          {!collapsed && (
            <div className="min-w-0">
              <div className="truncate text-sm font-semibold">eBay BOS</div>
              <div className="truncate text-xs text-muted-foreground">{current?.name ?? "No workspace"}</div>
            </div>
          )}
        </div>

        {!collapsed && workspaces.data && workspaces.data.length > 0 && (
          <div className="px-2 pb-2">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button className="flex w-full items-center justify-between rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-accent">
                  <span className="truncate">{current?.name ?? "Select workspace"}</span>
                  <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-60" />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start" className="w-56">
                <DropdownMenuLabel className="text-xs">Switch workspace</DropdownMenuLabel>
                <DropdownMenuSeparator />
                {workspaces.data.map((w) => (
                  <DropdownMenuItem key={w.id} onClick={() => switchWorkspace(w.id)} className="flex items-center justify-between">
                    <span className="truncate">{w.name}</span>
                    {w.is_default && <Check className="h-3.5 w-3.5" />}
                  </DropdownMenuItem>
                ))}
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={() => navigate({ to: "/workspaces" })}>Manage workspaces</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Main</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {CORE.map((item) => (
                <SidebarMenuItem key={item.url}>
                  <SidebarMenuButton asChild isActive={isActive(item.url)} tooltip={item.title}>
                    <Link to={item.url} className="flex items-center gap-2">
                      <item.icon className="h-4 w-4" /><span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        {hasEbay && (
          <SidebarGroup>
            <SidebarGroupLabel>eBay</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {EBAY_ITEMS.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton asChild tooltip={item.title}>
                      <Link to="/dashboard" className="flex items-center gap-2">
                        <item.icon className="h-4 w-4" /><span>{item.title}</span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        )}

        {me.data?.isAdmin && (
          <SidebarGroup>
            <SidebarGroupLabel>Admin</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton asChild tooltip="Administrator panel">
                    <a href="/ebaybos/admin/dashboard" className="flex items-center gap-2">
                      <Settings className="h-4 w-4" /><span>Admin panel</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        )}
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton onClick={handleSignOut} tooltip="Sign out">
              <LogOut className="h-4 w-4" /><span>Sign out</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}