import type { Colle, UserPreferences } from "~/lib/api";

import { Link } from "react-router";
import { Card } from "~/components/ui/card";
import { User, Star, CalendarDays, MapPin, Paperclip } from "lucide-react";
import { Badge } from "~/components/ui/badge";
import {
  cn,
  formatDate,
  formatGrade,
  formatTime,
  getColorClass,
  getSubjectColor,
  getSubjectEmoji,
} from "~/lib/utils";

type ColleCardProps = {
  colle: Colle;
  onToggleFavorite: (id: number, favorite: boolean) => void;
  isFavorite: boolean;
  preferences: UserPreferences;
};

export default function ColleCard({
  colle,
  onToggleFavorite,
  isFavorite,
  preferences,
}: ColleCardProps) {
  // TODO: Favorites
  // const handleToggleFavorite = (e: React.MouseEvent) => {
  //   e.stopPropagation(); // Prevent card click
  //   e.preventDefault();
  //   const newValue = !isFavorite;
  //   onToggleFavorite(colle.id, newValue);
  // };

  const subjectColor = getColorClass(
    getSubjectColor(colle.subject.name, preferences)
  );
  const subjectEmoji = getSubjectEmoji(colle.subject.name, preferences);
  const attachmentsCount = colle.attachments?.length || 0;

  return (
    <Link to={`/colles/${colle.id}`}>
      <Card
        id={`colle-${colle.id}`}
        className="p-0 overflow-hidden hover:shadow-lg transition-shadow max-w-sm"
      >
        <div className="flex min-h-40">
          <div
            className={cn(
              "p-2 flex flex-col justify-center items-center min-w-[4px]",
              subjectColor
            )}
          ></div>

          <div className="flex-1 p-3 flex flex-col justify-between">
            <div>
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-bold text-foreground">
                  {colle.student.fullName}
                </h3>
                {colle.grade && (
                  <div className="flex items-center gap-2 h-full">
                    {/* <Button
                      variant="ghost"
                      size="icon"
                      className={`h-8 w-8 ${
                        isFavorite ? "text-yellow-500" : "text-muted-foreground"
                      }`}
                      onClick={handleToggleFavorite}
                    >
                      <Star
                        className={`h-5 w-5 ${
                          isFavorite ? "fill-yellow-500" : ""
                        }`}
                      />
                      <span className="sr-only">Ajouter aux favoris</span>
                    </Button> */}
                    <div
                      className={`px-2 py-1 rounded-md text-sm font-medium ${subjectColor}`}
                    >
                      {formatGrade(colle.grade)}/20
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div className="text-sm text-primary grid gap-1">
              <div className="flex items-center gap-1">
                <CalendarDays className="h-3 w-3" />
                <span>
                  {formatDate(colle.date)} à {formatTime(colle.date)}
                </span>
              </div>
              <div className="flex items-center gap-1">
                <MapPin className="h-3 w-3" />
                <span>{colle.room?.name}</span>
              </div>
              <div className="flex items-center gap-1">
                <User className="h-3 w-3" />
                <span>{colle.examiner?.name}</span>
              </div>
            </div>

            <div className="w-full flex justify-between items-center">
              <div className="flex items-center gap-1">
                <Badge className={subjectColor}>
                  {colle.subject.name + " " + subjectEmoji}
                </Badge>
                {isFavorite && (
                  <Badge variant="secondary">
                    <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
                    Favori
                  </Badge>
                )}
              </div>
              {attachmentsCount > 0 && (
                <div className="flex items-center gap-1 text-muted-foreground">
                  <Paperclip className="h-3.5 w-3.5" />
                  <span className="text-xs">{attachmentsCount}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </Card>
    </Link>
  );
}