NextEdu/src/modules/textbooks/components/textbook-card.tsx

import Link from "next/link";
import { Book, MoreVertical, Edit, Trash2, BookOpen, GraduationCap, Building2 } from "lucide-react";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import { Button } from "@/shared/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu";
import { cn, formatDate } from "@/shared/lib/utils";
import { Textbook } from "../types";

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

const subjectColorMap: Record<string, string> = {
  Mathematics: "bg-blue-50 text-blue-700 border-blue-200/70 dark:bg-blue-950/50 dark:text-blue-200 dark:border-blue-900/60",
  Physics: "bg-purple-50 text-purple-700 border-purple-200/70 dark:bg-purple-950/50 dark:text-purple-200 dark:border-purple-900/60",
  Chemistry: "bg-teal-50 text-teal-700 border-teal-200/70 dark:bg-teal-950/50 dark:text-teal-200 dark:border-teal-900/60",
  English: "bg-orange-50 text-orange-700 border-orange-200/70 dark:bg-orange-950/50 dark:text-orange-200 dark:border-orange-900/60",
  History: "bg-amber-50 text-amber-700 border-amber-200/70 dark:bg-amber-950/50 dark:text-amber-200 dark:border-amber-900/60",
  Biology: "bg-emerald-50 text-emerald-700 border-emerald-200/70 dark:bg-emerald-950/50 dark:text-emerald-200 dark:border-emerald-900/60",
  Geography: "bg-sky-50 text-sky-700 border-sky-200/70 dark:bg-sky-950/50 dark:text-sky-200 dark:border-sky-900/60",
};

export function TextbookCard({ textbook, hrefBase, hideActions }: TextbookCardProps) {
  const base = hrefBase || "/teacher/textbooks";
  const colorClass = subjectColorMap[textbook.subject] || "bg-zinc-50 text-zinc-700 border-zinc-200/70 dark:bg-zinc-950/50 dark:text-zinc-200 dark:border-zinc-800/70";

  return (
    <Card className="group flex flex-col h-full overflow-hidden border-border/60 transition-all duration-300 hover:shadow-md hover:border-primary/50">
      <Link href={`${base}/${textbook.id}`} className="flex-1">
        <div className={cn("relative h-32 w-full overflow-hidden p-5", colorClass)}>
          <div className="relative z-10 flex h-full flex-col justify-between">
            <Badge variant="secondary" className="w-fit bg-background/80 border border-border/60 shadow-sm">
              {textbook.subject}
            </Badge>
            <div className="flex items-center gap-2">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-background text-foreground shadow-sm ring-1 ring-border/60">
                <Book className="h-5 w-5" />
              </div>
              <div className="text-xs font-medium text-foreground/70">
                {textbook.grade || "Grade N/A"}
              </div>
            </div>
          </div>
        </div>

        <CardHeader className="p-4 pb-2">
          <div className="flex items-start justify-between gap-2">
            <h3 className="font-semibold text-lg leading-tight line-clamp-2 group-hover:text-primary transition-colors">
              {textbook.title}
            </h3>
          </div>
        </CardHeader>

        <CardContent className="p-4 pt-1 pb-2">
          <div className="flex flex-wrap gap-y-1 gap-x-4 text-xs text-muted-foreground">
            <div className="flex items-center gap-1.5">
              <GraduationCap className="h-3.5 w-3.5" />
              <span>{textbook.grade || "Grade N/A"}</span>
            </div>
            <div className="flex items-center gap-1.5">
              <Building2 className="h-3.5 w-3.5" />
              <span className="truncate max-w-[120px]" title={textbook.publisher || ""}>
                {textbook.publisher || "Publisher N/A"}
              </span>
            </div>
          </div>
        </CardContent>
      </Link>

        <CardFooter className="p-4 pt-2 mt-auto border-t border-border/60 bg-muted/30 flex items-center justify-between">
        <div className="flex items-center gap-2 text-xs text-muted-foreground tabular-nums">
          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-background/80 ring-1 ring-border/60">
            <BookOpen className="h-3.5 w-3.5" />
          </div>
          <span>{textbook._count?.chapters || 0} Chapters</span>
        </div>
        
        <div className="flex items-center gap-1">
           <span className="text-[10px] text-muted-foreground/60 mr-2">
            Updated {formatDate(textbook.updatedAt)}
           </span>
           {!hideActions && (
             <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="h-6 w-6 -mr-2">
                  <MoreVertical className="h-3.5 w-3.5" />
                  <span className="sr-only">More options</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem asChild>
                   <Link href={`${base}/${textbook.id}`}>
                     <Edit className="mr-2 h-4 w-4" />
                     Edit Content
                   </Link>
                </DropdownMenuItem>
                <DropdownMenuItem className="text-destructive focus:text-destructive">
                  <Trash2 className="mr-2 h-4 w-4" />
                  Delete
                </DropdownMenuItem>
              </DropdownMenuContent>
             </DropdownMenu>
           )}
        </div>
      </CardFooter>
    </Card>
  );
}