import { Link } from "@tanstack/react-router";
import { Award, CalendarDays, Clock, Lock, Sparkles } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { courseAccessLabel, isSponsoredCourse, requiresPro } from "@/lib/plans";

export type CourseSummary = {
  slug: string;
  title: string;
  summary: string;
  category_slug: string;
  level: string;
  duration_minutes?: number;
  duration_weeks?: number;
  learning_hours?: number;
  price_kes?: number;
  credential_level?: string;
  group_code?: string;
  group_name?: string;
  domain_code?: string;
  is_premium?: boolean;
};

export function formatKes(price?: number) {
  if (!price) return "Fully sponsored";
  return `KSh ${price.toLocaleString("en-KE")}`;
}

const credentialStyle: Record<string, string> = {
  Foundation: "bg-gold text-gold-foreground",
  Professional: "bg-terracotta text-terracotta-foreground",
  Growth: "bg-terracotta text-terracotta-foreground",
  Advanced: "bg-secondary text-secondary-foreground",
  Executive: "bg-plum text-plum-foreground",
  Mastery: "bg-plum text-plum-foreground",
};

export function CourseCard({
  course,
  categoryName,
  isPro = false,
}: {
  course: CourseSummary;
  categoryName?: string | undefined;
  isPro?: boolean;
}) {
  const credential = course.credential_level ?? "";
  const sponsored = isSponsoredCourse(course);
  const locked = requiresPro(course) && !isPro;

  return (
    <Card className="card-hover group relative flex h-full flex-col overflow-hidden border-border/70">
      <div className="h-1.5 bg-ember" aria-hidden />
      <CardHeader className="gap-3">
        <div className="flex flex-wrap items-center gap-2">
          {course.group_code ? (
            <Badge variant="outline" className="border-primary/40 text-primary">
              {course.group_code} · {categoryName ?? course.category_slug}
            </Badge>
          ) : (
            <Badge variant="outline">{categoryName ?? course.category_slug}</Badge>
          )}
          {credential ? (
            <Badge className={credentialStyle[credential] ?? "bg-muted text-muted-foreground"}>
              <Award className="mr-1 size-3" /> {credential}
            </Badge>
          ) : null}
          {sponsored ? (
            <Badge className="bg-primary text-primary-foreground">
              <Sparkles className="mr-1 size-3" /> Fully sponsored
            </Badge>
          ) : null}
        </div>
        <CardTitle className="font-display text-lg leading-snug">
          {locked ? (
            <span>{course.title}</span>
          ) : (
            <Link
              to="/courses/$slug"
              params={{ slug: course.slug }}
              className="decoration-primary/50 underline-offset-4 group-hover:underline"
            >
              {course.title}
            </Link>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent className="mt-auto flex flex-col gap-4">
        <div className={locked ? "select-none blur-sm" : undefined} aria-hidden={locked}>
          <p className="line-clamp-3 text-sm text-muted-foreground">{course.summary}</p>
          <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
            {course.duration_weeks ? (
              <span className="flex items-center gap-1.5">
                <CalendarDays className="size-3.5" /> {course.duration_weeks} weeks
              </span>
            ) : null}
            {course.learning_hours ? (
              <span className="flex items-center gap-1.5">
                <Clock className="size-3.5" /> {course.learning_hours} hrs
              </span>
            ) : null}
          </div>
        </div>

        {locked ? (
          <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border bg-surface p-3">
            <span className="flex items-center gap-2 text-xs font-semibold text-muted-foreground">
              <Lock className="size-3.5" /> Pro course · {courseAccessLabel(course)}
            </span>
            <Button asChild size="sm" className="rounded-full">
              <Link to="/pricing">Unlock with Pro</Link>
            </Button>
          </div>
        ) : (
          <p className="font-display text-base font-bold text-primary">
            {courseAccessLabel(course)}
          </p>
        )}
      </CardContent>
    </Card>
  );
}