"use client";

import { Check, ImageIcon, ImagePlus, Loader2, Search, X } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import type {
  AgentWorkflowMaterialImage,
  AgentWorkflowMaterialQueryType,
  AgentWorkflowMaterialSearchResult,
  AgentWorkflowMaterialSkuOption,
} from "@/types/agent";

export type CanvasAddImageDialogImage = AgentWorkflowMaterialImage;

interface CanvasAddImageDialogProps {
  materialSearchEnabled: boolean;
  onAddImages: (images: CanvasAddImageDialogImage[]) => Promise<void> | void;
  onCreateBlankImage: () => void;
  onOpenChange: (open: boolean) => void;
  open: boolean;
}

function getMaterialSearchError(payload: any, fallback = "搜索失败") {
  const error = payload?.error;
  if (typeof error === "string") return error;
  if (error?.message) return String(error.message);
  return fallback;
}

function normalizeImages(result?: AgentWorkflowMaterialSearchResult | null) {
  return Array.isArray(result?.images)
    ? result.images.filter((image) => String(image.imageUrl || "").trim())
    : [];
}

function MaterialImageCard({
  image,
  selected,
  onToggle,
}: {
  image: AgentWorkflowMaterialImage;
  selected: boolean;
  onToggle: (id: string) => void;
}) {
  return (
    <button
      className={cn(
        "group overflow-hidden rounded-[var(--ui-radius-control)] border bg-background text-left transition-all",
        selected
          ? "border-primary shadow-[0_0_0_1px_hsl(var(--primary)/0.25)]"
          : "border-border hover:border-primary/45"
      )}
      onClick={() => onToggle(image.id)}
      type="button"
    >
      <div className="relative aspect-square bg-muted/30">
        <AgentPreviewImage
          alt={image.label || image.fileName || "白底图"}
          className="h-full w-full object-contain"
          delivery="proxy"
          previewQuality={76}
          previewWidth={520}
          src={image.previewUrl || image.imageUrl}
        />
        <div
          className={cn(
            "absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full border text-xs shadow-sm transition-colors",
            selected
              ? "border-primary bg-primary text-primary-foreground"
              : "border-white/70 bg-black/35 text-white opacity-80 group-hover:opacity-100"
          )}
        >
          {selected ? <Check className="h-3.5 w-3.5" /> : null}
        </div>
      </div>
      <div className="space-y-0.5 px-2.5 py-2">
        <div className="truncate text-[13px] font-medium">
          {image.label || image.fileName || "白底图"}
        </div>
        <div className="flex items-center justify-between gap-2 text-[11px] text-muted-foreground">
          <span>{image.group === "fixed" ? "固定角度" : "补充图"}</span>
          <span className="truncate">{image.fileName || image.key}</span>
        </div>
      </div>
    </button>
  );
}

function SkuOptionCard({
  option,
  onSelect,
}: {
  option: AgentWorkflowMaterialSkuOption;
  onSelect: (skuName: string) => void;
}) {
  return (
    <button
      className={cn(
        "flex items-center gap-2.5 rounded-[var(--ui-radius-control)] border bg-background p-2.5 text-left transition-colors",
        option.hasWhiteBackground
          ? "hover:border-primary/55 hover:bg-muted/30"
          : "cursor-not-allowed opacity-55"
      )}
      disabled={!option.hasWhiteBackground}
      onClick={() => onSelect(option.skuName)}
      type="button"
    >
      <div className="h-12 w-12 overflow-hidden rounded-[6px] border bg-muted/40">
        {option.previewImageUrl ? (
          <AgentPreviewImage
            alt={option.previewFileName || option.skuName}
            className="h-full w-full object-cover"
            previewQuality={72}
            previewWidth={180}
            src={option.previewImageUrl}
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center text-muted-foreground">
            <ImageIcon className="h-4 w-4" />
          </div>
        )}
      </div>
      <div className="min-w-0 flex-1">
        <div className="truncate text-[13px] font-medium">{option.skuName}</div>
        <div className="mt-0.5 text-[11px] text-muted-foreground">
          {option.hasWhiteBackground
            ? `${option.whiteBackgroundCount} 张白底图`
            : "暂无白底图"}
        </div>
      </div>
    </button>
  );
}

export function CanvasAddImageDialog({
  materialSearchEnabled,
  onAddImages,
  onCreateBlankImage,
  onOpenChange,
  open,
}: CanvasAddImageDialogProps) {
  const [query, setQuery] = useState("");
  const [queryMode, setQueryMode] = useState<AgentWorkflowMaterialQueryType>("spu");
  const [result, setResult] = useState<AgentWorkflowMaterialSearchResult | null>(null);
  const [selectedImageIds, setSelectedImageIds] = useState<string[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [isAdding, setIsAdding] = useState(false);
  const [errorText, setErrorText] = useState<string | null>(null);

  const images = useMemo(() => normalizeImages(result), [result]);
  const skuOptions = Array.isArray(result?.skuOptions) ? result.skuOptions : [];
  const selectedImages = useMemo(
    () => images.filter((image) => selectedImageIds.includes(image.id)),
    [images, selectedImageIds]
  );

  const resetDialogState = useCallback(() => {
    setQuery("");
    setQueryMode("spu");
    setResult(null);
    setSelectedImageIds([]);
    setErrorText(null);
  }, []);

  const handleDialogOpenChange = useCallback(
    (nextOpen: boolean) => {
      if (!nextOpen) {
        resetDialogState();
      }
      onOpenChange(nextOpen);
    },
    [onOpenChange, resetDialogState]
  );

  const closeDialog = useCallback(() => {
    resetDialogState();
    onOpenChange(false);
  }, [onOpenChange, resetDialogState]);

  const handleSearch = async (nextQuery?: string, nextMode?: AgentWorkflowMaterialQueryType) => {
    if (!materialSearchEnabled) return;
    const keyword = String(nextQuery ?? query).trim();
    const mode = nextMode || queryMode;
    if (!keyword) {
      setErrorText("请输入 SPU 或 SKU");
      return;
    }

    try {
      setIsSearching(true);
      setErrorText(null);
      const searchParams = new URLSearchParams({
        keyword,
        source: "primary",
        queryType: mode,
        appearanceRecognitionEnabled: "false",
      });
      const response = await fetch(
        `/api/agent-workflow/material-search?${searchParams.toString()}`,
        { cache: "no-store" }
      );
      const payload = await response.json().catch(() => ({}));
      if (!response.ok || payload?.success !== true || !payload?.data) {
        throw new Error(getMaterialSearchError(payload));
      }
      setResult(payload.data);
      setSelectedImageIds(
        Array.isArray(payload.data?.recommendedImageIds)
          ? payload.data.recommendedImageIds.filter((id: string) =>
              payload.data.images?.some((image: AgentWorkflowMaterialImage) => image.id === id)
            )
          : []
      );
    } catch (error) {
      setResult(null);
      setSelectedImageIds([]);
      setErrorText(error instanceof Error ? error.message : "搜索失败");
    } finally {
      setIsSearching(false);
    }
  };

  const handleSelectSku = (skuName: string) => {
    setQuery(skuName);
    setQueryMode("sku");
    void handleSearch(skuName, "sku");
  };

  const handleToggleImage = (imageId: string) => {
    setSelectedImageIds((current) =>
      current.includes(imageId)
        ? current.filter((id) => id !== imageId)
        : [...current, imageId]
    );
  };

  const handleAddSelected = async () => {
    if (!selectedImages.length) return;
    try {
      setIsAdding(true);
      await onAddImages(selectedImages);
      closeDialog();
    } finally {
      setIsAdding(false);
    }
  };

  return (
    <Dialog onOpenChange={handleDialogOpenChange} open={open}>
      <DialogContent className="max-h-[86vh] max-w-4xl overflow-hidden p-0">
        <DialogHeader className="border-b px-5 pb-3 pt-4">
          <DialogTitle className="flex items-center gap-2">
            <ImagePlus className="h-4 w-4" />
            添加图片
          </DialogTitle>
          <DialogDescription>
            添加空白图片节点，或从风格化素材库检索 SPU / SKU 白底图。
          </DialogDescription>
        </DialogHeader>

        <div className="max-h-[62vh] overflow-y-auto px-5 py-4">
          <div className="rounded-[var(--ui-radius-panel)] border bg-muted/20 p-3">
            <div className="flex flex-col gap-2.5 sm:flex-row">
              <Button
                className="h-9 justify-start gap-2"
                onClick={() => {
                  onCreateBlankImage();
                  closeDialog();
                }}
                type="button"
                variant="secondary"
              >
                <ImageIcon className="h-4 w-4" />
                空白图片节点
              </Button>

              {materialSearchEnabled ? (
                <div className="flex min-w-0 flex-1 flex-col gap-2.5 sm:flex-row">
                  <Select
                    onValueChange={(value) =>
                      setQueryMode(value === "sku" ? "sku" : "spu")
                    }
                    value={queryMode}
                  >
                    <SelectTrigger className="h-9 w-full sm:w-[108px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="spu">SPU</SelectItem>
                      <SelectItem value="sku">SKU</SelectItem>
                    </SelectContent>
                  </Select>
                  <div className="relative min-w-0 flex-1">
                    <Input
                      className="h-9 pr-9"
                      onChange={(event) => {
                        setQuery(event.target.value);
                        setErrorText(null);
                      }}
                      onKeyDown={(event) => {
                        if (event.key === "Enter") {
                          void handleSearch();
                        }
                      }}
                      placeholder={queryMode === "spu" ? "输入 SPU 查询 SKU" : "输入 SKU 查询白底图"}
                      value={query}
                    />
                    {query ? (
                      <button
                        className="-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground hover:text-foreground"
                        onClick={() => {
                          setQuery("");
                          setResult(null);
                          setSelectedImageIds([]);
                        }}
                        type="button"
                      >
                        <X className="h-4 w-4" />
                      </button>
                    ) : null}
                  </div>
                  <Button
                    className="h-9 gap-2"
                    disabled={isSearching}
                    onClick={() => void handleSearch()}
                    type="button"
                  >
                    {isSearching ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <Search className="h-4 w-4" />
                    )}
                    搜索
                  </Button>
                </div>
              ) : null}
            </div>
            {!materialSearchEnabled ? (
              <div className="mt-2.5 rounded-[var(--ui-radius-control)] border border-dashed bg-background/70 px-3 py-2 text-[12px] text-muted-foreground">
                风格化功能或素材搜索步骤未开启，当前只显示空白图片入口。
              </div>
            ) : null}
          </div>

          {errorText ? (
            <div className="mt-3 rounded-[var(--ui-radius-control)] border border-destructive/20 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
              {errorText}
            </div>
          ) : null}

          {skuOptions.length > 0 ? (
            <div className="mt-5 space-y-3">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <div className="text-[13px] font-medium">选择 SKU</div>
                  <div className="text-[11px] text-muted-foreground">
                    命中 {skuOptions.length} 个 SKU，选择有白底图的 SKU 继续拉取图片。
                  </div>
                </div>
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                {skuOptions.map((option) => (
                  <SkuOptionCard
                    key={`${option.skuName}-${option.skuId || "sku"}`}
                    onSelect={handleSelectSku}
                    option={option}
                  />
                ))}
              </div>
            </div>
          ) : null}

          {images.length > 0 ? (
            <div className="mt-5 space-y-3">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div>
                  <div className="text-[13px] font-medium">
                    白底图素材
                    {result?.matchedSku ? ` · ${result.matchedSku}` : ""}
                  </div>
                  <div className="text-[11px] text-muted-foreground">
                    共 {images.length} 张，已选 {selectedImages.length} 张。
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button
                    onClick={() => setSelectedImageIds(images.map((image) => image.id))}
                    size="sm"
                    type="button"
                    variant="outline"
                  >
                    全选
                  </Button>
                  <Button
                    disabled={!selectedImageIds.length}
                    onClick={() => setSelectedImageIds([])}
                    size="sm"
                    type="button"
                    variant="ghost"
                  >
                    清空
                  </Button>
                </div>
              </div>
              <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-4">
                {images.map((image) => (
                  <MaterialImageCard
                    image={image}
                    key={image.id}
                    onToggle={handleToggleImage}
                    selected={selectedImageIds.includes(image.id)}
                  />
                ))}
              </div>
            </div>
          ) : materialSearchEnabled && !isSearching && !skuOptions.length && result ? (
            <div className="mt-5 flex min-h-[160px] items-center justify-center rounded-[var(--ui-radius-panel)] border border-dashed text-[13px] text-muted-foreground">
              当前没有可添加的白底图。
            </div>
          ) : null}
        </div>

        <DialogFooter className="border-t px-5 py-3">
          <Button
            onClick={closeDialog}
            type="button"
            variant="outline"
          >
            取消
          </Button>
          <Button
            className="gap-2"
            disabled={!selectedImages.length || isAdding}
            onClick={() => void handleAddSelected()}
            type="button"
          >
            {isAdding ? <Loader2 className="h-4 w-4 animate-spin" /> : <ImagePlus className="h-4 w-4" />}
            添加所选{selectedImages.length ? ` (${selectedImages.length})` : ""}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}