import { QRCodeSVG } from "qrcode.react";

export interface BlindboxShareData {
  type: "blindbox";
  idea: string;
  submitter?: { avatar: string; username: string };
  drawer?: { avatar: string; username: string };
  roomName: string;
}

export default function BlindboxShareCard({
  data,
  cardRef,
  bgDataUrl,
}: {
  data: BlindboxShareData;
  cardRef: React.RefObject<HTMLDivElement | null>;
  bgDataUrl?: string | null;
}) {
  const { idea, submitter, drawer, roomName } = data;
  const shareUrl =
    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";

  return (
    <div
      ref={cardRef}
      style={{
        width: 340,
        padding: 1.5,
        borderRadius: 20,
        background: "linear-gradient(160deg, #7c3aed, #6366f140, #7c3aed30)",
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      }}
    >
      <div
        style={{
          borderRadius: 18.5,
          background: "#0a0810",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {/* Background image */}
        {bgDataUrl && (
          <img
            src={bgDataUrl}
            alt=""
            style={{
              position: "absolute",
              inset: 0,
              width: "100%",
              height: "100%",
              objectFit: "cover",
              opacity: 0.12,
            }}
          />
        )}

        {/* Decorative glows */}
        <div
          style={{
            position: "absolute",
            top: -30,
            right: -20,
            width: 140,
            height: 140,
            borderRadius: "50%",
            background: "radial-gradient(circle, rgba(124,58,237,0.2), transparent 70%)",
          }}
        />
        <div
          style={{
            position: "absolute",
            bottom: 80,
            left: -30,
            width: 120,
            height: 120,
            borderRadius: "50%",
            background: "radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%)",
          }}
        />

        {/* Brand header */}
        <div
          style={{
            padding: "14px 20px 12px",
            display: "flex",
            alignItems: "center",
            gap: 8,
            position: "relative",
          }}
        >
          <span style={{ fontSize: 18 }}>🎁</span>
          <div>
            <div
              style={{
                fontSize: 13,
                fontWeight: 800,
                color: "#ffffff",
                letterSpacing: "0.02em",
              }}
            >
              NoWhatever
            </div>
            <div
              style={{
                fontSize: 9,
                fontWeight: 600,
                color: "rgba(255,255,255,0.3)",
                letterSpacing: "0.15em",
                marginTop: 1,
              }}
            >
              别说随便 · ADVENTURE ROULETTE
            </div>
          </div>
        </div>

        {/* Thin accent line */}
        <div
          style={{
            height: 1,
            margin: "0 20px",
            background: "linear-gradient(to right, transparent, rgba(167,139,250,0.25), transparent)",
          }}
        />

        {/* Room name badge */}
        <div
          style={{
            textAlign: "center",
            padding: "20px 20px 8px",
            position: "relative",
          }}
        >
          <div
            style={{
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: "0.25em",
              color: "rgba(167,139,250,0.5)",
            }}
          >
            ✦ {roomName} ✦
          </div>
        </div>

        {/* Idea card */}
        <div style={{ padding: "0 16px 20px" }}>
          <div
            style={{
              borderRadius: 14,
              background: "rgba(255,255,255,0.04)",
              border: "1px solid rgba(167,139,250,0.1)",
              padding: "28px 24px",
              position: "relative",
            }}
          >
            {/* Corner decorations */}
            <div
              style={{
                position: "absolute",
                top: 10,
                left: 10,
                width: 14,
                height: 14,
                borderLeft: "2px solid rgba(167,139,250,0.25)",
                borderTop: "2px solid rgba(167,139,250,0.25)",
                borderTopLeftRadius: 3,
              }}
            />
            <div
              style={{
                position: "absolute",
                top: 10,
                right: 10,
                width: 14,
                height: 14,
                borderRight: "2px solid rgba(167,139,250,0.25)",
                borderTop: "2px solid rgba(167,139,250,0.25)",
                borderTopRightRadius: 3,
              }}
            />
            <div
              style={{
                position: "absolute",
                bottom: 10,
                left: 10,
                width: 14,
                height: 14,
                borderLeft: "2px solid rgba(167,139,250,0.25)",
                borderBottom: "2px solid rgba(167,139,250,0.25)",
                borderBottomLeftRadius: 3,
              }}
            />
            <div
              style={{
                position: "absolute",
                bottom: 10,
                right: 10,
                width: 14,
                height: 14,
                borderRight: "2px solid rgba(167,139,250,0.25)",
                borderBottom: "2px solid rgba(167,139,250,0.25)",
                borderBottomRightRadius: 3,
              }}
            />

            <div
              style={{
                fontSize: 22,
                fontWeight: 900,
                color: "#ffffff",
                textAlign: "center",
                lineHeight: 1.6,
                letterSpacing: "0.02em",
              }}
            >
              {idea}
            </div>

            <div
              style={{
                width: 48,
                height: 1,
                margin: "16px auto",
                background:
                  "linear-gradient(to right, transparent, rgba(167,139,250,0.4), transparent)",
              }}
            />

            <div
              style={{
                textAlign: "center",
                fontSize: 10,
                fontWeight: 500,
                color: "rgba(167,139,250,0.35)",
              }}
            >
              此契约一旦开启，绝不反悔
            </div>
          </div>
        </div>

        {/* Attribution */}
        {(submitter || drawer) && (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 12,
              padding: "0 20px 16px",
            }}
          >
            {submitter && (
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 5,
                  fontSize: 11,
                  color: "rgba(196,181,253,0.4)",
                }}
              >
                <span style={{ fontSize: 14 }}>{submitter.avatar}</span>
                <span>{submitter.username} 投入</span>
              </div>
            )}
            {submitter && drawer && (
              <span style={{ color: "rgba(196,181,253,0.2)" }}>·</span>
            )}
            {drawer && (
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 5,
                  fontSize: 11,
                  color: "rgba(196,181,253,0.4)",
                }}
              >
                <span style={{ fontSize: 14 }}>{drawer.avatar}</span>
                <span>{drawer.username} 抽中</span>
              </div>
            )}
          </div>
        )}

        {/* QR footer */}
        <div
          style={{
            padding: "14px 20px 16px",
            display: "flex",
            alignItems: "center",
            gap: 14,
            borderTop: "1px solid rgba(255,255,255,0.04)",
          }}
        >
          <div
            style={{
              padding: 5,
              borderRadius: 8,
              background: "#ffffff",
              flexShrink: 0,
            }}
          >
            <QRCodeSVG
              value={shareUrl}
              size={52}
              level="M"
              bgColor="#ffffff"
              fgColor="#0a0810"
            />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div
              style={{
                fontSize: 12,
                fontWeight: 700,
                color: "rgba(255,255,255,0.7)",
              }}
            >
              扫码一起「别说随便」
            </div>
            <div
              style={{
                fontSize: 10,
                color: "rgba(255,255,255,0.2)",
                marginTop: 3,
              }}
            >
              {shareUrl.replace(/^https?:\/\//, "")}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
