import { motion, AnimatePresence } from "framer-motion";
import type { ThemeProps } from "../../types";
import logo from "../../assets/icon.png";
import "./aurora.css";

// 15 根频谱的交错延迟
const spectrumDelays = [
  -0.2, -0.5, -0.1, -0.7, -0.3, -0.6, -0.2, -0.8, -0.4, -0.1, -0.5, -0.3, -0.7,
  -0.2, -0.6,
];

const mirrorBars = [
  { h: 28 },
  { h: 22 },
  { h: 14 },
  { h: 14 },
  { h: 22 },
  { h: 28 },
];

export default function AuroraTheme({ config, state }: ThemeProps) {
  const { step, progress, installPath } = state;
  const { primaryColor, accentColor, successColor, texts } = config;

  const getStatusText = () => {
    for (let i = texts.progressFrames.length - 1; i >= 0; i--) {
      if (progress <= texts.progressFrames[i].limit)
        return texts.progressFrames[i].text;
    }
    return texts.progressFrames[texts.progressFrames.length - 1]?.text ?? "";
  };

  // 为每个 theme 实例注入 CSS 变量，让所有内嵌 rgba 也能从 config 派生
  const cssVars: React.CSSProperties = {
    // @ts-expect-error -- CSS 自定义属性
    "--theme-primary": primaryColor,
    "--theme-accent": accentColor,
    "--theme-success": successColor,
  };

  return (
    <div
      className="w-screen h-screen bg-transparent flex justify-center items-center overflow-hidden aurora-root"
      style={cssVars}
    >
      <div
        className="relative w-[360px] h-[480px] rounded-[20px] p-[3px] flex items-center justify-center overflow-hidden z-10"
        style={{
          backgroundColor: "#faf8f6",
          border: "1px solid rgba(0, 0, 0, 0.06)",
          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
        }}
      >
        {/* 系统极光 */}
        <div
          className="absolute w-[240px] h-[240px] rounded-full pointer-events-none opacity-75 z-[1]"
          style={{
            filter: "blur(65px)",
            mixBlendMode: "screen",
            background:
              step === 3
                ? `radial-gradient(circle, ${successColor}40 0%, transparent 70%)`
                : `radial-gradient(circle, ${primaryColor}59 0%, transparent 70%)`,
            bottom: "-30px",
            right: "-30px",
            animation: "float-glow 8s infinite alternate ease-in-out",
            transform:
              step === 2 ? "scale(1.25) translate(-15px, -15px)" : undefined,
            transition: "transform 0.6s var(--cubic), background 0.6s",
          }}
        />
        <div
          className="absolute w-[240px] h-[240px] rounded-full pointer-events-none opacity-75 z-[1]"
          style={{
            filter: "blur(65px)",
            mixBlendMode: "screen",
            background:
              step === 3
                ? `radial-gradient(circle, ${accentColor}33 0%, transparent 70%)`
                : `radial-gradient(circle, ${accentColor}4d 0%, transparent 70%)`,
            top: "-30px",
            left: "-30px",
            animation: "float-glow 10s infinite alternate-reverse ease-in-out",
            transform:
              step === 2 ? "scale(1.25) translate(15px, 15px)" : undefined,
            transition: "transform 0.6s var(--cubic), background 0.6s",
          }}
        />

        <div className="relative w-full h-full z-10">
          <div
            className="absolute inset-0 rounded-2xl overflow-hidden"
            style={{ backgroundColor: "#0F172B" }}
          >
            <div
              className="absolute w-[280px] h-[280px] rounded-full"
              style={{
                background: `radial-gradient(circle, ${primaryColor}99 0%, transparent 70%)`,
                bottom: "-60px",
                right: "-40px",
                filter: "blur(60px)",
                animation: "aurora-drift-1 6s infinite ease-in-out",
              }}
            />
            <div
              className="absolute w-[250px] h-[250px] rounded-full"
              style={{
                background: `radial-gradient(circle, ${accentColor}80 0%, transparent 70%)`,
                top: "-50px",
                left: "-40px",
                filter: "blur(60px)",
                animation: "aurora-drift-2 7s infinite ease-in-out",
              }}
            />
            <div
              className="absolute w-[180px] h-[180px] rounded-full"
              style={{
                background: `radial-gradient(circle, ${accentColor}73 0%, transparent 70%)`,
                top: "50%",
                left: "50%",
                filter: "blur(50px)",
                animation: "aurora-drift-3 8s infinite ease-in-out",
              }}
            />
          </div>
          <div
            className="glass-draggable relative w-full h-full rounded-2xl px-6 pt-8 pb-6 flex flex-col justify-between z-10 installer-card"
            style={{
              background: "rgba(255, 255, 255, 0.03)",
              backdropFilter: "blur(28px) saturate(140%)",
              WebkitBackdropFilter: "blur(28px) saturate(140%)",
              border: "1px solid rgba(255, 255, 255, 0.08)",
              boxShadow: "0 15px 35px rgba(0, 0, 0, 0.4)",
            }}
          >
            {/* 头部 */}
            <div
              className="flex justify-between items-center z-[25]"
              data-tauri-drag-region
            >
              <div className="flex items-center gap-2" data-tauri-drag-region>
                <img src={logo} alt="Logo" className="w-6 h-6" />
                <div
                  className="text-[13px] font-bold text-white"
                  data-tauri-drag-region
                >
                  {config.appDisplayName}
                </div>
              </div>
              <button
                onClick={state.close}
                className="w-[18px] h-[18px] rounded-full flex justify-center items-center cursor-pointer border-none text-[11px] -mt-[1px] transition-colors duration-200 close-btn"
                style={{
                  background: "rgba(255, 255, 255, 0.08)",
                  color: "rgba(255,255,255,0.45)",
                }}
              >
                x
              </button>
            </div>

            {/* 主交互视窗 */}
            <div className="relative flex-grow my-5 flex items-center justify-center">
              <AnimatePresence mode="wait">
                {/* 步骤 1：欢迎 */}
                {step === 1 && (
                  <div
                    key="s1"
                    className="w-full flex flex-col items-center text-center"
                  >
                    {/* 镜像声谱 */}
                    <div className="flex flex-col gap-1 items-center mb-6">
                      {[false, true].map((flip) => (
                        <div
                          key={String(flip)}
                          className={`flex gap-[3px] items-end h-[30px]${flip ? " -scale-y-100 opacity-60" : ""}`}
                        >
                          {mirrorBars.map((b, i) => (
                            <div
                              key={i}
                              className="w-[5px] rounded-[2px]"
                              style={
                                {
                                  height: `${b.h}px`,
                                  background:
                                    i < 2 || i > 3 ? primaryColor : accentColor,
                                } as React.CSSProperties
                              }
                            />
                          ))}
                        </div>
                      ))}
                    </div>
                    <h1
                      className="text-[20px] font-bold mb-2"
                      style={{ color: "rgba(255,255,255,0.95)" }}
                    >
                      {texts.welcomeTitle}
                    </h1>
                    <p
                      className="text-[11px] leading-[1.6] mb-6"
                      style={{ color: "rgba(255,255,255,0.45)" }}
                    >
                      {texts.welcomeSubtitle}
                    </p>
                    <div
                      className="path-slot w-full rounded-xl px-[14px] py-[10px] flex justify-between items-center cursor-pointer"
                      style={{
                        background: "rgba(255, 255, 255, 0.02)",
                        border: "1px solid rgba(255, 255, 255, 0.05)",
                        transition:
                          "border-color 0.3s, background 0.3s, box-shadow 0.3s",
                      }}
                      onClick={state.selectPath}
                    >
                      <span
                        className="font-mono text-[11px] truncate text-left"
                        style={{ color: "rgba(255,255,255,0.95)" }}
                        title={installPath}
                      >
                        {installPath}
                      </span>
                      <button
                        className="bg-transparent border-none text-[10px] cursor-pointer whitespace-nowrap ml-2 transition-colors duration-200 path-change-btn"
                        style={{ color: "rgba(255,255,255,0.45)" }}
                      >
                        更换
                      </button>
                    </div>
                  </div>
                )}

                {/* 步骤 2：安装中 */}
                {step === 2 && (
                  <motion.div
                    key="s2"
                    initial={{
                      opacity: 0,
                      scale: 1.12,
                      y: -18,
                      filter: "blur(18px)",
                    }}
                    animate={{
                      opacity: 1,
                      scale: 1,
                      y: 0,
                      filter: "blur(0px)",
                    }}
                    transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
                    exit={{ opacity: 0, scale: 0.92, filter: "blur(14px)" }}
                    className="w-full flex flex-col items-center text-center relative h-full justify-center py-2"
                  >
                    {/* 反应堆徽章 */}
                    <motion.div
                      initial={{ opacity: 0, scale: 0.6, y: 10 }}
                      animate={{ opacity: 1, scale: 1, y: 0 }}
                      transition={{
                        delay: 0.2,
                        duration: 0.55,
                        ease: [0.16, 1, 0.3, 1],
                      }}
                      className="relative w-[76px] h-[76px] flex items-center justify-center mb-8"
                    >
                      {[0, 0.7, 1.4].map((d) => (
                        <div
                          key={d}
                          className="absolute inset-0 rounded-full"
                          style={{
                            border: `1px solid ${primaryColor}66`,
                            animation: `ripple 2s infinite ease-out ${d}s`,
                          }}
                        />
                      ))}
                      <div
                        className="w-[76px] h-[76px] rounded-full flex items-center justify-center relative z-[2]"
                        style={{
                          border: `1px solid ${primaryColor}40`,
                          background: `radial-gradient(circle at 50% 50%, ${primaryColor}2e 0%, ${primaryColor}0a 60%, transparent 100%)`,
                          boxShadow: `inset 0 0 18px ${primaryColor}2e, 0 0 24px ${primaryColor}26`,
                        }}
                      >
                        <svg
                          width="60"
                          height="60"
                          viewBox="0 0 60 60"
                          className="absolute"
                          style={{ animation: "spinSlow 3.2s linear infinite" }}
                        >
                          <path
                            d="M30 4 A26 26 0 0 1 56 30"
                            fill="none"
                            stroke={primaryColor}
                            strokeWidth="1.6"
                            strokeLinecap="round"
                            style={{
                              filter: `drop-shadow(0 0 4px ${primaryColor})`,
                            }}
                          />
                          <path
                            d="M30 56 A26 26 0 0 1 4 30"
                            fill="none"
                            stroke={`${primaryColor}66`}
                            strokeWidth="1.2"
                            strokeLinecap="round"
                          />
                        </svg>
                        <div
                          className="w-[12px] h-[12px] rounded-full"
                          style={{
                            background: `radial-gradient(circle, #fff 0%, ${primaryColor} 70%)`,
                            boxShadow: `0 0 10px ${primaryColor}, 0 0 22px ${primaryColor}b3`,
                            animation: "corePulse 1.4s ease-in-out infinite",
                          }}
                        />
                      </div>
                    </motion.div>

                    {/* 百分比 */}
                    <motion.div
                      initial={{ opacity: 0, y: 14 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.32, duration: 0.5 }}
                      className="mb-4"
                    >
                      <motion.div
                        key={Math.floor(progress / 5)}
                        initial={{ opacity: 0.4, y: -4 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.3 }}
                        className="text-[48px] font-extralight leading-none"
                        style={{
                          color: "rgba(255,255,255,0.95)",
                          textShadow: `0 0 ${8 + progress * 0.3}px ${primaryColor}33`,
                        }}
                      >
                        {progress}%
                      </motion.div>
                    </motion.div>

                    {/* 状态文案 */}
                    <motion.div
                      initial={{ opacity: 0, y: 12 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.42, duration: 0.5 }}
                      className="mb-8"
                    >
                      <AnimatePresence mode="wait">
                        <motion.div
                          key={getStatusText()}
                          initial={{ opacity: 0, y: 6 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: -6 }}
                          transition={{ duration: 0.35 }}
                          className="text-[11px]"
                          style={{ color: "#7a8195" }}
                        >
                          {getStatusText()}
                        </motion.div>
                      </AnimatePresence>
                    </motion.div>

                    {/* 频谱 */}
                    <motion.div
                      initial={{ opacity: 0, y: 12 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.5, duration: 0.5 }}
                      className="flex gap-[3px] items-end h-[36px] mb-4"
                    >
                      {spectrumDelays.map((d, i) => (
                        <div
                          key={i}
                          className="w-[3px] h-[36px] rounded-[1.5px]"
                          style={{
                            background: `linear-gradient(to top, ${primaryColor}26, ${primaryColor})`,
                            transformOrigin: "bottom",
                            animation:
                              "bounceSpectrum 0.6s ease-in-out infinite",
                            animationDelay: `${d}s`,
                          }}
                        />
                      ))}
                    </motion.div>
                  </motion.div>
                )}

                {/* 步骤 3：成功 */}
                {step === 3 && (
                  <motion.div
                    key="s3"
                    initial={{ opacity: 0, scale: 0.94 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
                    className="w-full flex flex-col items-center text-center relative h-full justify-between py-3"
                  >
                    <div className="relative flex flex-col items-center pt-4">
                      {/* 粒子爆发 */}
                      {Array.from({ length: 12 }).map((_, i) => {
                        const angle = (i / 12) * Math.PI * 2;
                        const dx = Math.cos(angle) * 70;
                        const dy = Math.sin(angle) * 70;
                        const color =
                          i % 3 === 0
                            ? successColor
                            : i % 3 === 1
                              ? accentColor
                              : "#a3e635";
                        return (
                          <motion.span
                            key={i}
                            initial={{ x: 0, y: 0, opacity: 0, scale: 0 }}
                            animate={{
                              x: dx,
                              y: dy,
                              opacity: [0, 1, 0],
                              scale: [0, 1, 0.4],
                            }}
                            transition={{
                              duration: 1.4,
                              delay: 0.15 + i * 0.02,
                              ease: "easeOut",
                            }}
                            className="absolute left-1/2 w-[4px] h-[4px] rounded-full pointer-events-none"
                            style={{
                              top: "69px",
                              marginLeft: "-2px",
                              background: color,
                              boxShadow: `0 0 8px ${i % 2 === 0 ? successColor : accentColor}`,
                            }}
                          />
                        );
                      })}

                      <div className="relative w-[110px] h-[110px] flex items-center justify-center">
                        <div
                          className="absolute inset-0 rounded-full opacity-70 pointer-events-none"
                          style={{
                            background: `conic-gradient(from 0deg, transparent 0deg, ${successColor} 90deg, transparent 180deg, ${accentColor} 270deg, transparent 360deg)`,
                            animation: "spinSlow 6s linear infinite",
                            filter: "blur(8px)",
                            maskImage:
                              "radial-gradient(circle, transparent 38%, black 42%, black 58%, transparent 62%)",
                            WebkitMaskImage:
                              "radial-gradient(circle, transparent 38%, black 42%, black 58%, transparent 62%)",
                          }}
                        />
                        <motion.div
                          initial={{ scale: 0.4, opacity: 0 }}
                          animate={{ scale: 1, opacity: 1 }}
                          transition={{
                            delay: 0.1,
                            duration: 0.6,
                            ease: [0.16, 1, 0.3, 1],
                          }}
                          className="relative w-[84px] h-[84px] rounded-full flex items-center justify-center"
                          style={{
                            background: `radial-gradient(circle at 30% 30%, ${successColor}59, ${accentColor}26 60%, rgba(15,23,43,0.4))`,
                            border: `1px solid ${successColor}73`,
                            boxShadow: `0 0 30px ${successColor}59, inset 0 0 20px ${successColor}26`,
                          }}
                        >
                          <svg width="38" height="38" viewBox="0 0 52 52">
                            <motion.circle
                              cx="26"
                              cy="26"
                              r="22"
                              fill="none"
                              stroke={`${successColor}80`}
                              strokeWidth="1.5"
                              initial={{ pathLength: 0 }}
                              animate={{ pathLength: 1 }}
                              transition={{
                                duration: 0.7,
                                delay: 0.2,
                                ease: "easeOut",
                              }}
                            />
                            <motion.path
                              d="M14 27 L23 36 L39 18"
                              fill="none"
                              stroke={successColor}
                              strokeWidth="3"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              initial={{ pathLength: 0 }}
                              animate={{ pathLength: 1 }}
                              transition={{
                                duration: 0.5,
                                delay: 0.55,
                                ease: [0.16, 1, 0.3, 1],
                              }}
                              style={{
                                filter: `drop-shadow(0 0 6px ${successColor}cc)`,
                              }}
                            />
                          </svg>
                        </motion.div>
                      </div>

                      <motion.h2
                        initial={{ opacity: 0, y: 8 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.65, duration: 0.5 }}
                        className="text-[19px] font-bold mt-8"
                        style={{
                          background: `linear-gradient(135deg, #ffffff, ${successColor}99)`,
                          WebkitBackgroundClip: "text",
                          WebkitTextFillColor: "transparent",
                          backgroundClip: "text",
                          letterSpacing: "2px",
                        }}
                      >
                        {texts.successTitle}
                      </motion.h2>
                      <motion.p
                        initial={{ opacity: 0, y: 8 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.78, duration: 0.5 }}
                        className="text-[11px] mt-3"
                        style={{ color: "rgba(255,255,255,0.45)" }}
                      >
                        {texts.successSubtitle}
                      </motion.p>

                      <div className="flex gap-2 mt-7 flex-wrap justify-center">
                        {texts.features.map((p, i) => (
                          <motion.span
                            key={p.label}
                            initial={{ opacity: 0, y: 10, scale: 0.8 }}
                            animate={{ opacity: 1, y: 0, scale: 1 }}
                            transition={{
                              delay: 0.9 + i * 0.1,
                              duration: 0.45,
                              ease: [0.16, 1, 0.3, 1],
                            }}
                            className="text-[10px] px-2.5 py-1 rounded-full"
                            style={{
                              background: `${p.color}1f`,
                              border: `1px solid ${p.color}55`,
                              color: "rgba(255,255,255,0.85)",
                              letterSpacing: "1px",
                            }}
                          >
                            {p.label}
                          </motion.span>
                        ))}
                      </div>
                    </div>

                    <motion.div
                      initial={{ opacity: 0, y: 15 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 1.25, duration: 0.55 }}
                      className="w-full mt-4"
                    >
                      <button
                        onClick={state.launch}
                        className="shimmer-btn launch-btn relative w-full h-[42px] border-none rounded-[21px] text-white text-[12px] font-bold tracking-[3px] cursor-pointer overflow-hidden"
                        style={{
                          background: `linear-gradient(135deg, ${successColor} 0%, ${accentColor} 100%)`,
                          boxShadow: `0 6px 20px ${successColor}59, inset 0 1px 0 rgba(255,255,255,0.2)`,
                          transition:
                            "transform 0.25s var(--cubic), box-shadow 0.25s var(--cubic)",
                        }}
                      >
                        <span className="relative z-10">
                          {texts.launchButton}
                        </span>
                      </button>
                    </motion.div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            {/* 底部操作区 */}
            <div
              className={`w-full flex flex-col gap-4 z-[25] transition-all ${
                step === 1
                  ? "opacity-100 translate-y-0 pointer-events-auto"
                  : "opacity-0 translate-y-[10px] pointer-events-none"
              }`}
              style={{
                transition:
                  "opacity 0.4s var(--cubic), transform 0.4s var(--cubic)",
              }}
            >
              <button
                onClick={state.startInstall}
                className="start-btn relative overflow-hidden w-full h-[40px] border-none rounded-[20px] text-white text-[12px] font-bold tracking-[2px] cursor-pointer"
                style={{
                  backgroundColor: primaryColor,
                  boxShadow: `0 2px 6px ${primaryColor}26`,
                  transition:
                    "background-color 0.25s var(--cubic), transform 0.25s var(--cubic), box-shadow 0.25s var(--cubic)",
                }}
              >
                {texts.installButton}
              </button>
              <div
                className="text-[10px] text-center"
                style={{ color: "rgba(255,255,255,0.45)" }}
              >
                我已同意并接受{" "}
                <a
                  href="#"
                  className="border-b border-white/10"
                  style={{
                    color: "rgba(255,255,255,0.95)",
                    textDecoration: "none",
                  }}
                >
                  {texts.licenseAgreement}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}