"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Timer } from "lucide-react";
import { cn, formatTime } from "@/lib/utils";

interface QuizTimerProps {
  duration: number;
  onTimeout: () => void;
  isRunning: boolean;
}

export function QuizTimer({ duration, onTimeout, isRunning }: QuizTimerProps) {
  const [timeLeft, setTimeLeft] = useState(duration);

  useEffect(() => {
    setTimeLeft(duration);
  }, [duration]);

  useEffect(() => {
    if (!isRunning) return;
    if (timeLeft <= 0) {
      onTimeout();
      return;
    }
    const timer = setTimeout(() => setTimeLeft((t) => t - 1), 1000);
    return () => clearTimeout(timer);
  }, [timeLeft, isRunning, onTimeout]);

  const percentage = (timeLeft / duration) * 100;
  const isDanger = timeLeft <= 5;
  const isWarning = timeLeft <= 10;

  return (
    <div className="flex items-center gap-2">
      <Timer
        className={cn(
          "w-4 h-4 transition-colors",
          isDanger ? "text-rose-500" : isWarning ? "text-amber-500" : "text-muted-foreground"
        )}
      />
      <div className="relative w-24">
        {/* Background track */}
        <div className="h-2 bg-muted rounded-full overflow-hidden">
          <motion.div
            className={cn(
              "h-full rounded-full transition-colors",
              isDanger ? "bg-rose-500" : isWarning ? "bg-amber-500" : "bg-primary"
            )}
            style={{ width: `${percentage}%` }}
            transition={{ duration: 1, ease: "linear" }}
          />
        </div>
      </div>
      <span
        className={cn(
          "text-sm font-bold min-w-[2.5rem] text-right tabular-nums",
          isDanger ? "timer-danger text-rose-500" : isWarning ? "text-amber-500" : "text-foreground"
        )}
      >
        {formatTime(timeLeft)}
      </span>
    </div>
  );
}