import { useNavigate } from "react-router-dom";

type StampPopupProps = {
  name: string;
  imageColor: string;
  note?: string | null;
  status: "preview" | "collected" | "already";
  onCollect?: () => void;
  onClose: () => void;
};

export default function StampPopup({ name, imageColor, note, status, onCollect, onClose }: StampPopupProps) {
  const navigate = useNavigate();

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center animate-overlay-fade"
      style={{ backgroundColor: "var(--overlay)" }}
      onClick={(e) => e.target === e.currentTarget && onClose()}
    >
      <div className="w-72 bg-[var(--bg-cream)] rounded-2xl p-6 text-center shadow-[var(--shadow-lg)]">
        {/* Stamp image */}
        <div className="w-40 h-40 mx-auto mb-4">
          <div
            className="w-full h-full rounded-full bg-white overflow-hidden flex items-center justify-center border border-[var(--border-muted)] animate-stamp-press"
            style={{
              boxShadow:
                status === "preview"
                  ? "0 2px 8px rgba(0,0,0,0.06)"
                  : "0 4px 14px rgba(212,165,116,0.35), inset 0 0 0 1px rgba(212,165,116,0.2)",
            }}
          >
            <img
              src={imageColor}
              alt={name}
              className="w-[92%] h-[92%] object-contain"
              onError={(e) => {
                const target = e.target as HTMLImageElement;
                target.style.display = "none";
              }}
            />
          </div>
        </div>

        {/* Stamp name */}
        <h3 className="text-xl font-semibold text-[var(--text-primary)] mb-1">{name}</h3>
        {note && <p className="text-xs text-[var(--text-muted)] mb-4">{note}</p>}

        {/* Status message & action */}
        {status === "preview" && (
          <button
            onClick={onCollect}
            className="w-full py-3 rounded-xl text-sm font-medium text-white mt-2"
            style={{ backgroundColor: "var(--terracotta)" }}
          >
            立即获取
          </button>
        )}

        {status === "collected" && (
          <div className="mt-2">
            <div className="flex items-center justify-center gap-1.5 text-[var(--jade)] mb-3">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <polyline points="20 6 9 17 4 12" />
              </svg>
              <span className="text-sm font-medium">收集成功!</span>
            </div>
            <button
              onClick={() => navigate("/album")}
              className="w-full py-3 rounded-xl text-sm font-medium text-white"
              style={{ backgroundColor: "var(--jade)" }}
            >
              查看图章册
            </button>
          </div>
        )}

        {status === "already" && (
          <>
            <p className="text-sm text-[var(--text-muted)] mt-2">你已经拥有这枚图章了</p>
            <button
              onClick={() => navigate("/album")}
              className="w-full py-3 rounded-xl text-sm font-medium text-white mt-3"
              style={{ backgroundColor: "var(--jade)" }}
            >
              查看图章册
            </button>
          </>
        )}

        <button
          onClick={onClose}
          className="mt-3 text-xs text-[var(--text-muted)] underline underline-offset-2"
        >
          {status === "preview" ? "关闭" : "继续浏览"}
        </button>
      </div>
    </div>
  );
}
