"use client";

import { memo } from "react";
import { SparklesIcon } from "./icons";

// 预定义的颜色主题
const COLOR_THEMES = {
  purple: {
    ping: "bg-purple-500/20",
    pulse: "bg-purple-500/10",
    ring: "ring-purple-500/30",
    text: "text-purple-500",
    dot: "bg-purple-500",
    gradientFrom: "from-purple-400",
    gradientVia: "via-pink-400",
    gradientTo: "to-blue-400",
    overlay1From: "from-purple-500/40",
    overlay1To: "to-pink-500/40",
    overlay2From: "from-blue-500/30",
    overlay2To: "to-purple-500/30",
  },
  blue: {
    ping: "bg-blue-500/20",
    pulse: "bg-blue-500/10",
    ring: "ring-blue-500/30",
    text: "text-blue-500",
    dot: "bg-blue-500",
    gradientFrom: "from-blue-400",
    gradientVia: "via-cyan-400",
    gradientTo: "to-teal-400",
    overlay1From: "from-blue-500/40",
    overlay1To: "to-cyan-500/40",
    overlay2From: "from-teal-500/30",
    overlay2To: "to-blue-500/30",
  },
  green: {
    ping: "bg-green-500/20",
    pulse: "bg-green-500/10",
    ring: "ring-green-500/30",
    text: "text-green-500",
    dot: "bg-green-500",
    gradientFrom: "from-green-400",
    gradientVia: "via-emerald-400",
    gradientTo: "to-teal-400",
    overlay1From: "from-green-500/40",
    overlay1To: "to-emerald-500/40",
    overlay2From: "from-teal-500/30",
    overlay2To: "to-green-500/30",
  },
  orange: {
    ping: "bg-orange-500/20",
    pulse: "bg-orange-500/10",
    ring: "ring-orange-500/30",
    text: "text-orange-500",
    dot: "bg-orange-500",
    gradientFrom: "from-orange-400",
    gradientVia: "via-amber-400",
    gradientTo: "to-yellow-400",
    overlay1From: "from-orange-500/40",
    overlay1To: "to-amber-500/40",
    overlay2From: "from-yellow-500/30",
    overlay2To: "to-orange-500/30",
  },
  red: {
    ping: "bg-red-500/20",
    pulse: "bg-red-500/10",
    ring: "ring-red-500/30",
    text: "text-red-500",
    dot: "bg-red-500",
    gradientFrom: "from-red-400",
    gradientVia: "via-rose-400",
    gradientTo: "to-pink-400",
    overlay1From: "from-red-500/40",
    overlay1To: "to-rose-500/40",
    overlay2From: "from-pink-500/30",
    overlay2To: "to-red-500/30",
  },
} as const;

type ColorTheme = keyof typeof COLOR_THEMES;

interface ImageGenerationLoadingProps {
  imageCount?: number;           // 生成图片数量，默认 1
  maxImages?: number;            // 最大图片数限制，默认 6
  colorTheme?: ColorTheme;       // 颜色主题，默认 purple
  modelName?: string;            // 模型名称，用于显示
  providerType?: string;         // 提供商类型，用于自动选择颜色
  phase?: "idle" | "queued" | "processing" | "finalizing" | "failed";
  elapsedSeconds?: number;
}

/**
 * 通用图片生成加载占位符组件
 * 支持配置颜色主题和图片数量
 */
export const ImageGenerationLoading = memo(({
  imageCount = 1,
  maxImages = 6,
  colorTheme,
  modelName,
  providerType,
  phase = "processing",
  elapsedSeconds = 0,
}: ImageGenerationLoadingProps) => {
  // 根据 providerType 自动选择颜色主题
  const getAutoColorTheme = (): ColorTheme => {
    if (colorTheme) return colorTheme;
    switch (providerType) {
      case "gemini":
        return "purple";
      case "alibaba-image":
        return "orange";
      case "ruxa-image":
        return "green";
      case "volcano-vision":
        return "blue";
      default:
        return "purple";
    }
  };
  
  const theme = COLOR_THEMES[getAutoColorTheme()];
  
  // 确保数量在有效范围内
  const count = Math.min(Math.max(imageCount, 1), maxImages);
  
  // 获取显示名称
  const displayName = modelName || (providerType === "alibaba-image" ? "千问图片编辑" :
    providerType === "ruxa-image" ? "RUXA 图片编辑" :
    providerType === "volcano-vision" ? "即梦4.5" : "AI");

  const phaseTitle =
    phase === "queued"
      ? "正在排队准备生成"
      : phase === "finalizing"
      ? "图片生成完成，正在加载结果"
      : "正在生成图片";
  const phaseHint =
    phase === "queued"
      ? `${displayName} 正在排队，请稍候...`
      : phase === "finalizing"
      ? `${displayName} 正在同步结果到聊天记录...`
      : `${displayName} 正在创作 ${count} 张图片，请稍候...`;
  const elapsedLabel = elapsedSeconds > 0 ? `已等待 ${elapsedSeconds} 秒` : null;
  
  return (
    <div
      className="group/message fade-in w-full animate-in duration-300"
      data-role="assistant"
      data-testid="message-assistant-image-loading"
    >
      <div className="flex items-start justify-start gap-3">
        {/* 头像 */}
        <div className="relative -mt-1 flex size-8 shrink-0 items-center justify-center">
          <div className={`absolute inset-0 rounded-full ${theme.ping} animate-ping`} />
          <div className={`absolute inset-0 rounded-full ${theme.pulse} animate-pulse`} />
          <div className={`relative flex size-8 items-center justify-center rounded-full bg-background ring-2 ${theme.ring}`}>
            <div className={`animate-spin ${theme.text}`}>
              <SparklesIcon size={14} />
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-3">
          {/* 文本提示 */}
          <div className="flex items-center gap-1.5">
            <span className="text-base font-medium text-foreground">
              {phaseTitle}
            </span>
            <span className="flex gap-1">
              <span
                className={`h-2 w-2 rounded-full ${theme.dot} animate-bounce`}
                style={{ animationDelay: "0ms" }}
              />
              <span
                className={`h-2 w-2 rounded-full ${theme.dot} animate-bounce`}
                style={{ animationDelay: "150ms" }}
              />
              <span
                className={`h-2 w-2 rounded-full ${theme.dot} animate-bounce`}
                style={{ animationDelay: "300ms" }}
              />
            </span>
          </div>

          {/* 图片占位符 - 横向排列，每个 170x200px */}
          <div className="flex gap-3 flex-wrap">
            {Array.from({ length: count }, (_, index) => index).map((index) => (
              <div
                key={index}
                className="relative overflow-hidden rounded-xl"
                style={{ width: "170px", height: "200px" }}
              >
                {/* 底层渐变背景 */}
                <div className={`absolute inset-0 bg-gradient-to-br ${theme.gradientFrom} ${theme.gradientVia} ${theme.gradientTo} opacity-60`} />
                
                {/* 动态模糊叠加层 1 */}
                <div 
                  className={`absolute inset-0 bg-gradient-to-tr ${theme.overlay1From} via-transparent ${theme.overlay1To} animate-pulse`}
                  style={{ animationDuration: "2s", animationDelay: `${index * 0.3}s` }}
                />
                
                {/* 动态模糊叠加层 2 */}
                <div 
                  className={`absolute inset-0 bg-gradient-to-bl ${theme.overlay2From} via-transparent ${theme.overlay2To} animate-pulse`}
                  style={{ animationDuration: "2.5s", animationDelay: `${0.5 + index * 0.3}s` }}
                />
                
                {/* 噪点纹理效果 */}
                <div 
                  className="absolute inset-0 opacity-30"
                  style={{
                    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
                  }}
                />
                
                {/* 模糊叠加 */}
                <div className="absolute inset-0 backdrop-blur-sm" />
                
                {/* 中心图标 */}
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="relative">
                    {/* 外圈光晕 */}
                    <div className="absolute -inset-4 rounded-full bg-white/20 animate-ping" style={{ animationDuration: "1.5s", animationDelay: `${index * 0.2}s` }} />
                    {/* 图片图标 */}
                    <svg
                      className="h-10 w-10 text-white/80 animate-pulse"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      style={{ animationDuration: "1.5s", animationDelay: `${index * 0.2}s` }}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={1.5}
                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                      />
                    </svg>
                  </div>
                </div>
                
                {/* 流光效果 */}
                <div 
                  className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-shimmer"
                  style={{ 
                    animation: "shimmer 2s infinite",
                    animationDelay: `${index * 0.4}s`,
                  }}
                />
              </div>
            ))}
          </div>
          
          {/* 提示文字 */}
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
            <span>{phaseHint}</span>
            {elapsedLabel ? <span className="text-foreground/80">{elapsedLabel}</span> : null}
          </div>
        </div>
      </div>
      
      {/* 流光动画样式 */}
      <style jsx>{`
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
      `}</style>
    </div>
  );
});

ImageGenerationLoading.displayName = "ImageGenerationLoading";

export default ImageGenerationLoading;