"use client";

import { useMemo, useState } from "react";
import useSWR from "swr";
import { Loader2, Plus, Sparkles } from "lucide-react";
import { toast } from "sonner";
import { fetcher } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { agentService } from "@/services/agents";
import type { AgentPreset } from "@/types/agent";
import { AgentPresetCard } from "@/components/agents/AgentPresetCard";
import { AgentPresetDialog } from "@/components/agents/AgentPresetDialog";

interface AgentPresetPanelProps {
  selectedPresetId?: string | null;
  onSelectPreset: (presetId: string | null) => void;
}

export function AgentPresetPanel({
  selectedPresetId,
  onSelectPreset,
}: AgentPresetPanelProps) {
  const [keyword, setKeyword] = useState("");
  const [categoryFilters, setCategoryFilters] = useState({
    productCategory: "",
    audienceTag: "",
    usageScenario: "",
    brand: "",
  });
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [editingPreset, setEditingPreset] = useState<AgentPreset | null>(null);
  const { data: siteSettingsData } = useSWR<{
    agentCategoryTreeConfig?: {
      productCategories?: string[];
      audienceTags?: string[];
      usageScenarios?: string[];
      brands?: string[];
    };
    agentSecondaryTypeConfig?: {
      image?: string[];
      video?: string[];
      text?: string[];
    };
  }>("/api/site-settings", fetcher);
  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 categoryTreeConfig = useMemo(
    () => ({
      productCategories: siteSettingsData?.agentCategoryTreeConfig?.productCategories || [],
      audienceTags: siteSettingsData?.agentCategoryTreeConfig?.audienceTags || [],
      usageScenarios: siteSettingsData?.agentCategoryTreeConfig?.usageScenarios || [],
      brands: siteSettingsData?.agentCategoryTreeConfig?.brands || [],
    }),
    [siteSettingsData?.agentCategoryTreeConfig]
  );
  const secondaryTypeConfig = useMemo(
    () => ({
      image: siteSettingsData?.agentSecondaryTypeConfig?.image || [],
      video: siteSettingsData?.agentSecondaryTypeConfig?.video || [],
      text: siteSettingsData?.agentSecondaryTypeConfig?.text || [],
    }),
    [siteSettingsData?.agentSecondaryTypeConfig]
  );
  const filteredPublicPresets = useMemo(() => {
    return (data?.public || []).filter((preset) => {
      const path = preset.categoryPath || {};
      const matchedKeyword =
        !keyword.trim() ||
        preset.name.toLowerCase().includes(keyword.trim().toLowerCase()) ||
        [
          path.productCategory,
          path.audienceTag,
          path.usageScenario,
          path.brand,
        ]
          .filter(Boolean)
          .join(" ")
          .toLowerCase()
          .includes(keyword.trim().toLowerCase());
      const matchedCategory =
        (!categoryFilters.productCategory || path.productCategory === categoryFilters.productCategory) &&
        (!categoryFilters.audienceTag || path.audienceTag === categoryFilters.audienceTag) &&
        (!categoryFilters.usageScenario || path.usageScenario === categoryFilters.usageScenario) &&
        (!categoryFilters.brand || path.brand === categoryFilters.brand);
      return matchedCategory && matchedKeyword;
    });
  }, [categoryFilters, data?.public, keyword]);
  const filteredPrivatePresets = useMemo(() => {
    return (data?.private || []).filter((preset) => {
      const matchedKeyword =
        !keyword.trim() ||
        preset.name.toLowerCase().includes(keyword.trim().toLowerCase()) ||
        String(preset.category?.name || "")
          .toLowerCase()
          .includes(keyword.trim().toLowerCase());
      return matchedKeyword;
    });
  }, [data?.private, 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();
  };

  return (
    <>
      <div className="flex h-full flex-col border-r bg-white dark:bg-zinc-950">
        <div className="border-b p-4">
          <div className="mb-3 flex items-center justify-between">
            <div>
              <div className="flex items-center gap-2 text-sm font-semibold">
                <Sparkles className="h-4 w-4 text-amber-500" />
                智能体
              </div>
              <div className="mt-1 text-xs text-muted-foreground">
                选择智能体后，右侧对话框会按其要求显示上传槽位
              </div>
            </div>
            <Button size="sm" onClick={() => setShowCreateDialog(true)}>
              <Plus className="mr-1 h-4 w-4" />
              新建
            </Button>
          </div>
          <Input
            placeholder="搜索智能体"
            value={keyword}
            onChange={(event) => setKeyword(event.target.value)}
          />
        </div>

        <ScrollArea className="flex-1">
          <div className="space-y-5 p-4">
            <section className="space-y-3">
              <div className="space-y-3">
                <div className="text-sm font-medium">公共智能体</div>
                <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
                  <Select
                    value={categoryFilters.productCategory || "__none__"}
                    onValueChange={(value) =>
                      setCategoryFilters((prev) => ({
                        ...prev,
                        productCategory: value === "__none__" ? "" : value,
                      }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="产品品类" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">全部产品品类</SelectItem>
                      {categoryTreeConfig.productCategories.map((item) => (
                        <SelectItem key={item} value={item}>
                          {item}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Select
                    value={categoryFilters.audienceTag || "__none__"}
                    onValueChange={(value) =>
                      setCategoryFilters((prev) => ({
                        ...prev,
                        audienceTag: value === "__none__" ? "" : value,
                      }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="人群标签" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">全部人群标签</SelectItem>
                      {categoryTreeConfig.audienceTags.map((item) => (
                        <SelectItem key={item} value={item}>
                          {item}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Select
                    value={categoryFilters.usageScenario || "__none__"}
                    onValueChange={(value) =>
                      setCategoryFilters((prev) => ({
                        ...prev,
                        usageScenario: value === "__none__" ? "" : value,
                      }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="使用场景" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">全部使用场景</SelectItem>
                      {categoryTreeConfig.usageScenarios.map((item) => (
                        <SelectItem key={item} value={item}>
                          {item}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Select
                    value={categoryFilters.brand || "__none__"}
                    onValueChange={(value) =>
                      setCategoryFilters((prev) => ({
                        ...prev,
                        brand: value === "__none__" ? "" : value,
                      }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="品牌" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">全部品牌</SelectItem>
                      {categoryTreeConfig.brands.map((item) => (
                        <SelectItem key={item} value={item}>
                          {item}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              {isLoading ? (
                <div className="flex items-center justify-center py-8">
                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
                </div>
              ) : filteredPublicPresets.length > 0 ? (
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
                  {filteredPublicPresets.map((preset) => (
                    <AgentPresetCard
                      key={preset.id}
                      preset={preset}
                      selected={selectedPresetId === preset.id}
                      onSelect={onSelectPreset}
                      onFork={handleForkPreset}
                      onEdit={setEditingPreset}
                      onDelete={handleDeletePreset}
                    />
                  ))}
                </div>
              ) : (
                <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
                  暂无公共智能体
                </div>
              )}
            </section>

            <section className="space-y-3">
              <div className="text-sm font-medium">我的智能体</div>
              {isLoading ? null : filteredPrivatePresets.length > 0 ? (
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
                  {filteredPrivatePresets.map((preset) => (
                    <AgentPresetCard
                      key={preset.id}
                      preset={preset}
                      selected={selectedPresetId === preset.id}
                      onSelect={onSelectPreset}
                      onEdit={setEditingPreset}
                      onDelete={handleDeletePreset}
                    />
                  ))}
                </div>
              ) : (
                <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
                  还没有私有智能体，先新建一个吧
                </div>
              )}
            </section>
          </div>
        </ScrollArea>
      </div>

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