import type { CardFaceProps } from "./types";

/** 卡面：深黑底色 + 深红光晕与锐利几何线条 */
export function RedeyeFace(_: CardFaceProps) {
  return (
    <>
      {/* 深黑底色 */}
      <div
        className="absolute inset-0"
        style={{
          background: "linear-gradient(145deg, #0a0505 0%, #120808 45%, #0d0404 100%)",
        }}
      />

      {/* 红色主光晕：左上 */}
      <div
        className="absolute -left-8 -top-8 size-56 rounded-full opacity-25 blur-3xl"
        style={{
          background: "radial-gradient(circle, #cc1020 0%, #7a0810 50%, transparent 75%)",
        }}
      />

      {/* 红色副光晕：右下 */}
      <div
        className="absolute -bottom-10 -right-6 size-44 rounded-full opacity-15 blur-3xl"
        style={{
          background: "radial-gradient(circle, #e01828 0%, transparent 70%)",
        }}
      />

      {/* 顶部红色高光边 */}
      <div
        className="absolute inset-x-0 top-0 h-[1.5px]"
        style={{
          background:
            "linear-gradient(to right, transparent 5%, #cc1020 25%, #ff2233 50%, #cc1020 75%, transparent 95%)",
        }}
      />

      {/* 左侧竖向红线 */}
      <div
        className="absolute bottom-0 left-5 top-0 w-px opacity-40"
        style={{
          background:
            "linear-gradient(to bottom, transparent, #cc1020 20%, #ff2233 50%, #cc1020 80%, transparent)",
        }}
      />

      {/* 右侧双竖线 */}
      <div
        className="absolute bottom-3 right-4 top-3 w-px opacity-30"
        style={{
          background:
            "linear-gradient(to bottom, transparent, #993010 30%, #cc2010 60%, transparent)",
        }}
      />
      <div
        className="absolute bottom-3 right-[18px] top-3 w-px opacity-15"
        style={{
          background:
            "linear-gradient(to bottom, transparent, #993010 30%, #cc2010 60%, transparent)",
        }}
      />

      {/* 红色横向扫描线组 */}
      <div
        className="absolute inset-x-0 opacity-[0.06]"
        style={{
          top: "30%",
          height: "1px",
          background:
            "linear-gradient(to right, transparent 0%, #ff2233 40%, #ff5566 60%, transparent 100%)",
        }}
      />
      <div
        className="absolute inset-x-0 opacity-[0.04]"
        style={{
          top: "32%",
          height: "1px",
          background: "linear-gradient(to right, transparent 10%, #ff2233 50%, transparent 90%)",
        }}
      />

      {/* 电路板风格折角线：左上 */}
      <svg
        className="absolute left-6 top-3 opacity-20"
        width="40"
        height="28"
        viewBox="0 0 40 28"
        fill="none"
      >
        <polyline points="0,28 0,8 12,0 40,0" stroke="#ff2233" strokeWidth="1" fill="none" />
        <circle cx="12" cy="0" r="1.5" fill="#ff2233" />
      </svg>

      {/* 电路板风格折角线：右下 */}
      <svg
        className="absolute bottom-3 right-6 opacity-20"
        width="40"
        height="28"
        viewBox="0 0 40 28"
        fill="none"
      >
        <polyline points="40,0 40,20 28,28 0,28" stroke="#cc1020" strokeWidth="1" fill="none" />
        <circle cx="28" cy="28" r="1.5" fill="#cc1020" />
      </svg>

      {/* 风格菱形 */}
      <svg
        className="absolute opacity-[0.12]"
        style={{ right: "28px", top: "50%", transform: "translateY(-50%)" }}
        width="32"
        height="32"
        viewBox="0 0 32 32"
        fill="none"
      >
        <polygon points="16,1 31,16 16,31 1,16" stroke="#ff2233" strokeWidth="1.5" fill="none" />
        <polygon points="16,7 25,16 16,25 7,16" stroke="#ff2233" strokeWidth="1" fill="none" />
        <circle cx="16" cy="16" r="2" fill="#ff2233" />
      </svg>

      {/* 徽标 — 八角框 + 内部对角交叉 + 中心菱形 */}
      <svg
        className="absolute opacity-60"
        style={{
          left: "50%",
          top: "50%",
          transform: "translate(-50%, -50%)",
          filter: "drop-shadow(0 0 6px #cc102088)",
        }}
        width="56"
        height="56"
        viewBox="0 0 56 56"
        fill="none"
      >
        {/* 外八角轮廓 */}
        <polygon
          points="16,2 40,2 54,16 54,40 40,54 16,54 2,40 2,16"
          stroke="#cc1020"
          strokeWidth="1.5"
          fill="#0d0404"
          fillOpacity="0.85"
        />
        {/* 内八角 */}
        <polygon
          points="20,8 36,8 48,20 48,36 36,48 20,48 8,36 8,20"
          stroke="#cc1020"
          strokeWidth="0.75"
          strokeOpacity="0.5"
          fill="none"
        />
        {/* 对角线：左上 → 右下 */}
        <line
          x1="16"
          y1="16"
          x2="40"
          y2="40"
          stroke="#cc1020"
          strokeWidth="1"
          strokeOpacity="0.7"
        />
        {/* 对角线：右上 → 左下 */}
        <line
          x1="40"
          y1="16"
          x2="16"
          y2="40"
          stroke="#cc1020"
          strokeWidth="1"
          strokeOpacity="0.7"
        />
        {/* 横向中轴 */}
        <line
          x1="6"
          y1="28"
          x2="50"
          y2="28"
          stroke="#cc1020"
          strokeWidth="0.75"
          strokeOpacity="0.4"
        />
        {/* 纵向中轴 */}
        <line
          x1="28"
          y1="6"
          x2="28"
          y2="50"
          stroke="#cc1020"
          strokeWidth="0.75"
          strokeOpacity="0.4"
        />
        {/* 中心菱形 */}
        <polygon
          points="28,18 38,28 28,38 18,28"
          stroke="#ff2233"
          strokeWidth="1.25"
          fill="#1a0505"
          fillOpacity="0.9"
        />
        {/* 中心圆点 */}
        <circle cx="28" cy="28" r="3" fill="#ff2233" />
        <circle cx="28" cy="28" r="1.5" fill="#ff6677" />
        {/* 四个顶点刻度点 */}
        <circle cx="28" cy="6" r="1.25" fill="#cc1020" fillOpacity="0.8" />
        <circle cx="50" cy="28" r="1.25" fill="#cc1020" fillOpacity="0.8" />
        <circle cx="28" cy="50" r="1.25" fill="#cc1020" fillOpacity="0.8" />
        <circle cx="6" cy="28" r="1.25" fill="#cc1020" fillOpacity="0.8" />
      </svg>

      {/* 噪点 SVG filter */}
      <svg className="absolute size-0">
        <filter id="arasaka-noise">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.8"
            numOctaves="4"
            stitchTiles="stitch"
          />
          <feColorMatrix type="saturate" values="0" />
          <feBlend in="SourceGraphic" mode="overlay" result="blend" />
          <feComposite in="blend" in2="SourceGraphic" operator="in" />
        </filter>
      </svg>

      {/* 噪点层 */}
      <div
        className="absolute inset-0 opacity-[0.1] mix-blend-overlay"
        style={{ filter: "url(#arasaka-noise)" }}
      />

      {/* 底部红色压边 */}
      <div
        className="absolute inset-x-0 bottom-0 h-px opacity-30"
        style={{
          background:
            "linear-gradient(to right, transparent 10%, #7a0810 40%, #cc1020 60%, transparent 90%)",
        }}
      />
    </>
  );
}