"use client";

import {
  Bot,
  Boxes,
  Brain,
  ChevronLeft,
  ChevronRight,
  Clock3,
  Database,
  Wrench,
  Home,
  PlayCircle,
  Video,
} from "lucide-react";
import type { NavKey } from "./AppShell";

type SidebarProps = {
  active: NavKey;
  collapsed: boolean;
  onNavigate: (key: NavKey) => void;
  onToggle: () => void;
};

const mainItems: Array<{
  key: NavKey;
  label: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
}> = [
  { key: "home", label: "首页", icon: Home },
  { key: "test", label: "测试助手", icon: PlayCircle },
];

const componentSubItems: Array<{
  key: NavKey;
  label: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
}> = [
  { key: "components-models", label: "模型资源", icon: Brain },
  { key: "components-knowledge", label: "知识库", icon: Database },
  { key: "components-tools", label: "工具资源", icon: Wrench },
];

const monitorSubItems: Array<{
  key: NavKey;
  label: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
}> = [
  { key: "history", label: "历史记录", icon: Clock3 },
  { key: "dashboard", label: "数据看板", icon: Database },
];

export function Sidebar({
  active,
  collapsed,
  onNavigate,
  onToggle,
}: SidebarProps) {
  const assistantActive = active === "assistants";

  const componentActive =
    active === "components-models" || active === "components-knowledge" || active === "components-tools";

  const monitorActive = monitorSubItems.some((item) => item.key === active);

  return (
    <aside
      className={[
        "flex shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width]",
        collapsed ? "w-[76px]" : "w-[252px]",
      ].join(" ")}
    >
      <div className="shrink-0 flex h-16 items-center gap-3 border-b border-sidebar-border px-5 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]">
        <div
          className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-on-primary shadow-sm"
          style={{
            backgroundColor: "var(--primary)",
            backgroundImage:
              "radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gradient-sky) 70%, transparent), transparent 60%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gradient-lavender) 65%, transparent), transparent 55%)",
          }}
        >
          <Video size={22} style={{ color: "var(--primary-foreground)" }} />
        </div>

        <div
          className={[
            "min-w-0 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
            collapsed ? "w-0 opacity-0 -translate-x-2" : "w-[140px] opacity-100 translate-x-0",
          ].join(" ")}
        >
          <div className="truncate font-display text-base text-foreground">
            AI 视频助手
          </div>
        </div>
      </div>

      <nav className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 py-5 pr-2 [scrollbar-width:thin] [scrollbar-color:var(--hairline-strong)_transparent]">
        <div className="space-y-1">
          <NavButton
            active={active === "home"}
            collapsed={collapsed}
            icon={Home}
            label="首页"
            onClick={() => onNavigate("home")}
          />
          <div className="pt-2">
            <NavButton
              active={assistantActive}
              collapsed={collapsed}
              icon={Bot}
              label="创建助手"
              onClick={() => onNavigate("assistants")}
            />
          </div>

          <div className="pt-2">
            {collapsed ? (
              <div
                className="flex h-8 items-center justify-center"
                aria-hidden="true"
                title="组件库"
              >
                <span className="h-px w-6 rounded-full bg-hairline-strong" />
              </div>
            ) : (
              <div
                className={[
                  "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
                  componentActive ? "text-foreground" : "text-muted-foreground",
                ].join(" ")}
              >
                <Boxes size={18} />
                <span className="font-medium">组件库</span>
              </div>
            )}

            <div
              className={[
                "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
                collapsed ? "pl-0" : "pl-5",
              ].join(" ")}
            >
              {componentSubItems.map((item) => (
                <NavButton
                  key={item.key}
                  active={active === item.key}
                  collapsed={collapsed}
                  icon={item.icon}
                  label={item.label}
                  onClick={() => onNavigate(item.key)}
                  small
                />
              ))}
            </div>
          </div>


          <div className="pt-2">
          {collapsed ? (
              <div
                className="flex h-8 items-center justify-center"
                aria-hidden="true"
                title="监控观察"
              >
                <span className="h-px w-6 rounded-full bg-hairline-strong" />
              </div>
            ) : (
              <div
                className={[
                  "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
                  monitorActive ? "text-foreground" : "text-muted-foreground",
                ].join(" ")}
              >
                <Boxes size={18} />
                <span className="font-medium">监控观察</span>
              </div>
            )}

            <div
              className={[
                "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
                collapsed ? "pl-0" : "pl-5",
              ].join(" ")}
            >
            {monitorSubItems.map((item) => (
              <NavButton
                key={item.key}
                active={active === item.key}
                collapsed={collapsed}
                icon={item.icon}
                label={item.label}
                onClick={() => onNavigate(item.key)}
              />
            ))}
            </div>
          </div>

          <div className="pt-2">
            {mainItems.slice(1).map((item) => (
              <NavButton
                key={item.key}
                active={active === item.key}
                collapsed={collapsed}
                icon={item.icon}
                label={item.label}
                onClick={() => onNavigate(item.key)}
              />
            ))}
          </div>

        </div>
      </nav>

      <div className="shrink-0 space-y-2 border-t border-sidebar-border bg-sidebar p-3 shadow-[0_-12px_24px_rgba(0,0,0,0.12)]">
        {/* 个人中心 */}
        <button
          onClick={() => onNavigate("profile")}
          title={collapsed ? "个人中心 · 管理员" : undefined}
          className={[
            "group relative flex w-full items-center overflow-hidden rounded-2xl border py-2 text-left transition-[background-color,color,border-color,box-shadow,transform] duration-200 active:scale-[0.98]",
            active === "profile"
              ? "border-sidebar-border bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
              : "border-transparent text-muted-foreground hover:border-sidebar-border hover:bg-sidebar-accent/60 hover:text-foreground hover:shadow-sm",
            collapsed ? "justify-center gap-0 px-0" : "gap-3 px-2.5",
          ].join(" ")}
        >
          <span className="relative shrink-0">
            <span
              className="flex h-9 w-9 items-center justify-center rounded-full text-sm font-medium text-on-primary shadow-sm transition-transform duration-200 group-hover:scale-105"
              style={{
                backgroundColor: "var(--primary)",
                backgroundImage:
                  "radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gradient-sky) 70%, transparent), transparent 60%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gradient-lavender) 65%, transparent), transparent 55%)",
              }}
            >
              <span style={{ color: "var(--primary-foreground)" }}>管</span>
            </span>
            <span
              className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-sidebar"
              style={{ backgroundColor: "var(--success)" }}
            />
          </span>

          <span
            className={[
              "min-w-0 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
              collapsed ? "w-0 flex-none opacity-0 -translate-x-2" : "flex-1 opacity-100 translate-x-0",
            ].join(" ")}
          >
            <span className="block truncate text-sm font-medium text-foreground">
              管理员
            </span>
          </span>
        </button>

        {/* 收起 / 展开侧栏 */}
        <button
          onClick={onToggle}
          title={collapsed ? "展开侧栏" : "收起侧栏"}
          className={[
            "group flex h-10 w-full items-center overflow-hidden rounded-full border border-hairline-strong text-sm text-muted-foreground transition-[background-color,color,border-color,transform] duration-200 hover:bg-surface-strong hover:text-foreground active:scale-[0.98]",
            collapsed ? "justify-center gap-0 px-0" : "justify-between gap-2 px-3.5",
          ].join(" ")}
        >
          <span
            className={[
              "min-w-0 truncate transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
              collapsed ? "w-0 opacity-0 -translate-x-2" : "opacity-100 translate-x-0",
            ].join(" ")}
          >
            收起侧栏
          </span>
          <ChevronLeft
            size={18}
            className={[
              "shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-110",
              collapsed ? "rotate-180" : "rotate-0",
            ].join(" ")}
          />
        </button>
      </div>
    </aside>
  );
}

function NavButton({
  active,
  collapsed,
  icon: Icon,
  label,
  onClick,
  small = false,
}: {
  active: boolean;
  collapsed: boolean;
  icon: React.ComponentType<{ size?: number; className?: string }>;
  label: string;
  onClick: () => void;
  small?: boolean;
}) {
  return (
    <button
      onClick={onClick}
      title={collapsed ? label : undefined}
      className={[
        "group mt-1 flex w-full items-center overflow-hidden rounded-full text-sm transition-[background-color,color,transform] duration-200 active:scale-[0.98]",
        small ? "h-10" : "h-11",
        active
          ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
          : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground",
        collapsed ? "justify-center gap-0 px-0" : "gap-3 px-3 hover:translate-x-0.5",
      ].join(" ")}
    >
      <Icon
        size={small ? 16 : 18}
        className="shrink-0 transition-transform duration-200 group-hover:scale-105"
      />
      <span
        className={[
          "min-w-0 truncate transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
          collapsed ? "w-0 opacity-0 -translate-x-2" : "w-[150px] opacity-100 translate-x-0",
        ].join(" ")}
      >
        {label}
      </span>
    </button>
  );
}