"use client";

import { useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { 
  Loader2, 
  Plus, 
  Search, 
  Sparkles, 
  User, 
  Grid3X3, 
  Wand2,
  LayoutGrid,
  FolderOpen,
  Building2,
  Menu
} from "lucide-react";
import useSWR from "swr";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { agentService } from "@/services/agents";
import type { AgentPreset } from "@/types/agent";
import { normalizeAgentWorkflowShowcaseConfig } from "@/lib/agents/workflow-showcase-config";
import { AgentWorkflowShowcaseBanner } from "./AgentWorkflowShowcaseBanner";
import { AgentPresetCardDark } from "./AgentPresetCardDark";
import { AgentPresetDialog } from "./AgentPresetDialog";

// 导航标签类型
type NavTab = "cases" | "my-works" | "personal-assets" | "company-assets";

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

export function AgentPresetPanelDarkV2({
  selectedPresetId,
  onSelectPreset,
  onCreateClick,
  embedded = false,
  embeddedEntityLabel = "智能体",
}: AgentPresetPanelDarkV2Props) {
  const [activeTab, setActiveTab] = useState<NavTab>("cases");
  const [keyword, setKeyword] = useState("");
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [editingPreset, setEditingPreset] = useState<AgentPreset | null>(null);
  const { data: siteSettingsData } = useSWR<{ agentWorkflowShowcaseConfig?: unknown }>(
    !embedded ? "/api/site-settings" : null,
    (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 filteredPresets = useMemo(() => {
    let presets: AgentPreset[] = [];
    
    switch (activeTab) {
      case "cases":
        presets = data?.public || [];
        break;
      case "my-works":
        presets = data?.private || [];
        break;
      case "personal-assets":
        // 这里可以接入个人资产库数据
        presets = data?.private || [];
        break;
      case "company-assets":
        // 这里可以接入公司资产库数据
        presets = data?.public || [];
        break;
    }
    
    // 搜索过滤
    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;
  }, [data, activeTab, keyword]);

  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 navTabs = [
    { id: "cases" as NavTab, label: "案例广场", icon: LayoutGrid },
    { id: "my-works" as NavTab, label: "我的作品", icon: FolderOpen },
    { id: "personal-assets" as NavTab, label: "个人资产库", icon: User },
    { id: "company-assets" as NavTab, label: "公司资产库", icon: Building2 },
  ];

  // 获取当前标签标题
  const getCurrentTitle = () => {
    switch (activeTab) {
      case "cases": return "公共智能体";
      case "my-works": return "我的智能体";
      case "personal-assets": return "个人资产库";
      case "company-assets": return "公司资产库";
    }
  };

  // 嵌入模式只渲染卡片网格
  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.slice(0, 2).map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as NavTab)}
              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>

        {/* 卡片网格 */}
        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-3">
          {isLoading ? (
            <div className="flex items-center justify-center py-8 md:col-span-2 2xl:col-span-3">
              <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={handleForkPreset}
                  onEdit={setEditingPreset}
                  onDelete={handleDeletePreset}
                  index={index}
                />
              ))}
            </AnimatePresence>
          ) : (
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-8 text-center md:col-span-2 2xl:col-span-3">
              <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>

          {/* 区域标题 */}
          <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={handleForkPreset}
                    onEdit={setEditingPreset}
                    onDelete={handleDeletePreset}
                    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="智能体"
        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>
  );
}