"use client";
import { useRef } from "react";
import { useRouter } from "next/navigation";
import { FiStar, FiShoppingCart, FiCheck } from "react-icons/fi";
import { useTheme } from "@/context/ThemeContext";
import { useCart } from "@/context/CartContext";
import type { Course } from "@/types/course";

export function ListCourseCard({ course }: { course: Course }) {
  const { isDark } = useTheme();
  const { addToCart, isInCart: isInCartFn } = useCart();
  const isInCart = isInCartFn(course.id);
  const router = useRouter();
  const btnRef = useRef<HTMLButtonElement>(null);
  const discountPercent = Math.round(
    ((course.originalPrice - course.price) / course.originalPrice) * 100,
  );

  return (
    <div
      className={`flex gap-4 rounded-2xl border p-4 transition-all hover:-translate-y-0.5 ${
        isDark
          ? "bg-slate-900/90 border-slate-800 hover:border-slate-700"
          : "bg-white border-slate-200 hover:border-slate-300 hover:shadow-md"
      }`}
    >
      <img
        src={course.thumbnail}
        alt={course.title}
        onClick={() => router.push(`/course/${course.id}`)}
        className="w-40 h-24 rounded-xl object-cover shrink-0 cursor-pointer"
      />
      <div className="flex-1 min-w-0 flex flex-col justify-between">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <span className={`text-[10px] font-bold uppercase tracking-wider ${isDark ? "text-violet-400" : "text-violet-600"}`}>
              {course.category}
            </span>
            {course.badge && (
              <span className="text-[10px] font-black px-2 py-0.5 rounded bg-amber-500 text-slate-950">
                {course.badge}
              </span>
            )}
          </div>
          <h3
            onClick={() => router.push(`/course/${course.id}`)}
            className={`text-sm font-bold line-clamp-1 cursor-pointer hover:text-violet-400 transition-colors ${isDark ? "text-white" : "text-slate-900"}`}
          >
            {course.title}
          </h3>
          <p className={`text-xs line-clamp-1 mt-0.5 ${isDark ? "text-slate-400" : "text-slate-500"}`}>
            {course.subtitle}
          </p>
          <div className="flex items-center gap-3 mt-2 text-xs">
            <span className="flex items-center gap-1 font-bold text-amber-400">
              <FiStar className="fill-amber-400" /> {course.rating.toFixed(1)}
            </span>
            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
              ({course.reviewsCount.toLocaleString()})
            </span>
            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
              {course.studentsCount.toLocaleString()} alumnos
            </span>
            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
              {course.duration}
            </span>
          </div>
        </div>
      </div>
      <div className="flex flex-col items-end justify-between shrink-0">
        <div className="text-right">
          <div className={`text-lg font-black font-mono ${isDark ? "text-white" : "text-slate-900"}`}>
            ${course.price.toFixed(2)}
          </div>
          {discountPercent > 0 && (
            <div className={`text-xs line-through font-mono ${isDark ? "text-slate-500" : "text-slate-400"}`}>
              ${course.originalPrice.toFixed(2)}
            </div>
          )}
        </div>
        <button
          ref={btnRef}
          onClick={() => !isInCart && addToCart(course, btnRef.current)}
          disabled={isInCart}
          className={`px-3 py-2 rounded-xl text-xs font-bold flex items-center gap-1.5 transition-all ${
            isInCart
              ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 cursor-default"
              : "bg-violet-600 hover:bg-violet-500 text-white hover:scale-105 active:scale-95"
          }`}
        >
          {isInCart ? (
            <><FiCheck /><span>En carrito</span></>
          ) : (
            <><FiShoppingCart /><span>Añadir</span></>
          )}
        </button>
      </div>
    </div>
  );
}