"use client";

import { useEffect, useState, type ReactNode } from "react";

type FlipCardProps = {
  front: ReactNode;
  back: ReactNode;
  frontLabel: string;
  backLabel: string;
  intervalMs?: number;
  onFlip?: (showingBack: boolean) => void;
  className?: string;
};

const INTERACTIVE = "a, button, input, label, select, textarea";

export function FlipCard({
  front,
  back,
  frontLabel,
  backLabel,
  intervalMs = 4500,
  onFlip,
  className = "",
}: FlipCardProps) {
  const [flipped, setFlipped] = useState(false);
  const [paused, setPaused] = useState(false);

  const flip = () => {
    setFlipped(!flipped);
    onFlip?.(!flipped);
  };

  useEffect(() => {
    if (paused || window.matchMedia("(prefers-reduced-motion: reduce)").matches)
      return;
    const id = window.setInterval(flip, intervalMs);
    return () => window.clearInterval(id);
  });

  return (
    <div
      className={`min-w-0 perspective-[2000px] ${className}`}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onFocus={() => setPaused(true)}
      onBlur={() => setPaused(false)}
    >
      <div
        onClick={(e) => {
          if (!(e.target as HTMLElement).closest(INTERACTIVE)) flip();
        }}
        className={`grid cursor-pointer grid-cols-[minmax(0,1fr)] transition-transform duration-700 ease-[cubic-bezier(.2,.7,.2,1)] transform-3d ${
          flipped ? "rotate-y-180" : ""
        }`}
      >
        <div
          inert={flipped}
          className="col-start-1 row-start-1 backface-hidden"
        >
          {front}
        </div>
        <div
          inert={!flipped}
          className="col-start-1 row-start-1 rotate-y-180 backface-hidden"
        >
          {back}
        </div>
      </div>
      <button
        type="button"
        onClick={flip}
        aria-pressed={flipped}
        className="mt-4 inline-flex items-center gap-2 text-sm font-semibold opacity-80 hover:opacity-100"
      >
        <svg aria-hidden viewBox="0 0 20 20" className="size-4">
          <path
            d="M4 7a6 6 0 0 1 10.5-2.5L16 6M16 2v4h-4M16 13a6 6 0 0 1-10.5 2.5L4 14M4 18v-4h4"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
        {flipped ? frontLabel : backLabel}
      </button>
    </div>
  );
}