ai-chatbot/components/agents/AgentWorkflowBrandModelPicker.tsx

"use client";

import { useMemo } from "react";
import useSWR from "swr";
import { Check, ImageIcon, UserRound } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn, fetcher } from "@/lib/utils";
import { normalizeAgentWorkflowBrandModelConfig } from "@/lib/agents/workflow-brand-model-config";
import type {
  AgentWorkflowBrandModelConfig,
  AgentWorkflowSelectedBrandModel,
} from "@/types/agent";

interface AgentWorkflowBrandModelPickerProps {
  brand: string;
  selectedBrandModel?: AgentWorkflowSelectedBrandModel | null;
  onSelectBrandModel: (value: AgentWorkflowSelectedBrandModel | null) => void;
}

export function AgentWorkflowBrandModelPicker({
  brand,
  selectedBrandModel = null,
  onSelectBrandModel,
}: AgentWorkflowBrandModelPickerProps) {
  const { data } = useSWR<{ agentWorkflowBrandModelConfig?: AgentWorkflowBrandModelConfig }>(
    "/api/site-settings",
    fetcher
  );

  const normalizedBrand = brand.trim();
  const config = useMemo(
    () => normalizeAgentWorkflowBrandModelConfig(data?.agentWorkflowBrandModelConfig),
    [data?.agentWorkflowBrandModelConfig]
  );
  const matchedEntry = useMemo(
    () =>
      config.entries.find(
        (entry) => entry.brandName.toLowerCase() === normalizedBrand.toLowerCase()
      ) || null,
    [config.entries, normalizedBrand]
  );
  const images = matchedEntry?.images || [];

  return (
    <section className="space-y-3 rounded-2xl border border-[#dbe3ff] bg-[#f8faff] p-3">
      <div className="space-y-1">
        <div className="flex items-center gap-2 text-sm font-medium text-[#334155]">
          <UserRound className="h-4 w-4 text-[#4f46e5]" />
          <span>品牌模特选择</span>
        </div>
        <div className="text-xs leading-5 text-[#5b6472]">
          根据第一步选择的品牌，展示管理员预先上传的模特图。选中后会自动带入右侧“模特图”槽位。
        </div>
      </div>

      {!normalizedBrand ? (
        <div className="flex min-h-[124px] flex-col items-center justify-center rounded-2xl border border-dashed bg-background/60 px-4 text-center text-sm text-muted-foreground">
          <ImageIcon className="mb-2 h-5 w-5 opacity-60" />
          先回到第一步选择品牌，第二步才会按品牌展示可选模特图。
        </div>
      ) : images.length > 0 ? (
        <div className="space-y-3">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
              <span className="rounded-full bg-background px-2 py-1">品牌：{normalizedBrand}</span>
              <span className="rounded-full bg-background px-2 py-1">
                共 {images.length} 张模特图
              </span>
              {selectedBrandModel ? (
                <span className="rounded-full bg-background px-2 py-1">已选 1 张</span>
              ) : null}
            </div>
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => onSelectBrandModel(null)}
              disabled={!selectedBrandModel}
            >
              清空选择
            </Button>
          </div>

          <div className="grid grid-cols-2 gap-3 xl:grid-cols-3">
            {images.map((image) => {
              const selected =
                selectedBrandModel?.brandName === normalizedBrand &&
                selectedBrandModel?.id === image.id;

              return (
                <button
                  key={image.id}
                  type="button"
                  onClick={() =>
                    onSelectBrandModel(
                      selected
                        ? null
                        : {
                            ...image,
                            brandName: normalizedBrand,
                          }
                    )
                  }
                  className={cn(
                    "group overflow-hidden rounded-2xl border bg-background text-left transition-all",
                    selected
                      ? "border-primary shadow-[0_0_0_1px_rgba(59,130,246,0.18)]"
                      : "border-border hover:border-primary/40 hover:shadow-sm"
                  )}
                >
                  <div className="relative aspect-square overflow-hidden bg-muted/40">
                    <img
                      src={image.imageUrl}
                      alt={image.displayName || `${normalizedBrand} 模特图`}
                      className="h-full w-full object-cover"
                      loading="lazy"
                      decoding="async"
                    />
                    <div className="absolute inset-x-0 top-0 flex items-center justify-between px-2 py-2">
                      <span className="rounded-full bg-black/60 px-2 py-1 text-[11px] text-white">
                        品牌模特
                      </span>
                      <span
                        className={cn(
                          "flex h-6 w-6 items-center justify-center rounded-full border text-white transition-colors",
                          selected
                            ? "border-primary bg-primary"
                            : "border-white/60 bg-black/35 opacity-0 group-hover:opacity-100"
                        )}
                      >
                        <Check className="h-3.5 w-3.5" />
                      </span>
                    </div>
                    <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent px-3 py-2 text-[11px] text-white">
                      {image.displayName || `${normalizedBrand} 模特图`}
                    </div>
                  </div>
                  <div className="space-y-1 px-3 py-2">
                    <div className="truncate text-xs font-medium">
                      {image.displayName || `${normalizedBrand} 模特图`}
                    </div>
                    <div className="text-[11px] text-muted-foreground">
                      点击{selected ? "取消" : "选择"}，自动进入模特图槽位
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      ) : (
        <div className="flex min-h-[124px] flex-col items-center justify-center rounded-2xl border border-dashed bg-background/60 px-4 text-center text-sm text-muted-foreground">
          <ImageIcon className="mb-2 h-5 w-5 opacity-60" />
          品牌“{normalizedBrand}”暂未配置模特图库，请到系统设置上传对应模特图。
        </div>
      )}
    </section>
  );
}