'use client';

import { useRef, useState, useCallback, type ReactNode } from 'react';
import { motion } from 'framer-motion';

interface InkGlowCardProps {
  children: ReactNode;
  index?: number;
  accentColorRgb?: string;
  glowStart?: string;
  glowEnd?: string;
  className?: string;
  href?: string;
  onClick?: () => void;
}

const DEFAULT_ACCENT = '196, 30, 58';
const DEFAULT_GLOW_START = '#C41E3A';
const DEFAULT_GLOW_END = '#D97706';

export function InkGlowCard({
  children,
  index = 0,
  accentColorRgb = DEFAULT_ACCENT,
  glowStart = DEFAULT_GLOW_START,
  glowEnd = DEFAULT_GLOW_END,
  className = '',
  href,
  onClick,
}: InkGlowCardProps) {
  const cardRef = useRef<HTMLDivElement>(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseMove = useCallback((e: React.MouseEvent) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    setMousePos({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  }, []);

  const content = (
    <>
      <div
        className="absolute inset-0 pointer-events-none transition-opacity duration-500"
        style={{
          opacity: isHovered ? 1 : 0,
          background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(${accentColorRgb}, 0.04), transparent 40%)`,
        }}
      />
      <div className="relative z-10">{children}</div>
    </>
  );

  return (
    <motion.div
      ref={cardRef}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{
        duration: 0.5,
        delay: index * 0.08,
        ease: [0.16, 1, 0.3, 1],
      }}
      className={`relative ink-glow-border rounded-2xl ${className}`}
      style={{
        '--glow-start': glowStart,
        '--glow-end': glowEnd,
      } as React.CSSProperties}
    >
      {href ? (
        <a
          href={href}
          className="relative block rounded-2xl bg-white overflow-hidden transition-all duration-500"
          style={{
            boxShadow: isHovered
              ? `0 16px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(${accentColorRgb}, 0.08)`
              : '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
            transform: isHovered ? 'translateY(-4px)' : 'translateY(0)',
          }}
          onMouseMove={handleMouseMove}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
        >
          {content}
        </a>
      ) : (
        <div
          className="relative rounded-2xl bg-white overflow-hidden transition-all duration-500"
          style={{
            boxShadow: isHovered
              ? `0 16px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(${accentColorRgb}, 0.08)`
              : '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
            transform: isHovered ? 'translateY(-4px)' : 'translateY(0)',
          }}
          onMouseMove={handleMouseMove}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
          onClick={onClick}
          role={onClick ? 'button' : undefined}
          tabIndex={onClick ? 0 : undefined}
        >
          {content}
        </div>
      )}
    </motion.div>
  );
}