import Link from "next/link";
import { GraduationCap, Building2, BookOpen } from "lucide-react";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import { cn } from "@/shared/lib/utils";
import { Textbook } from "../types";

interface TextbookCardProps {
  textbook: Textbook;
  hrefBase?: string;
}

export function TextbookCard({ textbook, hrefBase }: TextbookCardProps) {
  const base = hrefBase || "/teacher/textbooks";
  return (
    <Link href={`${base}/${textbook.id}`} className="block h-full">
      <Card
        className={cn(
          "group h-full overflow-hidden transition-all duration-300 ease-out",
          "hover:-translate-y-1 hover:shadow-md hover:border-primary/50"
        )}
      >
        <div className="relative aspect-[4/3] w-full overflow-hidden bg-muted/30 p-6 flex items-center justify-center">
          {/* Fallback Cover Visualization */}
          <div className="relative z-10 flex h-24 w-20 flex-col items-center justify-center rounded-sm bg-background shadow-sm border transition-transform duration-300 group-hover:scale-110">
            <div className="h-full w-full bg-gradient-to-br from-primary/10 to-primary/5 p-2">
              <div className="h-1 w-full rounded-full bg-primary/20 mb-1" />
              <div className="h-1 w-2/3 rounded-full bg-primary/20" />
            </div>
          </div>
          
          {/* Decorative Background Pattern */}
          <div className="absolute inset-0 bg-grid-black/[0.02] dark:bg-grid-white/[0.02]" />
        </div>

        <CardHeader className="p-4 pb-2">
          <div className="flex items-start justify-between gap-2">
            <div className="space-y-1">
              <Badge variant="outline" className="w-fit text-[10px] h-5 px-1.5 font-normal border-primary/20 text-primary bg-primary/5">
                {textbook.subject}
              </Badge>
              <CardTitle className="line-clamp-2 text-base leading-tight">
                {textbook.title}
              </CardTitle>
            </div>
          </div>
        </CardHeader>

        <CardContent className="p-4 pt-0 text-sm text-muted-foreground">
          <div className="flex flex-col gap-1.5">
            <div className="flex items-center gap-2 text-xs">
              <GraduationCap className="h-3.5 w-3.5 text-muted-foreground/70" />
              <span>{textbook.grade}</span>
            </div>
            <div className="flex items-center gap-2 text-xs">
              <Building2 className="h-3.5 w-3.5 text-muted-foreground/70" />
              <span className="line-clamp-1">{textbook.publisher || "Unknown Publisher"}</span>
            </div>
          </div>
        </CardContent>

        <CardFooter className="p-4 pt-0 mt-auto">
          <div className="flex items-center gap-2 text-xs text-muted-foreground/80 bg-muted/30 px-2 py-1 rounded-md w-full">
            <BookOpen className="h-3.5 w-3.5" />
            <span>{textbook._count?.chapters || 0} Chapters</span>
          </div>
        </CardFooter>
      </Card>
    </Link>
  );
}