import ShareCardShell from "./ShareCardShell";
import type { ShareCardTheme } from "./ShareCardShell";

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

const THEME: ShareCardTheme = {
  emoji: "🎁",
  tagline: "别说随便 · ADVENTURE ROULETTE",
  bgColor: "#0a0810",
  gradientBorder: "linear-gradient(160deg, #7c3aed, #6366f140, #7c3aed30)",
  accentLine: "linear-gradient(to right, transparent, rgba(167,139,250,0.25), transparent)",
  glows: [
    { top: -30, right: -20, width: 140, height: 140, color: "rgba(124,58,237,0.2)" },
    { top: 9999, right: 9999, width: 120, height: 120, color: "rgba(99,102,241,0.12)" },
  ],
  qrFgColor: "#0a0810",
};

export default function BlindboxShareCard({
  data,
  cardRef,
  bgDataUrl,
}: {
  data: BlindboxShareData;
  cardRef: React.RefObject<HTMLDivElement | null>;
  bgDataUrl?: string | null;
}) {
  const { idea, submitter, drawer, roomName } = data;

  return (
    <ShareCardShell theme={THEME} cardRef={cardRef} bgDataUrl={bgDataUrl}>
      {/* Bottom-left glow */}
      <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%)",
        }}
      />

      {/* 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 */}
          {[
            { top: 10, left: 10, borderLeft: "2px solid rgba(167,139,250,0.25)", borderTop: "2px solid rgba(167,139,250,0.25)", borderTopLeftRadius: 3 },
            { top: 10, right: 10, borderRight: "2px solid rgba(167,139,250,0.25)", borderTop: "2px solid rgba(167,139,250,0.25)", borderTopRightRadius: 3 },
            { bottom: 10, left: 10, borderLeft: "2px solid rgba(167,139,250,0.25)", borderBottom: "2px solid rgba(167,139,250,0.25)", borderBottomLeftRadius: 3 },
            { bottom: 10, right: 10, borderRight: "2px solid rgba(167,139,250,0.25)", borderBottom: "2px solid rgba(167,139,250,0.25)", borderBottomRightRadius: 3 },
          ].map((style, i) => (
            <div key={i} style={{ position: "absolute", width: 14, height: 14, ...style }} />
          ))}

          <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>
      )}
    </ShareCardShell>
  );
}
