"use client";

import { useMemo, useState } from "react";
import { Loader2, Plus, Sparkles } from "lucide-react";
import useSWR from "swr";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
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;
  embedded?: boolean;
  layout?: "fill" | "inline";
  title?: string;
  description?: string;
  searchPlaceholder?: string;
  publicTitle?: string;
  privateTitle?: string;
}

export function AgentPresetPanel({
  selectedPresetId,
  onSelectPreset,
  embedded = false,
  layout = "fill",
  title = "风格化",
  description = "选择模式后，工作台会自动加载对应槽位和生成能力",
  searchPlaceholder = "搜索风格化",
  publicTitle = "公共风格化",
  privateTitle = "我的风格化",
}: AgentPresetPanelProps) {
  const [keyword, setKeyword] = useState("");
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [editingPreset, setEditingPreset] = useState<AgentPreset | null>(null);
  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 filteredPublicPresets = useMemo(() => {
    return (data?.public || []).filter((preset) => {
      const normalizedKeyword = keyword.trim().toLowerCase();
      if (!normalizedKeyword) {
        return true;
      }

      return [preset.name, preset.description || "", preset.type]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(normalizedKeyword));
    });
  }, [data?.public, keyword]);
  const filteredPrivatePresets = useMemo(() => {
    return (data?.private || []).filter((preset) => {
      const normalizedKeyword = keyword.trim().toLowerCase();
      if (!normalizedKeyword) {
        return true;
      }

      return [preset.name, preset.description || "", preset.type]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(normalizedKeyword));
    });
  }, [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={cn(
          "flex flex-col bg-white dark:bg-zinc-950",
          layout === "fill" ? "h-full" : "h-auto",
          embedded ? "" : "border-r"
        )}
      >
        <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" />
                {title}
              </div>
              <div className="mt-1 text-xs text-muted-foreground">
                {description}
              </div>
            </div>
            <Button size="sm" onClick={() => setShowCreateDialog(true)}>
              <Plus className="mr-1 h-4 w-4" />
              新建
            </Button>
          </div>
          <Input
            placeholder={searchPlaceholder}
            value={keyword}
            onChange={(event) => setKeyword(event.target.value)}
          />
        </div>

        {layout === "fill" ? (
          <ScrollArea className="flex-1">
            <div className="space-y-5 p-4">
              <section className="space-y-3">
                <div className="text-sm font-medium">{publicTitle}</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">{privateTitle}</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 className="space-y-5 p-4">
            <section className="space-y-3">
              <div className="text-sm font-medium">{publicTitle}</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">{privateTitle}</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>
        )}
      </div>

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