import Link from "next/link";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import type { CourseWithInstitute } from "@/lib/types";

function formatFee(amount: number | null, currency: string | null): string {
  if (amount == null) return "—";
  const value = amount.toLocaleString();
  return currency ? `${currency} ${value}` : value;
}

function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="flex items-start justify-between gap-2 text-sm">
      <span className="text-muted-foreground">{label}</span>
      <span className="text-right font-medium">{value ?? "—"}</span>
    </div>
  );
}

export function CourseCard({
  course,
  basePath = "/course-finder",
}: {
  course: CourseWithInstitute;
  basePath?: string;
}) {
  const institute = course.institute;
  const levelLabel = course.level;

  return (
    <Card className="flex h-full flex-col">
      <CardHeader className="gap-3">
        <div className="flex items-center gap-3">
          {institute?.logo_url ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={institute.logo_url}
              alt={institute.name}
              className="size-10 shrink-0 rounded-md object-contain ring-1 ring-foreground/10"
            />
          ) : (
            <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground ring-1 ring-foreground/10">
              {institute?.name?.charAt(0)?.toUpperCase() ?? "?"}
            </div>
          )}
          <div className="min-w-0">
            <p className="truncate text-sm font-medium">
              {institute?.name ?? "Unknown institute"}
            </p>
            {levelLabel && (
              <p className="text-xs uppercase tracking-wide text-muted-foreground">
                {levelLabel}
              </p>
            )}
          </div>
        </div>
        <h3 className="line-clamp-2 text-base font-bold text-brand-blue">
          {course.title}
        </h3>
      </CardHeader>

      <CardContent className="flex flex-1 flex-col gap-2">
        <DetailRow label="Country" value={course.country} />
        <DetailRow
          label="Application Fee"
          value={formatFee(course.application_fee, course.currency)}
        />
        <DetailRow
          label="Yearly Tuition Fee"
          value={formatFee(course.yearly_tuition_fee, course.currency)}
        />
        <DetailRow label="Duration" value={course.duration_label} />
        <DetailRow label="Intake Months" value={course.intake_months} />
        <DetailRow label="Intake Year" value={course.intake_year} />
        <DetailRow label="Level" value={course.level} />

        {course.tags?.length > 0 && (
          <div className="mt-2 flex flex-wrap gap-1.5">
            {course.tags.map((tag) => (
              <Badge key={tag} variant="secondary">
                {tag}
              </Badge>
            ))}
          </div>
        )}
      </CardContent>

      <CardFooter className="grid grid-cols-2 gap-2 border-t border-foreground/10 pt-4">
        <Button asChild variant="outline" size="sm">
          <Link href={`${basePath}/${course.id}`}>View</Link>
        </Button>
        <Button
          asChild
          size="sm"
          className="bg-brand-orange text-white hover:bg-brand-orange/90"
        >
          <Link href={`${basePath}/${course.id}/apply`}>Apply Now</Link>
        </Button>
      </CardFooter>
    </Card>
  );
}