import { useRef, type ReactNode, type MouseEvent } from 'react';

interface Props {
  title?: string;
  subtitle?: string;
  children?: ReactNode;
  onClick?: () => void;
  /** border = 边框流光，inner = 内光斑，both = 双层全开 */
  glow?: 'border' | 'inner' | 'both';
  className?: string;
}

export function SpotlightCard({
  title,
  subtitle,
  children,
  onClick,
  glow = 'both',
  className = '',
}: Props) {
  const ref = useRef<HTMLDivElement>(null);

  const setSpot = (on: boolean, e?: MouseEvent) => {
    const el = ref.current;
    if (!el) return;
    el.style.setProperty('--spot-on', on ? '1' : '0');
    if (on && e) {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', `${e.clientX - r.left}px`);
      el.style.setProperty('--my', `${e.clientY - r.top}px`);
    }
  };

  const hasBorder = glow === 'border' || glow === 'both';
  const hasInner = glow === 'inner' || glow === 'both';

  return (
    <div
      ref={ref}
      onMouseMove={(e) => setSpot(true, e)}
      onMouseLeave={() => setSpot(false)}
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onKeyDown={onClick ? (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onClick();
        }
      } : undefined}
      style={{ '--spot-on': '0', '--mx': '50%', '--my': '50%' } as React.CSSProperties}
      className={`
        group relative rounded-2xl p-px overflow-hidden
        bg-[var(--glass-border)]
        ${onClick ? 'cursor-pointer' : ''}
        ${className}
      `}
    >
      {/* 边框流光层：跟随鼠标的 accent 渐变，被内层盖住中心，只露 1px 光边 */}
      {hasBorder && (
        <div
          aria-hidden="true"
          className="absolute inset-0 rounded-2xl pointer-events-none transition-opacity duration-[var(--dur-slow)]"
          style={{
            opacity: 'var(--spot-on)',
            background:
              'radial-gradient(220px circle at var(--mx) var(--my), var(--color-accent), transparent 70%)',
          }}
        />
      )}

      {/* 内容层：白底盖住中心 */}
      <div className="relative rounded-[calc(1rem-1px)] bg-[var(--color-surface)] overflow-hidden">
        {/* 内光斑层：低透明度 accent，位于内容之下 */}
        {hasInner && (
          <div
            aria-hidden="true"
            className="absolute inset-0 pointer-events-none transition-opacity duration-[var(--dur-slow)]"
            style={{
              opacity: 'var(--spot-on)',
              background:
                'radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%)',
            }}
          />
        )}

        <div className="relative p-6">
          {(title || subtitle) && (
            <div className="mb-4">
              {title && (
                <h3 className="text-base" style={{ fontWeight: 'var(--fw-semibold)' }}>
                  {title}
                </h3>
              )}
              {subtitle && (
                <p className="text-sm text-[var(--color-text-muted)] mt-1">{subtitle}</p>
              )}
            </div>
          )}
          {children}
        </div>
      </div>
    </div>
  );
}