"use client";

import { useEffect, useRef, useState } from "react";
import type { PublicTemplate } from "@/lib/client-api";
import { TemplatePreviewModal } from "@/components/templates/TemplatePreviewModal";

interface TemplateCardProps {
  template: PublicTemplate;
  isFavorited: boolean;
  favoriteButton: React.ReactNode;
  actions: React.ReactNode;
}

export function TemplateCard({
  template,
  favoriteButton,
  actions,
}: TemplateCardProps) {
  const [hovered, setHovered] = useState(false);
  const [previewOpen, setPreviewOpen] = useState(false);
  const cardRef = useRef<HTMLDivElement>(null);
  const cursorRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    if (!hovered || !template.hoverCursor) return;
    const card = cardRef.current;
    const cursor = cursorRef.current;
    if (!card || !cursor) return;
    const handleMove = (e: MouseEvent) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      cursor.style.transform = `translate(${x - 24}px, ${y - 24}px)`;
      cursor.style.opacity = "1";
    };
    const handleLeave = () => {
      cursor.style.opacity = "0";
    };
    card.addEventListener("mousemove", handleMove);
    card.addEventListener("mouseleave", handleLeave);
    return () => {
      card.removeEventListener("mousemove", handleMove);
      card.removeEventListener("mouseleave", handleLeave);
    };
  }, [hovered, template.hoverCursor]);

  const useHoverImage = hovered && !!template.hoverImage;
  const imageSrc = useHoverImage
    ? (template.hoverImage as string)
    : template.coverImage;
  const cursorImage = template.hoverCursor;

  const openPreview = () => setPreviewOpen(true);

  return (
    <>
      <div
        ref={cardRef}
        className="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-2xl border border-border bg-surface shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-rose-200 hover:shadow-2xl hover:shadow-rose-500/20"
        style={
          hovered && template.hoverCursor
            ? { cursor: "none" }
            : undefined
        }
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        onClick={openPreview}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            openPreview();
          }
        }}
      >
        <div className="relative h-72 w-full overflow-hidden bg-gradient-to-br from-rose-100 via-pink-50 to-amber-50">
          {imageSrc ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={imageSrc}
              alt={template.name}
              className={`h-full w-full object-cover transition-all duration-500 ${
                useHoverImage ? "scale-105" : "group-hover:scale-105"
              }`}
            />
          ) : (
            <div className="grid h-full w-full place-items-center bg-gradient-to-br from-rose-100 to-pink-100">
              <span className="text-6xl font-bold text-rose-300">
                {template.name.charAt(0)}
              </span>
            </div>
          )}

          <div
            className={`pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent transition-opacity duration-300 ${
              hovered && template.hoverTagline ? "opacity-100" : "opacity-0"
            }`}
          />

          {template.hoverTagline ? (
            <div
              className={`pointer-events-none absolute inset-x-0 bottom-0 px-5 pb-5 transition-all duration-300 ${
                hovered ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0"
              }`}
            >
              <p className="text-base font-semibold text-white drop-shadow-sm">
                {template.hoverTagline}
              </p>
              <p className="mt-0.5 text-xs text-white/80">
                Click to preview →
              </p>
            </div>
          ) : null}

          <div
            className={`pointer-events-none absolute inset-0 grid place-items-center transition-opacity duration-300 ${
              hovered && !template.hoverTagline ? "opacity-100" : "opacity-0"
            }`}
          >
            <span className="rounded-full bg-white/95 px-4 py-1.5 text-xs font-semibold text-rose-700 shadow-md">
              Click to preview →
            </span>
          </div>

          {favoriteButton}

          {cursorImage ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              ref={cursorRef}
              src={cursorImage}
              alt=""
              aria-hidden
              className="pointer-events-none absolute left-0 top-0 h-12 w-12 opacity-0 transition-opacity duration-150"
              style={{ willChange: "transform" }}
            />
          ) : null}
        </div>

        <div className="flex flex-1 flex-col p-5">
          <p className="text-xs font-medium uppercase tracking-wide text-muted">
            {template.category}
          </p>
          <h2 className="mt-1 text-lg font-semibold text-foreground">
            {template.name}
          </h2>
          <p className="mt-1 line-clamp-3 text-sm text-muted">
            {template.description}
          </p>
          <p className="mt-3 text-xs text-muted">
            {template.modules.filter((m) => m.enabled).length} modules · v
            {template.publishedVersion ?? template.version}
          </p>
          <ul className="mt-3 flex flex-wrap gap-1">
            {template.modules
              .filter((m) => m.enabled)
              .slice(0, 6)
              .map((m) => (
                <li
                  key={m.moduleId}
                  className="rounded-full bg-surface-muted px-2 py-0.5 text-[10px] font-medium text-foreground/80"
                >
                  {m.name}
                </li>
              ))}
          </ul>
          <div
            className="mt-auto pt-4"
            onClick={(e) => e.stopPropagation()}
          >
            {actions}
          </div>
        </div>
      </div>

      <TemplatePreviewModal
        template={template}
        open={previewOpen}
        onClose={() => setPreviewOpen(false)}
      />
    </>
  );
}