"use client";

import { useEffect, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
import {
  Book,
  ChevronRight,
  FileText,
  LogOut,
  Menu,
  MessageSquare,
  Search,
  User,
} from "lucide-react";
import Breadcrumb from "@/components/ui/breadcrumb";
import { cn } from "@/lib/utils";

type NavigationChild = {
  name: string;
  href: string;
};

type NavigationItem = {
  name: string;
  icon: React.ComponentType<{ className?: string }>;
  href?: string;
  children?: NavigationChild[];
  defaultOpen?: boolean;
};

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({
    knowledge: pathname.startsWith("/dashboard/knowledge"),
    "doc-processing": pathname.startsWith("/dashboard/doc-processing"),
  });

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      router.push("/login");
    }
  }, [router]);

  const handleLogout = () => {
    localStorage.removeItem("token");
    router.push("/login");
  };

  useEffect(() => {
    if (pathname.startsWith("/dashboard/knowledge")) {
      setOpenGroups((prev) => ({ ...prev, knowledge: true }));
    }
    if (pathname.startsWith("/dashboard/doc-processing")) {
      setOpenGroups((prev) => ({ ...prev, "doc-processing": true }));
    }
  }, [pathname]);

  const toggleGroup = (key: string) => {
    setOpenGroups((prev) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  const navigation: NavigationItem[] = [
    {
      name: "知识库",
      icon: Book,
      defaultOpen: true,
      children: [
        { name: "文档知识库", href: "/dashboard/knowledge/document" },
        { name: "代码知识库", href: "/dashboard/knowledge/code" },
      ],
    },
    { name: "对话", href: "/dashboard/chat", icon: MessageSquare },
    {
      name: "文档处理",
      icon: FileText,
      children: [
        { name: "需求提取", href: "/dashboard/doc-processing/extract" },
        {
          name: "测试用例生成",
          href: "/dashboard/doc-processing/test-case-gen",
        },
      ],
    },
    {
      name: "一致性分析",
      href: "/dashboard/consistency-analysis",
      icon: Search,
    },
    { name: "API 密钥", href: "/dashboard/api-keys", icon: User },
  ];

  return (
    <div className="min-h-screen bg-background">
      <div className="fixed left-0 top-0 z-50 m-4 lg:hidden">
        <button
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          className="rounded-md bg-primary p-2 text-primary-foreground"
        >
          <Menu className="h-6 w-6" />
        </button>
      </div>

      <div
        className={`fixed inset-y-0 left-0 z-40 w-64 transform border-r bg-card transition-transform duration-200 ease-in-out lg:translate-x-0 ${
          isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex h-full flex-col">
          <div className="flex h-16 items-center border-b pl-8">
            <Link
              href="/dashboard"
              className="flex items-center text-lg font-semibold transition-colors hover:text-primary"
            >
              <img src="/logo.svg" alt="标志" className="h-16 w-16 rounded-lg" />
              RAG 知识助手
            </Link>
          </div>

          <nav className="flex-1 space-y-2 px-4 py-6">
            {navigation.map((item) => {
              if (item.children) {
                const groupKey =
                  item.children[0]?.href.split("/")[2] === "knowledge"
                    ? "knowledge"
                    : "doc-processing";
                const isOpen = openGroups[groupKey] ?? item.defaultOpen ?? false;
                const hasActiveChild = item.children.some((child) =>
                  pathname.startsWith(child.href)
                );

                return (
                  <div key={item.name} className="space-y-2">
                    <button
                      type="button"
                      onClick={() => toggleGroup(groupKey)}
                      className={cn(
                        "group flex w-full items-center rounded-lg px-4 py-3 text-sm font-medium transition-all duration-200",
                        hasActiveChild
                          ? "bg-gradient-to-r from-primary/10 to-primary/5 text-primary shadow-sm"
                          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground hover:shadow-sm"
                      )}
                    >
                      <item.icon
                        className={cn(
                          "mr-3 h-5 w-5 transition-transform duration-200",
                          hasActiveChild
                            ? "scale-110 text-primary"
                            : "group-hover:scale-110"
                        )}
                      />
                      <span className="font-medium">{item.name}</span>
                      <ChevronRight
                        className={cn(
                          "ml-auto h-4 w-4 transition-transform duration-200",
                          isOpen && "rotate-90"
                        )}
                      />
                    </button>

                    {isOpen && (
                      <div className="ml-7 space-y-1 border-l pl-3">
                        {item.children.map((child) => {
                          const isChildActive = pathname.startsWith(child.href);
                          return (
                            <Link
                              key={child.name}
                              href={child.href}
                              className={cn(
                                "flex items-center rounded-md px-3 py-2 text-sm transition-colors",
                                isChildActive
                                  ? "bg-primary/10 text-primary"
                                  : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
                              )}
                            >
                              <span
                                className={cn(
                                  "mr-2 h-1.5 w-1.5 rounded-full",
                                  isChildActive
                                    ? "bg-primary"
                                    : "bg-muted-foreground/60"
                                )}
                              />
                              {child.name}
                            </Link>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              }

              const isActive = pathname.startsWith(item.href || "");

              return (
                <Link
                  key={item.name}
                  href={item.href || "/dashboard"}
                  className={cn(
                    "group flex items-center rounded-lg px-4 py-3 text-sm font-medium transition-all duration-200",
                    isActive
                      ? "bg-gradient-to-r from-primary/10 to-primary/5 text-primary shadow-sm"
                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground hover:shadow-sm"
                  )}
                >
                  <item.icon
                    className={cn(
                      "mr-3 h-5 w-5 transition-transform duration-200",
                      isActive
                        ? "scale-110 text-primary"
                        : "group-hover:scale-110"
                    )}
                  />
                  <span className="font-medium">{item.name}</span>
                  {isActive && (
                    <div className="ml-auto h-1.5 w-1.5 rounded-full bg-primary" />
                  )}
                </Link>
              );
            })}
          </nav>

          <div className="space-y-4 border-t p-4">
            <button
              onClick={handleLogout}
              className="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-destructive transition-colors duration-200 hover:bg-destructive/10"
            >
              <LogOut className="mr-3 h-4 w-4" />
              退出登录
            </button>
          </div>
        </div>
      </div>

      <div className="lg:pl-64">
        <main className="min-h-screen px-4 py-6 sm:px-6 lg:px-8">
          <Breadcrumb />
          {children}
        </main>
      </div>
    </div>
  );
}

export const dashboardConfig = {
  mainNav: [],
  sidebarNav: [
    {
      title: "文档知识库",
      href: "/dashboard/knowledge/document",
      icon: "database",
    },
    {
      title: "代码知识库",
      href: "/dashboard/knowledge/code",
      icon: "braces",
    },
    {
      title: "对话",
      href: "/dashboard/chat",
      icon: "messageSquare",
    },
    {
      title: "文档处理",
      href: "/dashboard/doc-processing/extract",
      icon: "fileText",
    },
    {
      title: "一致性分析",
      href: "/dashboard/consistency-analysis",
      icon: "search",
    },
    {
      title: "API 密钥",
      href: "/dashboard/api-keys",
      icon: "key",
    },
  ],
};