"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { CalendarDays } from "lucide-react";
import { getCourseImage, getCourseGradient } from "@/lib/placeholder-image";

interface CoachInfo {
  id: string;
  profile: Record<string, unknown> | null;
}

interface Course {
  id: string;
  title: string;
  slug: string;
  type: string;
  price: unknown;
  startDate: string | Date | null;
  endDate?: string | Date | null;
  location: string | null;
  image: string | null;
  capacity: number;
  status?: string;
  sport: { id: string; name: string };
  coaches: Array<{
    id: string;
    isMain?: boolean;
    coach: CoachInfo;
  }>;
  _count?: { registrations?: number; files?: number };
}

const typeLabels: Record<string, string> = {
  ONLINE: "آنلاین",
  IN_PERSON: "حضوری",
  HYBRID: "ترکیبی",
};

const typeStyles: Record<string, string> = {
  ONLINE: "bg-green-50 text-green-600 border-green-200",
  IN_PERSON: "bg-blue-50 text-blue-600 border-blue-200",
  HYBRID: "bg-purple-50 text-purple-600 border-purple-200",
};

export function CourseCard({ course }: { course: Course }) {
  const router = useRouter();

  const imgSrc = getCourseImage(course);
  const gradient = getCourseGradient(course.id);

  return (
    <Link
      href={`/courses/${course.slug}`}
      className="group block rounded-2xl border bg-white overflow-hidden hover:border-[#2563EB]/30 hover:shadow-xl transition-all duration-300"
    >
      <div className="relative aspect-[16/10] overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200">
        {imgSrc ? (
          <img
            src={imgSrc}
            alt={course.title}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
        ) : (
          <div className={`w-full h-full bg-gradient-to-br ${gradient} flex flex-col items-center justify-center gap-2`}>
            <span className="text-white/90 text-5xl font-bold">{course.title.charAt(0)}</span>
            <span className="text-white/60 text-xs">{course.sport.name}</span>
          </div>
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
        <div className="absolute top-3 right-3 flex gap-1.5">
          <span className="text-xs bg-white/90 backdrop-blur-sm text-gray-700 px-2.5 py-1 rounded-full border shadow-sm">
            {course.sport.name}
          </span>
          <span className={`text-xs px-2.5 py-1 rounded-full border shadow-sm backdrop-blur-sm ${typeStyles[course.type] || "bg-gray-50 text-gray-600 border-gray-200"}`}>
            {typeLabels[course.type] || course.type}
          </span>
        </div>
        {course.status === "ACTIVE" && (
          <div className="absolute bottom-3 right-3">
            <span className="text-xs bg-emerald-500/90 text-white px-2.5 py-1 rounded-full backdrop-blur-sm shadow-sm">
              در حال برگزاری
            </span>
          </div>
        )}
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 group-hover:text-[#2563EB] transition-colors mb-3 line-clamp-1 text-base">
          {course.title}
        </h3>
        {course.coaches.length > 0 && (
          <div className="text-sm text-gray-500 mb-3 flex flex-wrap items-center gap-1.5">
            <span className="w-1.5 h-1.5 rounded-full bg-[#2563EB] inline-block shrink-0" />
            {course.coaches.map((c, i) => {
              const p = c.coach.profile;
              const name = p
                ? `${(p as Record<string, unknown>).fullName || ""}`.trim()
                : null;
              if (!name) return null;
              return (
                <span key={c.id}>
                  {i > 0 && <span className="text-gray-300 mx-0.5">، </span>}
                  <span
                    className="hover:text-[#2563EB] transition-colors cursor-pointer"
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      router.push(`/coaches/${c.coach.id}`);
                    }}
                  >
                    {name}
                  </span>
                </span>
              );
            })}
          </div>
        )}
        <div className="flex items-center justify-between text-sm pt-3 border-t border-gray-100">
          <div className="flex items-center gap-1.5 text-gray-500">
            <CalendarDays className="h-3.5 w-3.5" />
            <span>
              {course.startDate
                ? new Date(course.startDate).toLocaleDateString("fa-IR")
                : "تاریخ اعلام می‌شود"}
            </span>
          </div>
          <span className="font-bold text-[#2563EB]">
            {Number(course.price).toLocaleString()} <span className="text-xs font-normal">ریال</span>
          </span>
        </div>
      </div>
    </Link>
  );
}