"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@heroui/react";

/** Exact copy required for paddle electronic-payment (gateway / Apple Pay) flows only. */
export const PADDLE_ELECTRONIC_PAYMENT_INFO_AR =
  "اذا لم تربح المزاد فإن قيمة المضرب تعاد تلقائياً إلى حسابك الالكتروني في حال كانت المدة التي اشتريت بها المضرب وانتهى المزاد عليها لم تتجاوز الأربع الأيام وفي حال التجاوز تحول قيمة المضرب لمحفظتك ويتوجب عليك اضافة طلب سحب من المحفظة في لوحة التحكم الخاصة بك";

export type PaddleElectronicPaymentMethod =
  | "wallet"
  | "gateway"
  | "apple_pay";

interface PaddleElectronicPaymentInfoProps {
  paymentMethod: PaddleElectronicPaymentMethod;
  className?: string;
}

function useFinePointerHover(): boolean {
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const apply = () => setEnabled(mq.matches);
    apply();
    mq.addEventListener("change", apply);
    return () => mq.removeEventListener("change", apply);
  }, []);
  return enabled;
}

/**
 * Compact info control for yearly/live-room/normal-auction paddle modals only.
 * Shows full Arabic refund copy when gateway or Apple Pay is selected.
 *
 * - Desktop (fine pointer): opens on hover over trigger or panel; closes shortly after leaving both.
 * - Touch / coarse pointer: opens/closes via press on the trigger (HeroUI Popover).
 */
export default function PaddleElectronicPaymentInfo({
  paymentMethod,
  className = "",
}: PaddleElectronicPaymentInfoProps) {
  const [isOpen, setIsOpen] = useState(false);
  const fineHover = useFinePointerHover();
  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const clearCloseTimer = useCallback(() => {
    if (closeTimerRef.current) {
      clearTimeout(closeTimerRef.current);
      closeTimerRef.current = null;
    }
  }, []);

  useEffect(() => () => clearCloseTimer(), [clearCloseTimer]);

  if (paymentMethod === "wallet") return null;

  const scheduleClose = () => {
    clearCloseTimer();
    closeTimerRef.current = setTimeout(() => setIsOpen(false), 220);
  };

  const openFromHover = () => {
    if (!fineHover) return;
    clearCloseTimer();
    setIsOpen(true);
  };

  return (
    <Popover
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      placement="top"
      showArrow
      offset={10}
    >
      <PopoverTrigger>
        <button
          type="button"
          className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-slate-400 bg-white text-xs font-extrabold text-slate-700 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-1 ${className}`}
          aria-label="معلومات عن استرداد قيمة المضرب عند الدفع الإلكتروني أو Apple Pay"
          aria-expanded={isOpen}
          onMouseEnter={openFromHover}
          onMouseLeave={scheduleClose}
        >
          <span aria-hidden>!</span>
        </button>
      </PopoverTrigger>
      <PopoverContent
        dir="rtl"
        className="w-[min(92vw,22rem)] max-h-[min(70vh,20rem)] overflow-y-auto border border-slate-200 bg-white p-3 shadow-lg"
        onMouseEnter={() => {
          if (!fineHover) return;
          clearCloseTimer();
        }}
        onMouseLeave={scheduleClose}
      >
        <p className="text-sm leading-relaxed text-slate-800 text-right whitespace-normal">
          {PADDLE_ELECTRONIC_PAYMENT_INFO_AR}
        </p>
      </PopoverContent>
    </Popover>
  );
}