"use client";

import { motion } from "framer-motion";
import { Share2 } from "lucide-react";
import Button from "@/components/Button";
import type { DrawnIdea } from "@/components/BlindboxDrawnHistory";

interface BlindboxRevealPhaseProps {
  idea: DrawnIdea;
  onShare: () => void;
  onContinue: () => void;
}

export default function BlindboxRevealPhase({ idea, onShare, onContinue }: BlindboxRevealPhaseProps) {
  return (
    <motion.div
      key="reveal"
      className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ type: "spring", damping: 15, stiffness: 200 }}
    >
      <div className="relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-purple-900 via-indigo-900 to-purple-950 p-6 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-600/30">
        <div className="absolute left-3 top-3 h-6 w-6 border-l-2 border-t-2 border-purple-400/30 rounded-tl-sm" />
        <div className="absolute right-3 top-3 h-6 w-6 border-r-2 border-t-2 border-purple-400/30 rounded-tr-sm" />
        <div className="absolute bottom-3 left-3 h-6 w-6 border-b-2 border-l-2 border-purple-400/30 rounded-bl-sm" />
        <div className="absolute bottom-3 right-3 h-6 w-6 border-b-2 border-r-2 border-purple-400/30 rounded-br-sm" />

        <div className="relative z-10 text-center">
          <p className="text-xs font-bold tracking-[0.3em] text-purple-400/70">
            ✦ 周末契约 ✦
          </p>
          <motion.p
            className="mt-4 text-xl font-black leading-relaxed text-white"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
          >
            {idea.content}
          </motion.p>
          <div className="mx-auto mt-4 h-px w-16 bg-linear-to-r from-transparent via-purple-400/50 to-transparent" />

          <div className="mt-3 flex items-center justify-center gap-2 text-[11px] text-purple-400/50">
            {idea.user && (
              <span>{idea.user.avatar} {idea.user.username} 投入</span>
            )}
            {idea.drawnBy && (
              <>
                <span>·</span>
                <span>{idea.drawnBy.avatar} {idea.drawnBy.username} 抽中</span>
              </>
            )}
          </div>

          <p className="mt-2 text-[10px] font-medium text-purple-400/40">
            此契约一旦开启，绝不反悔
          </p>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <Button
          onClick={onShare}
          variant="purple"
          shape="pill"
          icon={<Share2 size={14} />}
        >
          分享契约
        </Button>
        <Button
          onClick={onContinue}
          variant="secondary"
          shape="pill"
        >
          继续投入想法
        </Button>
      </div>
    </motion.div>
  );
}
