import { Link } from "react-router-dom";

import { cn } from "@/lib/cn";
import { formatBytes } from "@/lib/format";
import type { MediaItem } from "@/lib/types";

const ratingStyles: Record<string, string> = {
  s: "border-ctp-green/30 bg-ctp-green/15 text-ctp-green",
  q: "border-ctp-peach/30 bg-ctp-peach/15 text-ctp-peach",
  e: "border-ctp-red/30 bg-ctp-red/15 text-ctp-red",
};

const ratingLabels: Record<string, string> = {
  s: "S",
  q: "Q",
  e: "E",
};

export function MediaCard({ item }: { item: MediaItem }) {
  const preview =
    item.kind === "video"
      ? `/api/files/${item.j_id}/thumbnail/`
      : `/api/files/${item.j_id}/raw/`;

  return (
    <Link
      to={`/detail/${item.j_id}`}
      className="group overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-base transition hover:border-ctp-surface2"
    >
      <div className="relative aspect-square overflow-hidden bg-ctp-mantle">
        <img
          src={preview}
          alt={item.filename}
          loading="lazy"
          className="h-full w-full object-cover transition duration-200 group-hover:scale-[1.03]"
        />
        {item.rating ? (
          <span
            className={cn(
              "absolute left-2 top-2 rounded-full border px-2 py-0.5 font-mono text-[11px] font-medium",
              ratingStyles[item.rating],
            )}
          >
            {ratingLabels[item.rating]}
          </span>
        ) : null}
        <span className="absolute right-2 top-2 rounded-sm bg-ctp-crust/80 px-1.5 py-0.5 font-mono text-[10px] uppercase text-ctp-overlay1">
          {item.extension}
        </span>
        <div className="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-ctp-mantle via-ctp-mantle/80 to-transparent p-2 pt-8 transition duration-150 group-hover:translate-y-0">
          <p className="font-mono text-[11px] text-ctp-subtext0">
            {formatBytes(item.size)}
          </p>
        </div>
      </div>
      <div className="px-2.5 py-2">
        <p className="font-mono text-[10px] text-ctp-overlay0">{item.j_id}</p>
        <p
          className="truncate font-mono text-xs text-ctp-subtext1"
          title={item.filename}
        >
          {item.filename}
        </p>
      </div>
    </Link>
  );
}