"use client";
import { Eye } from "lucide-react";
import type { LiveUser } from "@/types/live";

function kFormat(n: number): string {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
  if (n >= 1_000) return (n / 1_000).toFixed(1) + "K";
  return String(n);
}

interface LiveCardProps {
  live: LiveUser;
  onClick: () => void;
}

export function LiveCard({ live, onClick }: LiveCardProps) {
  return (
    <button
      onClick={onClick}
      className="group relative flex flex-col rounded-2xl overflow-hidden text-left w-full"
      style={{
        background: "var(--card)",
        border: "1px solid var(--border-soft)",
        boxShadow: "0 2px 14px rgba(0,0,0,0.12)",
        transition: "transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s",
      }}
      onMouseEnter={(e) => {
        (e.currentTarget as HTMLElement).style.transform = "scale(1.025) translateY(-4px)";
        (e.currentTarget as HTMLElement).style.boxShadow = "0 16px 40px rgba(0,0,0,0.28)";
      }}
      onMouseLeave={(e) => {
        (e.currentTarget as HTMLElement).style.transform = "";
        (e.currentTarget as HTMLElement).style.boxShadow = "0 2px 14px rgba(0,0,0,0.12)";
      }}
    >
      {/* Thumbnail area */}
      <div className="relative overflow-hidden" style={{ height: 180 }}>
        {live.hostImage ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={live.hostImage}
            alt={live.hostName}
            className="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
          />
        ) : (
          <div
            className="absolute inset-0 flex items-center justify-center text-3xl font-black"
            style={{
              background: "linear-gradient(135deg, var(--accent), var(--deep))",
              color: "white",
            }}
          >
            {live.hostName.charAt(0).toUpperCase()}
          </div>
        )}

        {/* Dark gradient overlay */}
        <div
          className="absolute inset-0"
          style={{
            background: "linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%)",
          }}
        />

        {/* Viewer count — top left */}
        <div
          className="absolute top-2.5 left-2.5 flex items-center gap-1.5 px-2 py-1 rounded-full"
          style={{
            background: "rgba(0,0,0,0.55)",
            backdropFilter: "blur(8px)",
            border: "1px solid rgba(255,255,255,0.12)",
          }}
        >
          <Eye size={11} color="white" />
          <span className="text-white text-[10px] font-bold">
            {kFormat(live.viewerCount)}
          </span>
        </div>

        {/* LIVE badge — top right */}
        <div className="absolute top-2.5 right-2.5 flex items-center gap-1 px-2.5 py-1 rounded-full"
          style={{ background: "rgba(220,38,38,0.9)", backdropFilter: "blur(4px)" }}
        >
          <span
            className="inline-block w-1.5 h-1.5 rounded-full bg-white"
            style={{ animation: "livePulse 1.2s ease-in-out infinite" }}
          />
          <span className="text-white text-[9px] font-black uppercase tracking-widest">
            Live
          </span>
        </div>
      </div>

      {/* Host info — bottom strip */}
      <div className="flex items-center gap-2 px-3 py-2.5">
        <div className="relative shrink-0">
          {live.hostImage ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={live.hostImage}
              alt={live.hostName}
              className="w-7 h-7 rounded-full object-cover"
              style={{ outline: "1.5px solid var(--accent)", outlineOffset: "1px" }}
            />
          ) : (
            <div
              className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-black text-white"
              style={{ background: "var(--accent)" }}
            >
              {live.hostName.charAt(0).toUpperCase()}
            </div>
          )}
          <span
            className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2"
            style={{
              background: "#22c55e",
              borderColor: "var(--card)",
            }}
          />
        </div>
        <p
          className="flex-1 text-xs font-semibold truncate"
          style={{ color: "var(--text-primary)" }}
        >
          {live.hostName}
        </p>
      </div>

      <style>{`
        @keyframes livePulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.4; transform: scale(0.8); }
        }
      `}</style>
    </button>
  );
}