import React from "react";
import { cn } from "@/utils";
import { Card } from "@/components/ui/card";
import { cva, type VariantProps } from "class-variance-authority";

const mediaCardVariants = cva(
  "relative overflow-hidden transition-all cursor-pointer border-border/40 group",
  {
    variants: {
      layoutMode: {
        grid: "aspect-video flex flex-col",
        list: "h-[160px] flex flex-row",
      },
      selected: {
        true: "border-brand-DEFAULT ring-1 ring-brand-DEFAULT shadow-md shadow-brand-DEFAULT/20",
        false: "hover:border-brand-DEFAULT/50 hover:shadow-lg hover:shadow-brand-DEFAULT/5 border",
      },
    },
    defaultVariants: {
      layoutMode: "grid",
      selected: false,
    },
  }
);

const footerVariants = cva(
  "mt-auto flex items-center justify-between gap-2",
  {
    variants: {
      layoutMode: {
        grid: "",
        list: "pt-2",
      },
      isHover: {
        true: "max-h-0 opacity-0 group-hover:max-h-[50px] group-hover:opacity-100 group-hover:pt-2 group-hover:border-t group-hover:border-white/20 overflow-hidden transition-all duration-300 ease-in-out",
        false: "",
      },
    },
    compoundVariants: [
      {
        layoutMode: "grid",
        isHover: false,
        className: "border-t border-white/20 pt-2",
      },
    ],
  }
);

export interface MediaCardProps extends VariantProps<typeof mediaCardVariants> {
  onSelect?: () => void;
  className?: string;

  // Media Section
  media: React.ReactNode;
  mediaClassName?: string;

  // Content Section
  title: React.ReactNode;
  titleClassName?: string;

  // Badges (top right or inline with title)
  badges?: React.ReactNode;

  // Main Content
  children?: React.ReactNode;

  // Footer (controls, extra info)
  footer?: React.ReactNode;
  
  // Whether footer should be hidden by default and shown on hover (Grid mode only)
  hoverFooter?: boolean;
}

export function MediaCard({
  layoutMode = "grid",
  selected,
  onSelect,
  className,
  media,
  mediaClassName,
  title,
  titleClassName,
  badges,
  children,
  footer,
  hoverFooter = false,
}: MediaCardProps) {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (onSelect && (e.key === "Enter" || e.key === " ")) {
      e.preventDefault();
      onSelect();
    }
  };

  return (
    <Card
      onClick={onSelect}
      onKeyDown={handleKeyDown}
      role={onSelect ? "button" : undefined}
      tabIndex={onSelect ? 0 : undefined}
      className={cn(
        mediaCardVariants({ layoutMode, selected }),
        className
      )}
    >
      {/* Media Section */}
      <div
        className={cn(
          "bg-muted flex items-center justify-center overflow-hidden relative",
          layoutMode === "grid"
            ? "absolute inset-0 z-0"
            : "w-[280px] h-full shrink-0 border-r border-border/40",
          mediaClassName
        )}
      >
        {media}

        {/* Gradient Overlay (Grid Mode only) */}
        <div
          className={cn(
            "absolute inset-0 bg-gradient-to-t transition-opacity pointer-events-none",
            layoutMode === "grid"
              ? "from-black/60 via-black/10 to-transparent opacity-60"
              : "hidden"
          )}
        />
      </div>

      {/* Content Section */}
      <div
        className={cn(
          "flex flex-col z-10 transition-all",
          layoutMode === "grid"
            ? "absolute inset-x-0 bottom-0 p-3 pt-10 text-white bg-gradient-to-t from-black/80 via-black/40 to-transparent"
            : "flex-1 p-4 justify-between"
        )}
      >
        <div className="flex flex-col gap-1 w-full">
          <div className="flex items-start justify-between w-full gap-2">
            <h3
              className={cn(
                "font-bold truncate transition-colors flex-1 min-w-0",
                layoutMode === "grid" ? "text-base text-white drop-shadow-md" : "text-lg",
                selected
                  ? "text-brand-DEFAULT"
                  : layoutMode === "grid" ? "text-white group-hover:text-brand-DEFAULT" : "text-foreground group-hover:text-brand-DEFAULT",
                titleClassName
              )}
            >
              {title}
            </h3>
            {badges && (
              <div className="flex items-center gap-2 shrink-0">{badges}</div>
            )}
          </div>

          <div
            className={cn(
              "line-clamp-2",
              layoutMode === "grid" ? "text-xs text-white/90 drop-shadow-sm font-medium leading-relaxed" : "text-sm text-muted-foreground"
            )}
          >
            {children}
          </div>
        </div>

        {/* Footer Section */}
        {footer && (
          <div
            className={cn(
              "mt-auto flex items-center justify-between gap-2",
              layoutMode === "grid" && !hoverFooter ? "border-t border-white/20 pt-2" : "",
              layoutMode === "grid" && hoverFooter ? "max-h-0 opacity-0 group-hover:max-h-[50px] group-hover:opacity-100 group-hover:pt-2 group-hover:border-t group-hover:border-white/20 overflow-hidden transition-all duration-300 ease-in-out" : "",
              layoutMode === "list" ? "pt-2" : ""
            )}
          >
            {footer}
          </div>
        )}
      </div>
    </Card>
  );
}
