"use client";

import { useEffect, useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useSession } from "next-auth/react";
import { 
  Loader2, 
  Plus, 
  Search, 
  Sparkles, 
  Grid3X3, 
  Wand2,
  LayoutGrid,
  FolderOpen,
  Menu
} from "lucide-react";
import useSWR from "swr";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { agentService } from "@/services/agents";
import type { AgentPreset, AgentPresetLibraryCategoryNode, AgentPresetLibraryConfig } from "@/types/agent";
import { normalizeAgentWorkflowShowcaseConfig } from "@/lib/agents/workflow-showcase-config";
import {
  AGENT_PRESET_LIBRARY_DEFAULT_SECTION_ID,
  AGENT_PRESET_LIBRARY_MY_WORKS_ID,
  getEnabledAgentPresetLibraryNodes,
  getEnabledAgentPresetLibrarySections,
  normalizeAgentPresetLibraryConfig,
  resolveAgentPresetCategoryPath,
} from "@/lib/agents/preset-library-config";
import { AgentWorkflowShowcaseBanner } from "./AgentWorkflowShowcaseBanner";
import { AgentPresetCardDark } from "./AgentPresetCardDark";
import { AgentPresetDialog } from "./AgentPresetDialog";

interface AgentPresetPanelDarkV2Props {
  selectedPresetId?: string | null;
  onSelectPreset: (presetId: string | null) => void;
  onCreateClick?: () => void;
  embedded?: boolean;
  embeddedEntityLabel?: string;
}

const AGENT_PRESET_LIBRARY_ALL_MODES_ID = "__all_modes__";

export function AgentPresetPanelDarkV2({
  selectedPresetId,
  onSelectPreset,
  onCreateClick,
  embedded = false,
  embeddedEntityLabel = "风格化",
}: AgentPresetPanelDarkV2Props) {
  const { data: session } = useSession();
  const [activeTab, setActiveTab] = useState<string>(AGENT_PRESET_LIBRARY_ALL_MODES_ID);
  const [keyword, setKeyword] = useState("");
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [editingPreset, setEditingPreset] = useState<AgentPreset | null>(null);
  const [selectedLevel1Id, setSelectedLevel1Id] = useState("");
  const [selectedLevel2Id, setSelectedLevel2Id] = useState("");
  const [selectedLevel3Id, setSelectedLevel3Id] = useState("");
  const { data: siteSettingsData } = useSWR<{
    agentWorkflowShowcaseConfig?: unknown;
    agentPresetLibraryConfig?: AgentPresetLibraryConfig;
  }>(
    "/api/site-settings?scope=agent-presets",
    (url: string) => fetch(url, { cache: "no-store" }).then((res) => res.json())
  );
  
  const { data, isLoading, mutate } = useSWR(
    ["agent-presets"],
    async () => {
      const result = await agentService.getPresets({
        scope: "all",
        sort: "latest",
      });
      if (!result.success || !result.data) {
        throw new Error(result.error || "获取风格化失败");
      }
      return result.data;
    }
  );
  const presetLibraryConfig = useMemo(
    () => normalizeAgentPresetLibraryConfig(siteSettingsData?.agentPresetLibraryConfig),
    [siteSettingsData?.agentPresetLibraryConfig]
  );
  const presetLibrarySections = useMemo(
    () => getEnabledAgentPresetLibrarySections(presetLibraryConfig),
    [presetLibraryConfig]
  );
  const navTabs = useMemo(() => {
    const allModesTab = {
      id: AGENT_PRESET_LIBRARY_ALL_MODES_ID,
      label: "所有模式",
      icon: Grid3X3,
      isMyWorks: false,
      isAllModes: true,
    };
    const dynamicTabs = presetLibrarySections.map((section) => ({
      id: section.id,
      label: section.label,
      icon: LayoutGrid,
      isMyWorks: false,
      isAllModes: false,
    }));
    const myWorksTab = {
      id: AGENT_PRESET_LIBRARY_MY_WORKS_ID,
      label: "我的模式",
      icon: FolderOpen,
      isMyWorks: true,
      isAllModes: false,
    };

    if (dynamicTabs.length === 0) {
      return [allModesTab, myWorksTab];
    }

    return [allModesTab, ...dynamicTabs, myWorksTab];
  }, [presetLibrarySections]);
  const activeSection = useMemo(
    () => presetLibrarySections.find((section) => section.id === activeTab) || null,
    [activeTab, presetLibrarySections]
  );
  const level1Options = useMemo(
    () => getEnabledAgentPresetLibraryNodes(activeSection?.categories || []),
    [activeSection]
  );
  const selectedLevel1 = useMemo(
    () => level1Options.find((node) => node.id === selectedLevel1Id) || null,
    [level1Options, selectedLevel1Id]
  );
  const level2Options = useMemo(
    () => getEnabledAgentPresetLibraryNodes(selectedLevel1?.children || []),
    [selectedLevel1]
  );
  const selectedLevel2 = useMemo(
    () => level2Options.find((node) => node.id === selectedLevel2Id) || null,
    [level2Options, selectedLevel2Id]
  );
  const level3Options = useMemo(
    () => getEnabledAgentPresetLibraryNodes(selectedLevel2?.children || []),
    [selectedLevel2]
  );
  const isAllModesTab = activeTab === AGENT_PRESET_LIBRARY_ALL_MODES_ID;
  const isMyWorksTab = activeTab === AGENT_PRESET_LIBRARY_MY_WORKS_ID;
  const canManagePublicPresets =
    session?.user?.type === "admin" || session?.user?.type === "agent_admin";

  useEffect(() => {
    if (navTabs.some((tab) => tab.id === activeTab)) return;
    const nextTabId = navTabs[0]?.id || AGENT_PRESET_LIBRARY_MY_WORKS_ID;
    setActiveTab(nextTabId);
  }, [activeTab, navTabs]);

  useEffect(() => {
    setSelectedLevel1Id("");
    setSelectedLevel2Id("");
    setSelectedLevel3Id("");
  }, [activeTab]);

  useEffect(() => {
    if (!selectedLevel1Id || level1Options.some((node) => node.id === selectedLevel1Id)) return;
    setSelectedLevel1Id("");
    setSelectedLevel2Id("");
    setSelectedLevel3Id("");
  }, [level1Options, selectedLevel1Id]);

  useEffect(() => {
    if (!selectedLevel2Id || level2Options.some((node) => node.id === selectedLevel2Id)) return;
    setSelectedLevel2Id("");
    setSelectedLevel3Id("");
  }, [level2Options, selectedLevel2Id]);

  useEffect(() => {
    if (!selectedLevel3Id || level3Options.some((node) => node.id === selectedLevel3Id)) return;
    setSelectedLevel3Id("");
  }, [level3Options, selectedLevel3Id]);
  
  // 根据当前标签过滤数据
  const filteredPresets = useMemo(() => {
    let presets: AgentPreset[] = isMyWorksTab ? data?.private || [] : data?.public || [];

    if (!isMyWorksTab && !isAllModesTab) {
      const fallbackSectionId =
        presetLibrarySections.find((section) => section.id === AGENT_PRESET_LIBRARY_DEFAULT_SECTION_ID)?.id ||
        presetLibrarySections[0]?.id ||
        null;

      presets = presets.filter((preset) => {
        const resolvedPath = resolveAgentPresetCategoryPath({
          categoryPath: preset.categoryPath || null,
          config: presetLibraryConfig,
        });
        const presetSectionId = resolvedPath.sectionId || fallbackSectionId;
        if (!presetSectionId || presetSectionId !== activeTab) {
          return false;
        }
        if (selectedLevel1Id && resolvedPath.level1Id !== selectedLevel1Id) {
          return false;
        }
        if (selectedLevel2Id && resolvedPath.level2Id !== selectedLevel2Id) {
          return false;
        }
        if (selectedLevel3Id && resolvedPath.level3Id !== selectedLevel3Id) {
          return false;
        }
        return true;
      });
    }

    // 搜索过滤
    if (keyword.trim()) {
      const normalizedKeyword = keyword.trim().toLowerCase();
      presets = presets.filter((preset) =>
        [preset.name, preset.description || "", preset.type]
          .filter(Boolean)
          .some((value) => String(value).toLowerCase().includes(normalizedKeyword))
      );
    }
    
    return presets;
  }, [
    activeTab,
    data,
    isAllModesTab,
    isMyWorksTab,
    keyword,
    presetLibraryConfig,
    presetLibrarySections,
    selectedLevel1Id,
    selectedLevel2Id,
    selectedLevel3Id,
  ]);

  const handleForkPreset = async (preset: AgentPreset) => {
    const result = await agentService.forkPreset(preset.id, `${preset.name}（副本）`);
    if (!result.success || !result.data) {
      toast.error(result.error || "复制风格化失败");
      return;
    }
    toast.success("已另存为我的风格化");
    await mutate();
    onSelectPreset(result.data.id);
  };

  const handleDeletePreset = async (preset: AgentPreset) => {
    if (!window.confirm(`确定删除风格化「${preset.name}」吗？`)) {
      return;
    }
    const result = await agentService.deletePreset(preset.id);
    if (!result.success) {
      toast.error(result.error || "删除风格化失败");
      return;
    }
    toast.success("风格化已删除");
    if (selectedPresetId === preset.id) {
      onSelectPreset(null);
    }
    await mutate();
  };

  // 获取当前标签标题
  const getCurrentTitle = () => {
    if (isAllModesTab) return "所有模式";
    if (isMyWorksTab) return "我的模式";
    return activeSection?.label || "生图模式";
  };

  // 嵌入模式只渲染卡片网格
  if (embedded) {
    return (
      <>
        {/* 搜索栏 */}
        <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
            <Input
              placeholder={`搜索${embeddedEntityLabel}...`}
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              className={cn(
                "h-9 rounded-lg border-0 pl-9 pr-3 text-sm",
                "bg-white/5 text-white placeholder:text-white/30",
                "focus:bg-white/10 focus:ring-1 focus:ring-white/20"
              )}
            />
          </div>
          <Button
            type="button"
            onClick={() => (onCreateClick ? onCreateClick() : setShowCreateDialog(true))}
            className={cn(
              "h-9 shrink-0 gap-1.5 rounded-lg px-3 sm:w-auto",
              "bg-gradient-to-r from-emerald-500 to-teal-500 text-white",
              "hover:from-emerald-400 hover:to-teal-400"
            )}
          >
            <Plus className="h-4 w-4" />
            新建
          </Button>
        </div>

        {/* 导航标签（简化版） */}
        <div className="mb-4 flex flex-wrap gap-1">
          {navTabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={cn(
                "rounded-full px-3 py-1 text-xs font-medium transition-colors",
                activeTab === tab.id
                  ? "bg-white text-black"
                  : "text-white/60 hover:text-white hover:bg-white/5"
              )}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {!isMyWorksTab && !isAllModesTab ? (
          <div className="mb-4 space-y-2 rounded-2xl border border-white/8 bg-white/[0.02] p-3">
            <CategoryFilterRow
              label="一级"
              options={level1Options}
              selectedId={selectedLevel1Id}
              onSelect={(value) => {
                setSelectedLevel1Id(value);
                setSelectedLevel2Id("");
                setSelectedLevel3Id("");
              }}
            />
            {selectedLevel1 ? (
              <CategoryFilterRow
                label="二级"
                options={level2Options}
                selectedId={selectedLevel2Id}
                onSelect={(value) => {
                  setSelectedLevel2Id(value);
                  setSelectedLevel3Id("");
                }}
              />
            ) : null}
            {selectedLevel2 ? (
              <CategoryFilterRow
                label="三级"
                options={level3Options}
                selectedId={selectedLevel3Id}
                onSelect={setSelectedLevel3Id}
              />
            ) : null}
          </div>
        ) : null}

        {/* 卡片网格 */}
        <div className="grid grid-cols-1 gap-2.5 md:grid-cols-2 lg:grid-cols-3">
          {isLoading ? (
            <div className="col-span-full flex items-center justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
            </div>
          ) : filteredPresets.length > 0 ? (
            <AnimatePresence mode="popLayout">
              {filteredPresets.map((preset, index) => (
                <AgentPresetCardDark
                  key={preset.id}
                  preset={preset}
                  selected={selectedPresetId === preset.id}
                  onSelect={onSelectPreset}
                  onFork={preset.visibility === "public" && !canManagePublicPresets ? handleForkPreset : undefined}
                  onEdit={
                    preset.visibility === "private" || canManagePublicPresets
                      ? setEditingPreset
                      : undefined
                  }
                  onDelete={
                    preset.visibility === "private" || canManagePublicPresets
                      ? handleDeletePreset
                      : undefined
                  }
                  index={index}
                  compact
                />
              ))}
            </AnimatePresence>
          ) : (
            <div className="col-span-full rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-8 text-center">
              <div className="text-sm text-white/40">暂无{embeddedEntityLabel}</div>
              <Button
                type="button"
                onClick={() => (onCreateClick ? onCreateClick() : setShowCreateDialog(true))}
                className={cn(
                  "mt-4 h-9 gap-1.5 rounded-lg px-4",
                  "bg-gradient-to-r from-emerald-500 to-teal-500 text-white",
                  "hover:from-emerald-400 hover:to-teal-400"
                )}
              >
                <Plus className="h-4 w-4" />
                新建{embeddedEntityLabel}
              </Button>
            </div>
          )}
        </div>

        <AgentPresetDialog
          open={showCreateDialog || Boolean(editingPreset)}
          onOpenChange={(nextOpen) => {
            if (!nextOpen) {
              setShowCreateDialog(false);
              setEditingPreset(null);
              return;
            }
            setShowCreateDialog(true);
          }}
          initialPreset={editingPreset}
          entityLabel={embeddedEntityLabel}
          theme="dark"
          onSaved={async (preset) => {
            await mutate();
            onSelectPreset(preset.id);
            setEditingPreset(null);
            setShowCreateDialog(false);
          }}
        />
      </>
    );
  }

  return (
    <div className="min-h-screen bg-black">
      {/* 顶部固定导航栏 */}
      <header className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 bg-black/80 backdrop-blur-xl">
        <div className="mx-auto max-w-[1480px] px-6 lg:px-8 xl:px-10">
          <div className="flex h-16 items-center justify-between">
            {/* Logo & Site Name */}
            <div className="flex items-center gap-3">
              <button className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/5 text-white/60 hover:bg-white/10 hover:text-white transition-colors">
                <Menu className="h-5 w-5" />
              </button>
              <div className="flex items-center gap-2.5">
                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-purple-600">
                  <Wand2 className="h-4 w-4 text-white" />
                </div>
                <span className="text-base font-semibold text-white">AI创作平台</span>
              </div>
            </div>

            {/* 导航标签 */}
            <nav className="flex items-center gap-1 rounded-full bg-white/5 p-1">
              {navTabs.map((tab) => {
                const Icon = tab.icon;
                const isActive = activeTab === tab.id;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={cn(
                      "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all duration-300",
                      isActive
                        ? "bg-white text-black"
                        : "text-white/60 hover:text-white hover:bg-white/5"
                    )}
                  >
                    <Icon className="h-4 w-4" />
                    {tab.label}
                  </button>
                );
              })}
            </nav>

            {/* 右侧操作 */}
            <div className="flex items-center gap-3">
              <Button
                onClick={() => onCreateClick ? onCreateClick() : setShowCreateDialog(true)}
                className={cn(
                  "h-9 gap-2 rounded-full px-5",
                  "bg-white text-black hover:bg-white/90",
                  "font-medium text-sm transition-all",
                  "hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]"
                )}
              >
                <Plus className="h-4 w-4" />
                新建
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section - 视频/功能展示区 */}
      <section className="relative pt-16">
        <div className="mx-auto max-w-[1480px] px-6 py-8 lg:px-8 xl:px-10">
          <AgentWorkflowShowcaseBanner
            config={normalizeAgentWorkflowShowcaseConfig(siteSettingsData?.agentWorkflowShowcaseConfig)}
            onActionClick={() => {
              const target = document.getElementById("agent-preset-grid");
              if (!target) return;
              target.scrollIntoView({ behavior: "smooth", block: "start" });
            }}
          />
        </div>
      </section>

      {/* 风格化卡片网格区域 */}
      <section className="pb-20">
        <div id="agent-preset-grid" className="mx-auto max-w-[1480px] px-6 lg:px-8 xl:px-10">
          {/* 搜索栏 */}
          <motion.div 
            className="mb-8 flex items-center gap-4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
          >
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
              <Input
                placeholder="搜索风格化模板..."
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                className={cn(
                  "h-11 rounded-full border-0 pl-11 pr-4",
                  "bg-white/5 text-white placeholder:text-white/30",
                  "focus:bg-white/10 focus:ring-1 focus:ring-white/20",
                  "transition-all duration-300"
                )}
              />
            </div>
              <div className="flex items-center gap-2 text-sm text-white/50">
                <Grid3X3 className="h-4 w-4" />
                <span>共 {filteredPresets.length} 个</span>
              </div>
            </motion.div>

          {!isMyWorksTab && !isAllModesTab ? (
            <motion.div
              className="mb-6 space-y-2 rounded-2xl border border-white/8 bg-white/[0.02] p-4"
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.4, delay: 0.35 }}
            >
              <CategoryFilterRow
                label="一级分类"
                options={level1Options}
                selectedId={selectedLevel1Id}
                onSelect={(value) => {
                  setSelectedLevel1Id(value);
                  setSelectedLevel2Id("");
                  setSelectedLevel3Id("");
                }}
              />
              {selectedLevel1 ? (
                <CategoryFilterRow
                  label="二级分类"
                  options={level2Options}
                  selectedId={selectedLevel2Id}
                  onSelect={(value) => {
                    setSelectedLevel2Id(value);
                    setSelectedLevel3Id("");
                  }}
                />
              ) : null}
              {selectedLevel2 ? (
                <CategoryFilterRow
                  label="三级分类"
                  options={level3Options}
                  selectedId={selectedLevel3Id}
                  onSelect={setSelectedLevel3Id}
                />
              ) : null}
            </motion.div>
          ) : null}

          {/* 区域标题 */}
          <motion.div 
            className="mb-6 flex items-center gap-3"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.4 }}
          >
            <h2 className="text-lg font-semibold text-white">{getCurrentTitle()}</h2>
            <span className="rounded-full bg-white/5 px-3 py-1 text-xs text-white/50">
              {filteredPresets.length}
            </span>
          </motion.div>

          {/* 卡片网格 */}
          <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
            <AnimatePresence mode="popLayout">
              {isLoading ? (
                <div className="col-span-full flex items-center justify-center py-20">
                  <Loader2 className="h-8 w-8 animate-spin text-violet-500" />
                </div>
              ) : filteredPresets.length > 0 ? (
                filteredPresets.map((preset, index) => (
                  <AgentPresetCardDark
                    key={preset.id}
                    preset={preset}
                    selected={selectedPresetId === preset.id}
                    onSelect={onSelectPreset}
                    onFork={preset.visibility === "public" && !canManagePublicPresets ? handleForkPreset : undefined}
                    onEdit={
                      preset.visibility === "private" || canManagePublicPresets
                        ? setEditingPreset
                        : undefined
                    }
                    onDelete={
                      preset.visibility === "private" || canManagePublicPresets
                        ? handleDeletePreset
                        : undefined
                    }
                    index={index}
                  />
                ))
              ) : (
                <EmptyState message={`暂无${getCurrentTitle()}`} />
              )}
            </AnimatePresence>
          </div>
        </div>
      </section>

      {/* 页脚 */}
      <footer className="border-t border-white/5 py-6">
        <div className="mx-auto max-w-[1480px] px-6 lg:px-8 xl:px-10">
          <div className="flex items-center justify-center gap-6 text-sm text-white/30">
            <a href="#" className="hover:text-white/60 transition-colors">使用协议</a>
            <a href="#" className="hover:text-white/60 transition-colors">隐私条款</a>
            <span>© 2024 AI创作平台</span>
          </div>
        </div>
      </footer>

      <AgentPresetDialog
        open={showCreateDialog || Boolean(editingPreset)}
        onOpenChange={(nextOpen) => {
          if (!nextOpen) {
            setShowCreateDialog(false);
            setEditingPreset(null);
            return;
          }
          setShowCreateDialog(true);
        }}
        initialPreset={editingPreset}
        entityLabel={embeddedEntityLabel}
        theme="dark"
        onSaved={async (preset) => {
          await mutate();
          onSelectPreset(preset.id);
          setEditingPreset(null);
          setShowCreateDialog(false);
        }}
      />
    </div>
  );
}

function EmptyState({ message }: { message: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="col-span-full flex flex-col items-center justify-center rounded-2xl border border-white/5 bg-white/[0.02] py-20"
    >
      <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-white/5">
        <Sparkles className="h-7 w-7 text-white/30" />
      </div>
      <p className="text-sm text-white/40">{message}</p>
    </motion.div>
  );
}

function CategoryFilterRow({
  label,
  options,
  selectedId,
  onSelect,
  dark = true,
}: {
  label: string;
  options: AgentPresetLibraryCategoryNode[];
  selectedId?: string;
  onSelect: (value: string) => void;
  dark?: boolean;
}) {
  if (!options.length) return null;

  return (
    <div className="flex flex-wrap items-center gap-2">
      <span className={cn("text-xs", dark ? "text-white/38" : "text-muted-foreground")}>
        {label}
      </span>
      <button
        type="button"
        onClick={() => onSelect("")}
        className={cn(
          "rounded-full border px-3 py-1 text-xs transition-colors",
          !selectedId
            ? dark
              ? "border-white/30 bg-white text-black"
              : "border-primary bg-primary/10 text-primary"
            : dark
              ? "border-white/10 bg-white/[0.03] text-white/62 hover:border-white/20 hover:text-white"
              : "border-border bg-background text-muted-foreground hover:text-foreground"
        )}
      >
        全部
      </button>
      {options.map((option) => (
        <button
          key={option.id}
          type="button"
          onClick={() => onSelect(option.id)}
          className={cn(
            "rounded-full border px-3 py-1 text-xs transition-colors",
            selectedId === option.id
              ? dark
                ? "border-emerald-300/35 bg-emerald-300/90 text-black"
                : "border-primary bg-primary/10 text-primary"
              : dark
                ? "border-white/10 bg-white/[0.03] text-white/62 hover:border-white/20 hover:text-white"
                : "border-border bg-background text-muted-foreground hover:text-foreground"
          )}
        >
          {option.name}
        </button>
      ))}
    </div>
  );
}