import { Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

type CanvasLogoLoadingViewProps = {
  label?: string;
  siteName?: string | null;
  siteLogo?: string | null;
  siteLogoDark?: string | null;
};

export function CanvasLogoLoadingView({
  label = "正在加载画布...",
  siteName = "AI Chatbot",
  siteLogo,
  siteLogoDark,
}: CanvasLogoLoadingViewProps) {
  const resolvedSiteName = String(siteName || "AI Chatbot").trim();
  const lightLogo = String(siteLogo || siteLogoDark || "").trim();
  const darkLogo = String(siteLogoDark || siteLogo || "").trim();
  const hasSeparateDarkLogo = Boolean(darkLogo && darkLogo !== lightLogo);

  return (
    <div className="flex h-dvh w-screen items-center justify-center bg-[#f4f4f5] text-[#20242a] dark:bg-[#08090b] dark:text-zinc-100">
      <div className="flex flex-col items-center gap-3.5">
        <div className="relative flex h-[78px] w-[78px] items-center justify-center">
          <div className="absolute inset-0 animate-spin rounded-full bg-[conic-gradient(from_0deg,#ff7a00,#ffe04b,#48e6a5,#35a7ff,#b15cff,#ff4aa2,#ff7a00)] opacity-90 blur-[1px]" />
          <div className="absolute inset-[6px] animate-ping rounded-full bg-[conic-gradient(from_180deg,#ff7a00,#35a7ff,#b15cff,#48e6a5,#ff7a00)] opacity-25" />
          <div className="absolute inset-1 rounded-full bg-[#f4f4f5] dark:bg-[#08090b]" />
          <div className="relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-full border border-black/8 bg-white shadow-[0_13px_38px_rgba(15,23,42,0.16)] dark:border-white/10 dark:bg-zinc-950 dark:shadow-[0_17px_49px_rgba(0,0,0,0.45)]">
            {lightLogo ? (
              <>
                <img
                  alt={resolvedSiteName}
                  className={cn(
                    "h-[34px] w-[34px] object-contain",
                    hasSeparateDarkLogo && "dark:hidden"
                  )}
                  src={lightLogo}
                />
                {hasSeparateDarkLogo ? (
                  <img
                    alt={resolvedSiteName}
                    className="hidden h-[34px] w-[34px] object-contain dark:block"
                    src={darkLogo}
                  />
                ) : null}
              </>
            ) : (
              <Sparkles className="h-[22px] w-[22px] text-[#20242a] dark:text-white" />
            )}
          </div>
        </div>
        <div className="text-[12px] font-medium tracking-[0.16em] text-[#6b7280] dark:text-zinc-400">
          {label}
        </div>
      </div>
    </div>
  );
}