"use client";

import { useEffect, useMemo, useState, type ChangeEvent } from "react";
import useSWR from "swr";
import { toast } from "sonner";
import {
  Download,
  Image as ImageIcon,
  Loader2,
  Sparkles,
  Type,
  Upload,
} from "lucide-react";
import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
  isAgentPsdImageLayerSlot,
  isAgentPsdTextLayerSlot,
  type AgentPsdTemplate,
  type AgentPsdTemplateListResponse,
  type AgentPsdTemplateRenderResponse,
} from "@/lib/agents/psd-template-config";

const fetcher = (url: string) => fetch(url, { cache: "no-store" }).then((res) => res.json());

function createInitialState(template: AgentPsdTemplate | null, sourceImageUrl: string) {
  const imageAssignments: Record<string, string> = {};
  const textAssignments: Record<string, string> = {};

  if (!template) {
    return { imageAssignments, textAssignments };
  }

  for (const layer of template.layers) {
    if (isAgentPsdImageLayerSlot(layer) && layer.isDefaultResultSource && sourceImageUrl) {
      imageAssignments[layer.id] = sourceImageUrl;
    }
    if (isAgentPsdTextLayerSlot(layer) && layer.defaultText) {
      textAssignments[layer.id] = layer.defaultText;
    }
  }

  return { imageAssignments, textAssignments };
}

export function AgentPsdTemplateEditorDialog({
  open,
  onOpenChange,
  sourceImageUrl,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  sourceImageUrl: string | null;
}) {
  const { data, isLoading } = useSWR<AgentPsdTemplateListResponse>(
    open ? "/api/psd-templates" : null,
    fetcher
  );
  const templates = useMemo(() => (data?.success ? data.templates : []), [data]);

  const [selectedTemplateId, setSelectedTemplateId] = useState<string>("");
  const [imageAssignments, setImageAssignments] = useState<Record<string, string>>({});
  const [textAssignments, setTextAssignments] = useState<Record<string, string>>({});
  const [uploadingSlotId, setUploadingSlotId] = useState<string | null>(null);
  const [isRendering, setIsRendering] = useState(false);
  const [renderedResultUrl, setRenderedResultUrl] = useState<string>("");

  const selectedTemplate = useMemo(
    () => templates.find((template) => template.id === selectedTemplateId) || null,
    [selectedTemplateId, templates]
  );

  useEffect(() => {
    if (!open) return;

    if (templates.length > 0 && !templates.some((template) => template.id === selectedTemplateId)) {
      setSelectedTemplateId(templates[0].id);
    }
  }, [open, selectedTemplateId, templates]);

  useEffect(() => {
    if (!open) return;
    setRenderedResultUrl("");
    const initialState = createInitialState(selectedTemplate, sourceImageUrl || "");
    setImageAssignments(initialState.imageAssignments);
    setTextAssignments(initialState.textAssignments);
  }, [open, selectedTemplate, sourceImageUrl]);

  async function handleSlotUpload(slotId: string, event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;

    try {
      setUploadingSlotId(slotId);
      const formData = new FormData();
      formData.set("file", file);
      const response = await fetchUploadWithRetry(formData);
      const payload = await response.json();

      if (!response.ok || !payload.url) {
        throw new Error(payload.error || "图片上传失败");
      }

      setImageAssignments((current) => ({
        ...current,
        [slotId]: payload.url,
      }));
      toast.success("素材已上传");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "素材上传失败");
    } finally {
      setUploadingSlotId(null);
      event.target.value = "";
    }
  }

  async function handleRender() {
    if (!selectedTemplate) {
      toast.error("请先选择 PSD 模板");
      return;
    }

    try {
      setIsRendering(true);
      const response = await fetch("/api/psd-templates/render", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          templateId: selectedTemplate.id,
          sourceImageUrl: sourceImageUrl || "",
          imageAssignments,
          textAssignments,
        }),
      });

      const payload = (await response.json()) as AgentPsdTemplateRenderResponse;
      if (!response.ok || !payload.success || !payload.result?.url) {
        throw new Error(payload.error || "PSD 模板渲染失败");
      }

      setRenderedResultUrl(payload.result.url);
      toast.success("套版结果已生成");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "PSD 模板渲染失败");
    } finally {
      setIsRendering(false);
    }
  }

  function handleDownload() {
    if (!renderedResultUrl) return;
    window.open(renderedResultUrl, "_blank", "noopener,noreferrer");
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] max-w-6xl overflow-hidden p-0">
        <DialogHeader className="border-b px-6 py-5">
          <DialogTitle className="flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-orange-500" />
            套用 PSD 模板
          </DialogTitle>
          <DialogDescription>
            当前结果图会自动填入默认图片槽位，文字槽位可直接输入，其他图片槽位可继续上传素材替换。
          </DialogDescription>
        </DialogHeader>

        <div className="grid min-h-0 gap-0 lg:grid-cols-[360px,minmax(0,1fr),minmax(0,1fr)]">
          <div className="border-r p-5">
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>选择模板</Label>
                <Select value={selectedTemplateId} onValueChange={setSelectedTemplateId}>
                  <SelectTrigger>
                    <SelectValue placeholder={isLoading ? "加载模板中..." : "请选择模板"} />
                  </SelectTrigger>
                  <SelectContent>
                    {templates.map((template) => (
                      <SelectItem key={template.id} value={template.id}>
                        {template.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {selectedTemplate ? (
                <>
                  <div className="overflow-hidden rounded-2xl border bg-muted/20">
                    <div className="aspect-[4/5]">
                      <img
                        src={selectedTemplate.previewUrl}
                        alt={selectedTemplate.name}
                        className="h-full w-full object-contain"
                      />
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center gap-2">
                    <Badge variant="secondary">
                      {selectedTemplate.width} x {selectedTemplate.height}
                    </Badge>
                    <Badge variant="outline">
                      {
                        selectedTemplate.layers.filter((layer) => layer.slotType === "image").length
                      }{" "}
                      个图片槽位
                    </Badge>
                    <Badge variant="outline">
                      {
                        selectedTemplate.layers.filter((layer) => layer.slotType === "text").length
                      }{" "}
                      个文字槽位
                    </Badge>
                  </div>

                  {selectedTemplate.description ? (
                    <div className="rounded-xl border p-3 text-sm text-muted-foreground">
                      {selectedTemplate.description}
                    </div>
                  ) : null}

                  <Button onClick={handleRender} disabled={isRendering} className="w-full">
                    {isRendering ? (
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    ) : (
                      <Sparkles className="mr-2 h-4 w-4" />
                    )}
                    生成套版结果
                  </Button>
                </>
              ) : (
                <div className="rounded-2xl border border-dashed p-5 text-sm text-muted-foreground">
                  {isLoading ? "正在加载可用模板..." : "当前还没有启用的 PSD 模板，请先去后台配置。"}
                </div>
              )}
            </div>
          </div>

          <div className="border-r p-5">
            <div className="mb-4">
              <div className="text-sm font-medium">槽位内容</div>
              <div className="mt-1 text-xs text-muted-foreground">
                图片槽位支持上传和套用当前结果图，文字槽位直接输入即可。
              </div>
            </div>

            <ScrollArea className="h-[65vh] pr-4">
              <div className="space-y-4">
                {selectedTemplate?.layers.length ? (
                  selectedTemplate.layers.map((layer) => {
                    if (isAgentPsdImageLayerSlot(layer)) {
                      const assignedUrl = imageAssignments[layer.id] || "";
                      const slotUploadInputId = `psd-slot-upload-${layer.id}`;

                      return (
                        <div key={layer.id} className="rounded-2xl border p-4">
                          <div className="flex flex-wrap items-center gap-2">
                            <div className="text-sm font-medium">{layer.layerName}</div>
                            <Badge variant="outline">图片槽位</Badge>
                            {layer.isRequired ? <Badge variant="destructive">必传</Badge> : null}
                            {layer.isDefaultResultSource ? (
                              <Badge variant="secondary">默认结果图</Badge>
                            ) : null}
                            <Badge variant="outline">
                              {layer.width} x {layer.height}
                            </Badge>
                          </div>
                          <div className="mt-1 text-xs text-muted-foreground">{layer.layerPath}</div>

                          {assignedUrl ? (
                            <div className="mt-3 overflow-hidden rounded-xl border bg-muted/20">
                              <div className="aspect-[4/3]">
                                <img
                                  src={assignedUrl}
                                  alt={layer.layerName}
                                  className="h-full w-full object-contain"
                                />
                              </div>
                            </div>
                          ) : (
                            <div className="mt-3 flex aspect-[4/3] items-center justify-center rounded-xl border border-dashed bg-muted/10 text-xs text-muted-foreground">
                              暂未分配素材
                            </div>
                          )}

                          <div className="mt-3 flex flex-wrap gap-2">
                            {sourceImageUrl ? (
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() =>
                                  setImageAssignments((current) => ({
                                    ...current,
                                    [layer.id]: sourceImageUrl,
                                  }))
                                }
                              >
                                使用当前结果图
                              </Button>
                            ) : null}

                            {layer.allowUserUploadOverride ? (
                              <>
                                <Input
                                  id={slotUploadInputId}
                                  className="hidden"
                                  type="file"
                                  accept="image/png,image/jpeg,image/webp"
                                  onChange={(event) => handleSlotUpload(layer.id, event)}
                                />
                                <Label htmlFor={slotUploadInputId} className="inline-flex">
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    disabled={uploadingSlotId === layer.id}
                                    onClick={(event) => {
                                      if (uploadingSlotId === layer.id) {
                                        event.preventDefault();
                                      }
                                    }}
                                  >
                                    {uploadingSlotId === layer.id ? (
                                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    ) : (
                                      <Upload className="mr-2 h-4 w-4" />
                                    )}
                                    上传替换图
                                  </Button>
                                </Label>
                              </>
                            ) : null}

                            {assignedUrl ? (
                              <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                onClick={() =>
                                  setImageAssignments((current) => {
                                    const nextAssignments = { ...current };
                                    delete nextAssignments[layer.id];
                                    return nextAssignments;
                                  })
                                }
                              >
                                清空
                              </Button>
                            ) : null}
                          </div>
                        </div>
                      );
                    }

                    const textValue = textAssignments[layer.id] || "";
                    return (
                      <div key={layer.id} className="rounded-2xl border p-4">
                        <div className="flex flex-wrap items-center gap-2">
                          <div className="text-sm font-medium">{layer.layerName}</div>
                          <Badge variant="default">文字槽位</Badge>
                          {layer.isRequired ? <Badge variant="destructive">必填</Badge> : null}
                          <Badge variant="outline">
                            {layer.width} x {layer.height}
                          </Badge>
                          {layer.fontLabel || layer.fontFamily ? (
                            <Badge variant="secondary">{layer.fontLabel || layer.fontFamily}</Badge>
                          ) : null}
                        </div>
                        <div className="mt-1 text-xs text-muted-foreground">{layer.layerPath}</div>

                        <div className="mt-3 grid gap-3">
                          <Textarea
                            rows={4}
                            value={textValue}
                            placeholder={layer.placeholder || "请输入文字"}
                            onChange={(event) =>
                              setTextAssignments((current) => ({
                                ...current,
                                [layer.id]: event.target.value,
                              }))
                            }
                          />
                          <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
                            <span>字体：{layer.fontLabel || layer.fontFamily || "系统字体"}</span>
                            <span>字号：{layer.fontSize}px</span>
                            <span>行高：{layer.lineHeight}</span>
                            <span>对齐：{layer.textAlign}</span>
                          </div>
                        </div>
                      </div>
                    );
                  })
                ) : (
                  <div className="rounded-2xl border border-dashed p-5 text-sm text-muted-foreground">
                    暂无可编辑槽位。
                  </div>
                )}
              </div>
            </ScrollArea>
          </div>

          <div className="p-5">
            <div className="mb-4">
              <div className="text-sm font-medium">套版结果</div>
              <div className="mt-1 text-xs text-muted-foreground">
                生成后可直接预览并下载结果图。
              </div>
            </div>

            {renderedResultUrl ? (
              <div className="space-y-4">
                <div className="overflow-hidden rounded-2xl border bg-muted/20">
                  <div className="aspect-[4/5]">
                    <img
                      src={renderedResultUrl}
                      alt="PSD 模板渲染结果"
                      className="h-full w-full object-contain"
                    />
                  </div>
                </div>

                <Button onClick={handleDownload} className="w-full">
                  <Download className="mr-2 h-4 w-4" />
                  下载结果图
                </Button>
              </div>
            ) : (
              <div className="flex h-[65vh] flex-col items-center justify-center rounded-2xl border border-dashed bg-muted/10 px-6 text-center">
                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-muted">
                  {selectedTemplate?.layers.some((layer) => layer.slotType === "text") ? (
                    <Type className="h-8 w-8 text-muted-foreground" />
                  ) : (
                    <ImageIcon className="h-8 w-8 text-muted-foreground" />
                  )}
                </div>
                <div className="mt-4 text-sm font-medium">结果还没生成</div>
                <div className="mt-2 text-xs leading-6 text-muted-foreground">
                  选好模板和槽位内容后点击“生成套版结果”，这里会显示导出的图片。
                </div>
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}