import { memo } from "react";
import { cn } from "@/lib/cn";
import type { Class } from "@/types";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import {
  MoreVerticalIcon,
  EditIcon,
  TrashIcon,
  LocationIcon,
  UserIcon,
} from "@/components/ui";

interface ClassCardProps {
  classData: Class;
  index: number;
  onEdit: () => void;
  onDelete: () => void;
}

const gradients = [
  "bg-gradient-to-b from-[#667EEA] to-[#764BA2]",
  "bg-gradient-to-b from-[#F857A6] to-[#FF5858]",
  "bg-gradient-to-b from-[#00DBDE] to-[#3A7BD5]",
  "bg-gradient-to-b from-[#43E97B] to-[#38F9D7]",
  "bg-gradient-to-b from-[#FA709A] to-[#FEE140]",
];

export const ClassCard = memo(function ClassCard({
  classData,
  index,
  onEdit,
  onDelete,
}: ClassCardProps) {
  const gradient = gradients[index % gradients.length];

  return (
    <div
      className={cn(
        "relative rounded-2xl p-5 bp-717:p-6 text-white",
        "shadow-card hover:shadow-card-hover transition-all duration-300",
        "animate-slide-up",
        gradient
      )}
      style={{
        animationDelay: `${index * 100}ms`,
        animationFillMode: "backwards",
      }}
    >
      <div className="flex items-start justify-between mb-2">
        <h3 className="text-lg bp-717:text-xl font-semibold pr-8">
          {classData.course_name}
        </h3>

        <DropdownMenu.Root>
          <DropdownMenu.Trigger asChild>
            <button
              className={cn(
                "absolute top-4 right-4 p-1.5 rounded-lg",
                "hover:bg-white/20 transition-colors",
                "focus:outline-none focus:ring-2 focus:ring-white/50"
              )}
              aria-label="Class options"
            >
              <MoreVerticalIcon size={20} />
            </button>
          </DropdownMenu.Trigger>

          <DropdownMenu.Portal>
            <DropdownMenu.Content
              className={cn(
                "min-w-[160px] bg-white rounded-xl shadow-dialog p-1.5",
                "animate-fade-in z-50"
              )}
              sideOffset={5}
              align="end"
            >
              <DropdownMenu.Item
                className={cn(
                  "flex items-center gap-2 px-3 py-2 rounded-lg text-sm",
                  "text-content cursor-pointer",
                  "hover:bg-slate-100 focus:bg-slate-100 outline-none"
                )}
                onSelect={onEdit}
              >
                <EditIcon size={16} />
                Edit Class
              </DropdownMenu.Item>
              <DropdownMenu.Item
                className={cn(
                  "flex items-center gap-2 px-3 py-2 rounded-lg text-sm",
                  "text-error-600 cursor-pointer",
                  "hover:bg-error-50 focus:bg-error-50 outline-none"
                )}
                onSelect={onDelete}
              >
                <TrashIcon size={16} />
                Delete Class
              </DropdownMenu.Item>
            </DropdownMenu.Content>
          </DropdownMenu.Portal>
        </DropdownMenu.Root>
      </div>

      <p className="text-xs bp-717:text-sm text-white/80 mb-4">
        {classData.chapter_topic}
      </p>

      <div className="flex flex-col gap-2">
        <span
          className={cn(
            "inline-flex items-center gap-2 px-3 py-2 rounded-xl w-fit",
            "bg-white/20 text-white text-xs bp-717:text-sm font-medium",
            "backdrop-blur-sm"
          )}
        >
          <LocationIcon size={14} />
          {classData.room.name}
        </span>
        <span
          className={cn(
            "inline-flex items-center gap-2 px-3 py-2 rounded-xl w-fit",
            "bg-white/20 text-white text-xs bp-717:text-sm font-medium",
            "backdrop-blur-sm"
          )}
        >
          <UserIcon size={14} />
          {classData.instructor.name}
        </span>
      </div>
    </div>
  );
});