"use client";

import Image from "next/image";
import Link from "next/link";
import { Users, Clock, Star, ArrowRight, BookOpen, Award } from "lucide-react";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import dynamic from "next/dynamic";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

const Progress = dynamic(
  () => import("@/components/ui/progress").then((m) => m.Progress),
  { ssr: false }
);

import { useRouter } from "next/navigation";

interface CourseCardProps {
  title: string;
  instructor: string;
  students: string;
  image: string;
  link: string;
  isFree?: boolean;
  description: string;
  rating?: number;
  duration?: string;
  category?: string;
  progress?: number;
}

export default function CourseCard({
  title,
  instructor,
  students,
  image,
  link,
  isFree = true,
  description,
  rating = 4.8,

  progress,
}: CourseCardProps) {
  const router = useRouter();
  const { language } = useLanguage();
  const t = getTranslation(language).courseCard;

  return (
    <Card
      className="
        group relative w-full max-w-6xl mx-auto
        rounded-3xl overflow-hidden
        bg-gradient-to-br from-white via-white to-orange-50
        border border-gray-100
        shadow-lg shadow-gray-200/30
        hover:shadow-2xl hover:shadow-orange-200/20
        transition-all duration-500
        hover:-translate-y-2
        backdrop-blur-sm
      "
    >
      {/* BACKGROUND DECORATIVE ELEMENTS */}
      <div className="absolute -right-20 -top-20 w-60 h-60 bg-gradient-to-br from-orange-100/30 to-pink-100/20 rounded-full blur-3xl group-hover:scale-110 transition-transform duration-700" />
      <div className="absolute -left-20 -bottom-20 w-60 h-60 bg-gradient-to-tr from-blue-100/20 to-purple-100/10 rounded-full blur-3xl" />

      <div className="relative flex flex-col lg:flex-row">
        {/* IMAGE SECTION - MODERN DESIGN */}
        <div
          onClick={() => router.push(link)}
          className="relative w-full lg:w-2/5 min-h-[320px] lg:min-h-[400px] cursor-pointer overflow-hidden"
        >
          <Image
            src={image}
            alt={title}
            fill
            className="transition-all duration-700 group-hover:scale-110"
            sizes="(max-width: 768px) 100vw, 40vw"
            priority
          />

          {/* GRADIENT OVERLAY */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />

          {/* TOP BADGES */}
          <div className="absolute top-6 left-6 right-6 flex justify-between items-start">
            <div className="flex flex-wrap gap-2">
              {isFree ? (
                <Badge className="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-1.5 rounded-full font-bold border-0 shadow-lg">
                  {t.free}
                </Badge>
              ) : (
                <Badge className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-1.5 rounded-full font-bold border-0 shadow-lg">
                  {t.premium}
                </Badge>
              )}
              {/* <Badge
                variant="outline"
                className="bg-white/90 text-gray-700 px-3 py-1 rounded-full font-medium"
              >
                {category}
              </Badge> */}
            </div>

            {/* RATING */}
            <div className="flex items-center gap-1 bg-black/70 backdrop-blur-sm px-3 py-1.5 rounded-full">
              <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
              <span className="text-white font-bold text-sm">{rating}</span>
            </div>
          </div>

          {/* DURATION AT BOTTOM */}
          {/* <div className="absolute bottom-6 left-6 flex items-center gap-2 bg-black/70 backdrop-blur-sm px-4 py-2 rounded-full">
            <Clock className="w-4 h-4 text-white" />
            <span className="text-white font-medium text-sm">{duration}</span>
          </div> */}
        </div>

        {/* CONTENT SECTION */}
        <div className="px-8 py-8 lg:w-3/5 flex flex-col justify-between">
          <div className="space-y-6">
            {/* TITLE WITH ICON */}
            <div>
              <div className="flex items-center gap-2 mb-2">
                <BookOpen className="w-5 h-5 text-orange-500" />
                <span className="text-sm font-medium text-orange-600 uppercase tracking-wider">
                  {t.featuredCourse}
                </span>
              </div>
              <h2 className="text-2xl lg:text-3xl font-bold text-gray-900 leading-tight">
                {title}
              </h2>
            </div>

            {/* DESCRIPTION */}
            <p className="text-gray-600 text-[15.5px] leading-relaxed line-clamp-6">
              {description?.replace(/<[^>]*>/g, "").trim()}
            </p>

            {/* PROGRESS BAR (if applicable) */}
            {progress !== undefined && (
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="font-medium text-gray-700">{t.progress}</span>
                  <span className="font-bold text-orange-600">{progress}%</span>
                </div>
                <Progress value={progress} className="h-2 bg-gray-200" />
              </div>
            )}

            {/* INFO GRID */}
            <div className="grid grid-cols-2 gap-4 pt-4">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-orange-50 rounded-xl">
                  <Users className="w-5 h-5 text-orange-600" />
                </div>
                <div>
                  <p className="text-sm text-gray-500">{t.students}</p>
                  <p className="font-bold text-gray-900">{students}</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="p-2 bg-blue-50 rounded-xl">
                  <Award className="w-5 h-5 text-blue-600" />
                </div>
                <div>
                  <p className="text-sm text-gray-500">{t.instructor}</p>
                  <p className="font-bold text-gray-900">{instructor}</p>
                </div>
              </div>
            </div>

            {/* INSTRUCTOR WITH AVATAR */}
            <div className="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-white rounded-2xl border border-gray-100">
              <div className="flex items-center gap-3">
                <Image
                  src="/images/course.png"
                  width={50}
                  height={50}
                  className="rounded-full shadow-md border-2 border-white h-12 w-12 object-fill"
                  alt="Instructor"
                />
                <div>
                  <p className="font-semibold text-gray-900">{instructor}</p>
                  <p className="text-sm text-gray-500">{t.expertInstructor}</p>
                </div>
              </div>

              {/* VERIFIED BADGE */}
              <div className="flex items-center gap-1 px-3 py-1 bg-green-50 rounded-full">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <span className="text-sm font-medium text-green-700">
                  {t.verified}
                </span>
              </div>
            </div>
          </div>

          {/* CTA BUTTONS */}
          <div className="pt-8">
            <Button
              onClick={() => router.push(link)}
              className="
                group/btn flex-1
                bg-gradient-to-r from-orange-400 to-[#FAA631]
                hover:from-orange-500 hover:to-orange-600
                text-white py-6 px-8 rounded-xl
                font-bold text-base
                shadow-lg shadow-orange-200
                hover:shadow-orange-300
                transition-all duration-300
                transform hover:-translate-y-0.5
              "
            >
              <span className="flex items-center justify-center gap-2">
                {t.previewCourse}
                <ArrowRight className="w-5 h-5 group-hover/btn:translate-x-1 transition-transform" />
              </span>
            </Button>
          </div>
        </div>
      </div>

      {/* HOVER EFFECT BORDER */}
      <div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-orange-200/50 transition-all duration-500 pointer-events-none" />
    </Card>
  );
}