import type React from "react";
import type { Colle } from "~/lib/api";

import { Link } from "react-router";
import {
  Card,
  CardContent,
  CardHeader,
  CardFooter,
} from "~/components/ui/card";
import { User, UserCheck, Paperclip, Star, MapPinHouse } from "lucide-react";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { formatDate, formatGrade, formatTime } from "~/lib/utils";

// TODO: Preferences for subject colors
const getSubjectColor = (_: string) => {
  // Mock placeholder function
  return "bg-blue-100 text-blue-800"; // Default color
};
const getSubjectEmoji = (_: string) => {
  // Mock placeholder function
  return "📚"; // Default emoji
};

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

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

  const subjectColor = getSubjectColor(colle.subject.name);
  const subjectEmoji = getSubjectEmoji(colle.subject.name);

  return (
    <Link to={`/colles/${colle.id}`}>
      <Card
        id={`colle-${colle.id}`}
        className="h-full cursor-pointer hover:shadow-md transition-shadow border-primary"
      >
        <CardHeader className="pb-0 pt-3 px-4 flex flex-row items-center justify-between">
          <div>
            <div className="font-medium">{formatDate(colle.date)}</div>
            <div className="font-normal text-sm text-muted-foreground">
              {formatTime(colle.date)}
            </div>
          </div>
          {colle.grade && (
            <div className="flex items-center gap-2 h-full mb-3">
              <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>
          )}
        </CardHeader>

        <CardContent className="pb-0 pt-0 px-4">
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <User className="h-4 w-4 text-muted-foreground" />
                <span className="font-medium">{colle.student.fullName}</span>
              </div>

              <div className="flex items-center gap-2">
                <UserCheck className="h-4 w-4 text-muted-foreground" />
                <span>{colle.examiner.name}</span>
              </div>

              {colle.room && (
                <div className="flex items-center gap-2">
                  <MapPinHouse className="h-4 w-4 text-muted-foreground" />
                  <span>{colle.room.name}</span>
                </div>
              )}
            </div>
          </div>
        </CardContent>

        <CardFooter className="pt-1 pb-3 px-4 flex flex-col items-start">
          <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>
            {/* TODO: Attachments */}
            {/* {colle.attachmentsCount > 0 && (
              <div className="flex items-center gap-1 text-muted-foreground">
                <Paperclip className="h-3.5 w-3.5" />
                <span className="text-xs">{colle.attachmentsCount}</span>
              </div>
            )} */}
          </div>
        </CardFooter>
      </Card>
    </Link>
  );
}