import Link from "next/link";
import type { Prisma } from "@prisma/client";
import ProgressBar from "@/components/ProgressBar";
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

type PublicCourseCardCourse = Prisma.CourseGetPayload<{
  include: {
    author: {
      select: {
        fullName: true;
      };
    };
    modules: {
      select: {
        _count: {
          select: {
            lessons: true;
          };
        };
      };
    };
    _count: {
      select: {
        enrollments: true;
      };
    };
  };
}>;

type CourseCardProps = {
  course: PublicCourseCardCourse;
  progress?: number;
};

const levelBadgeClass = (level: PublicCourseCardCourse["level"]) => {
  if (level === "BEGINNER") return "bg-emerald-100 text-emerald-900 border border-emerald-200";
  if (level === "INTERMEDIATE") return "bg-sky-100 text-sky-900 border border-sky-200";
  return "bg-violet-100 text-violet-900 border border-violet-200";
};

const levelLabel = (level: PublicCourseCardCourse["level"]) => {
  if (level === "BEGINNER") return "Beginner";
  if (level === "INTERMEDIATE") return "Intermediate";
  return "Advanced";
};

const getText = (value: unknown): string => {
  if (!value) return "";
  if (typeof value === "string") return value;
  if (typeof value === "object") {
    const record = value as Record<string, unknown>;
    if (typeof record.en === "string") return record.en;
    if (typeof record.es === "string") return record.es;
  }
  return "";
};

export default function CourseCard({ course, progress = 0 }: CourseCardProps) {
  const lessonsCount = course.modules.reduce((total, module) => total + module._count.lessons, 0);
  const title = getText(course.title) || "Untitled course";
  const summary = getText(course.description) || "Course details will be published soon.";
  const instructor = course.author.fullName || "ACVE Team";

  return (
    <Link href={`/courses/${course.slug}`} className="group block h-full">
      <Card className="h-full border-border hover:-translate-y-0.5 hover:border-primary/60 transition-all duration-200">
        <CardHeader className="space-y-3 pb-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Badge variant="secondary" className={levelBadgeClass(course.level)}>
                {levelLabel(course.level)}
              </Badge>
              <Badge variant="outline">{course.status.toLowerCase()}</Badge>
            </div>
            <span className="text-sm font-semibold text-muted-foreground">{lessonsCount} lessons</span>
          </div>
          <CardTitle className="text-[1.85rem] leading-tight md:text-[2rem]">{title}</CardTitle>
          <CardDescription className="text-base leading-relaxed">{summary}</CardDescription>
        </CardHeader>

        <CardContent className="pt-4 text-base text-muted-foreground">
          {progress > 0 ? (
            <div className="mb-4">
              <ProgressBar value={progress} label={`Progress ${progress}%`} />
            </div>
          ) : null}
          <div className="mb-1 flex items-center justify-between">
            <span>{course._count.enrollments.toLocaleString()} enrolled</span>
            <span>{lessonsCount} lessons</span>
          </div>
        </CardContent>

        <CardFooter className="flex items-center justify-between border-t bg-muted/50 px-6 py-4 text-sm text-muted-foreground">
          <span>By {instructor}</span>
          <div className="flex items-center gap-2">
            <span className="font-semibold text-primary">View Course</span>
            <span className="text-primary opacity-0 transition-opacity group-hover:opacity-100">{">"}</span>
          </div>
        </CardFooter>
      </Card>
    </Link>
  );
}