import type { WeekendPlanData } from "@/types";
import ShareCardShell from "./ShareCardShell";
import type { ShareCardTheme } from "./ShareCardShell";

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

const THEME: ShareCardTheme = {
  emoji: "📋",
  tagline: "别说随便 · WEEKEND PLAN",
  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)" },
  ],
  qrFgColor: "#0a0810",
};

export default function BlindboxPlanShareCard({
  data,
  cardRef,
  bgDataUrl,
}: {
  data: PlanShareData;
  cardRef: React.RefObject<HTMLDivElement | null>;
  bgDataUrl?: string | null;
}) {
  const { days, roomName } = data;

  return (
    <ShareCardShell theme={THEME} cardRef={cardRef} bgDataUrl={bgDataUrl}>
      {/* 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>
    </ShareCardShell>
  );
}
