"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import Image from "next/image";
import { Clock, Users, BookOpen, Star, ChevronRight } from "lucide-react";
import { cn, getDifficultyColor, getDifficultyLabel } from "@/lib/utils";

interface QuizCardProps {
  quiz: {
    id: string;
    slug: string;
    title: string;
    description?: string | null;
    thumbnail?: string | null;
    difficulty: string;
    timeLimit: number;
    playCount: number;
    avgScore: number;
    category: {
      name: string;
      icon?: string | null;
      color?: string | null;
    };
    author: {
      name?: string | null;
      image?: string | null;
    };
    _count?: {
      questions: number;
      results: number;
    };
  };
  index?: number;
  variant?: "default" | "compact" | "featured";
}

export function QuizCard({ quiz, index = 0, variant = "default" }: QuizCardProps) {
  const difficultyColor = getDifficultyColor(quiz.difficulty);
  const difficultyLabel = getDifficultyLabel(quiz.difficulty);

  if (variant === "compact") {
    return (
      <motion.div
        initial={{ opacity: 0, x: -20 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ delay: index * 0.08 }}
      >
        <Link
          href={`/quiz/${quiz.slug}`}
          className="flex items-center gap-4 p-4 rounded-xl hover:bg-accent transition-colors group"
        >
          <div
            className="w-10 h-10 rounded-xl flex items-center justify-center text-xl flex-shrink-0"
            style={{ background: quiz.category.color ? `${quiz.category.color}20` : "#6366f120" }}
          >
            {quiz.category.icon ?? "📝"}
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-semibold text-sm truncate">{quiz.title}</p>
            <p className="text-xs text-muted-foreground">{quiz._count?.questions ?? 0} soal · {quiz.playCount.toLocaleString("id-ID")} main</p>
          </div>
          <ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0" />
        </Link>
      </motion.div>
    );
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -6, transition: { duration: 0.2 } }}
      transition={{ duration: 0.4, delay: index * 0.1 }}
    >
      <Link href={`/quiz/${quiz.slug}`} className="block group">
        <div className="relative bg-card border border-border rounded-2xl overflow-hidden hover:border-primary/40 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300">

          {/* Thumbnail */}
          <div className="relative h-48 bg-gradient-to-br from-indigo-500/20 to-violet-600/20 overflow-hidden">
            {quiz.thumbnail ? (
              <Image
                src={quiz.thumbnail}
                alt={quiz.title}
                fill
                className="object-cover group-hover:scale-105 transition-transform duration-500"
              />
            ) : (
              <div className="absolute inset-0 flex items-center justify-center">
                <span className="text-7xl opacity-50">
                  {quiz.category.icon ?? "📝"}
                </span>
              </div>
            )}

            {/* Category badge */}
            <div className="absolute top-3 left-3">
              <span
                className="px-3 py-1 rounded-full text-xs font-semibold backdrop-blur-sm text-white"
                style={{
                  background: quiz.category.color
                    ? `${quiz.category.color}cc`
                    : "rgba(99,102,241,0.8)",
                }}
              >
                {quiz.category.icon} {quiz.category.name}
              </span>
            </div>

            {/* Difficulty badge */}
            <div className="absolute top-3 right-3">
              <span className={cn(
                "px-3 py-1 rounded-full text-xs font-bold bg-card/90 backdrop-blur-sm",
                difficultyColor
              )}>
                {difficultyLabel}
              </span>
            </div>
          </div>

          {/* Content */}
          <div className="p-5">
            <h3 className="font-bold text-base mb-1 line-clamp-2 group-hover:text-primary transition-colors">
              {quiz.title}
            </h3>
            {quiz.description && (
              <p className="text-xs text-muted-foreground line-clamp-2 mb-4">
                {quiz.description}
              </p>
            )}

            {/* Meta info */}
            <div className="flex items-center gap-4 text-xs text-muted-foreground mb-4">
              <span className="flex items-center gap-1">
                <BookOpen className="w-3.5 h-3.5" />
                {quiz._count?.questions ?? 0} soal
              </span>
              <span className="flex items-center gap-1">
                <Clock className="w-3.5 h-3.5" />
                {quiz.timeLimit}d/soal
              </span>
              <span className="flex items-center gap-1">
                <Users className="w-3.5 h-3.5" />
                {quiz.playCount.toLocaleString("id-ID")}x
              </span>
            </div>

            {/* Footer */}
            <div className="flex items-center justify-between pt-4 border-t border-border">
              {/* Author */}
              <div className="flex items-center gap-2">
                {quiz.author.image ? (
                  <Image
                    src={quiz.author.image}
                    alt={quiz.author.name ?? ""}
                    width={24}
                    height={24}
                    className="rounded-full"
                  />
                ) : (
                  <div className="w-6 h-6 gradient-brand rounded-full flex items-center justify-center text-[10px] text-white font-bold">
                    {quiz.author.name?.[0] ?? "Q"}
                  </div>
                )}
                <span className="text-xs text-muted-foreground truncate max-w-[80px]">
                  {quiz.author.name ?? "QuizB"}
                </span>
              </div>

              {/* Avg Score */}
              {quiz.avgScore > 0 && (
                <div className="flex items-center gap-1 text-xs">
                  <Star className="w-3.5 h-3.5 text-amber-400" fill="currentColor" />
                  <span className="font-semibold">{Math.round(quiz.avgScore)}%</span>
                </div>
              )}
            </div>
          </div>

          {/* Hover gradient overlay */}
          <div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
        </div>
      </Link>
    </motion.div>
  );
}