import { QRCodeSVG } from "qrcode.react";
import type { WeekendPlanData } from "@/types";

export interface PlanShareData {
  type: "plan";
  days: WeekendPlanData[];
  roomName: string;
}

export default function BlindboxPlanShareCard({
  data,
  cardRef,
  bgDataUrl,
}: {
  data: PlanShareData;
  cardRef: React.RefObject<HTMLDivElement | null>;
  bgDataUrl?: string | null;
}) {
  const { days, 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%)",
          }}
        />

        {/* 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,
              }}
            >
              别说随便 · WEEKEND PLAN
            </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)",
          }}
        />

        {/* Each day */}
        {days.map((day, dayIdx) => (
          <div key={day.date}>
            {/* Room + date badge */}
            <div style={{ textAlign: "center", padding: "16px 20px 8px" }}>
              <div
                style={{
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: "0.25em",
                  color: "rgba(167,139,250,0.5)",
                }}
              >
                ✦ {roomName} · {day.date} ✦
              </div>
              {day.summary && (
                <div
                  style={{
                    fontSize: 11,
                    color: "rgba(255,255,255,0.5)",
                    marginTop: 6,
                    lineHeight: 1.5,
                  }}
                >
                  {day.summary}
                </div>
              )}
            </div>

            {/* Timeline items */}
            <div style={{ padding: "12px 20px 20px" }}>
              {day.items.map((item, i) => (
                <div
                  key={i}
                  style={{
                    display: "flex",
                    gap: 10,
                    marginBottom: i < day.items.length - 1 ? 12 : 0,
                    position: "relative",
                  }}
                >
                  <div
                    style={{
                      width: 40,
                      flexShrink: 0,
                      fontSize: 12,
                      fontWeight: 900,
                      color: "#a78bfa",
                      textAlign: "right",
                      paddingTop: 2,
                    }}
                  >
                    {item.time}
                  </div>

                  <div style={{ width: 16, flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center" }}>
                    <div
                      style={{
                        width: 8,
                        height: 8,
                        borderRadius: "50%",
                        background: "#7c3aed",
                        marginTop: 5,
                        flexShrink: 0,
                      }}
                    />
                    {i < day.items.length - 1 && (
                      <div style={{ width: 1, flex: 1, background: "rgba(124,58,237,0.2)", marginTop: 4 }} />
                    )}
                  </div>

                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: "#ffffff" }}>
                      {item.activity}
                    </div>
                    <div style={{ fontSize: 10, color: "rgba(167,139,250,0.5)", marginTop: 3 }}>
                      📍 {item.poi}
                    </div>
                    {item.reason && (
                      <div
                        style={{
                          fontSize: 9,
                          color: "rgba(255,255,255,0.25)",
                          marginTop: 3,
                          fontStyle: "italic",
                          lineHeight: 1.4,
                        }}
                      >
                        {item.reason}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>

            {/* Separator between days */}
            {dayIdx < days.length - 1 && (
              <div
                style={{
                  height: 1,
                  margin: "0 20px",
                  background: "linear-gradient(to right, transparent, rgba(167,139,250,0.15), transparent)",
                }}
              />
            )}
          </div>
        ))}

        {/* Contract stamp */}
        <div
          style={{
            textAlign: "center",
            padding: "0 20px 16px",
            fontSize: 10,
            fontWeight: 500,
            color: "rgba(167,139,250,0.3)",
          }}
        >
          此契约一旦开启，绝不反悔
        </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>
  );
}
