"use client";

import { motion } from "framer-motion";
import { Trophy } from "lucide-react";

export interface DrawnIdea {
  id: string;
  content: string;
  createdAt: string;
  user?: { id: string; username: string; avatar: string };
  drawnBy?: { id: string; username: string; avatar: string } | null;
}

export default function BlindboxDrawnHistory({ items }: { items: DrawnIdea[] }) {
  if (items.length === 0) return null;

  return (
    <motion.div
      className="mt-10 w-full max-w-sm"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ delay: 0.3 }}
    >
      <div className="mb-3 flex items-center gap-2">
        <Trophy size={13} className="text-amber-400" />
        <h3 className="text-xs font-bold tracking-wider text-muted">
          履约记录
        </h3>
        <div className="h-px flex-1 bg-border" />
      </div>
      <div className="flex flex-col gap-2">
        {items.map((item, i) => (
          <motion.div
            key={item.id}
            className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.06 }}
          >
            <span className="mt-0.5 text-sm">🏆</span>
            <div className="min-w-0 flex-1">
              <p className="text-sm font-medium text-secondary">
                {item.content}
              </p>
              <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
                {item.user && (
                  <span>{item.user.avatar} {item.user.username} 投入</span>
                )}
                {item.drawnBy && (
                  <>
                    <span>·</span>
                    <span>{item.drawnBy.avatar} {item.drawnBy.username} 抽中</span>
                  </>
                )}
                <span>·</span>
                <span>
                  {new Date(item.createdAt).toLocaleDateString("zh-CN", {
                    month: "short",
                    day: "numeric",
                    weekday: "short",
                  })}
                </span>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
}
