import type { ReactNode } from "react";
import { cn } from "~/lib/utils";

type CoronaVariant =
  | "gradient"
  | "electric"
  | "emerald"
  | "amber"
  | "coral";

interface DraftPickCellProps {
  pickNumber: number;
  round: number;
  pickInRound: number;
  state: "picked" | "current" | "upcoming";
  pick?: {
    participant: { name: string };
    sport: { name: string };
  };
  corona?: CoronaVariant;
  className?: string;
  children?: ReactNode;
}

const coronaClasses: Record<CoronaVariant, string> = {
  gradient: "[background:linear-gradient(to_bottom,#adf661,#2ce1c1)]",
  electric: "bg-electric",
  emerald: "bg-emerald-500",
  amber: "bg-amber-accent",
  coral: "bg-coral-accent",
};

export function DraftPickCell({
  pickNumber,
  round,
  pickInRound,
  state,
  pick,
  corona = "gradient",
  className,
  children,
}: DraftPickCellProps) {
  const showCorona = state === "picked";

  return (
    <div
      className={cn(
        "relative flex-1 min-w-32 overflow-hidden",
        className,
      )}
    >
      {showCorona && (
        <div
          className={cn(
            "absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg",
            coronaClasses[corona],
          )}
        />
      )}
      <div
        className={cn(
          "relative z-10 h-20 border-2 rounded-lg p-2 transition-all",
          showCorona && "mr-1",
          state === "current"
            ? "border-electric bg-electric/20 shadow-lg shadow-electric/30 ring-2 ring-electric/50 animate-pulse"
            : state === "picked"
              ? "bg-muted border-transparent"
              : "border-border bg-card",
        )}
        title={`Overall Pick #${pickNumber}`}
      >
        <div className="text-xs font-mono text-muted-foreground mb-1">
          {round}.{String(pickInRound).padStart(2, "0")}
        </div>
        {state === "picked" && pick ? (
          <div className="text-xs">
            <div className="font-semibold truncate">{pick.participant.name}</div>
            <div className="text-muted-foreground truncate">
              {pick.sport.name}
            </div>
          </div>
        ) : state === "current" ? (
          <div className="text-sm font-bold text-electric">On Clock</div>
        ) : null}
        {children && <div className="absolute inset-0 pointer-events-none [&_*]:pointer-events-auto">{children}</div>}
      </div>
    </div>
  );
}