"use client";

import { forwardRef, useImperativeHandle, useRef } from "react";
import { Turnstile } from "react-turnstile";
import type { BoundTurnstileObject } from "react-turnstile";

interface TurnstileWidgetProps {
  onVerify: (token: string) => void;
}

export interface TurnstileWidgetHandle {
  reset: () => void;
}

const SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || "1x00000000000000000000AA"; // test key

const TurnstileWidget = forwardRef<TurnstileWidgetHandle, TurnstileWidgetProps>(
  function TurnstileWidget({ onVerify }, ref) {
    const boundRef = useRef<BoundTurnstileObject | null>(null);

    // Turnstile tokens are single-use: verifying one on the server (even if
    // the request later fails validation) burns it. Without an explicit
    // reset, a retry resubmits the same spent token and CAPTCHA rejects it
    // even though nothing is wrong with the widget.
    useImperativeHandle(ref, () => ({
      reset: () => boundRef.current?.reset(),
    }));

    return (
      <Turnstile
        sitekey={SITE_KEY}
        onVerify={(token, boundTurnstile) => {
          boundRef.current = boundTurnstile;
          onVerify(token);
        }}
        onLoad={(_id, boundTurnstile) => {
          boundRef.current = boundTurnstile;
        }}
        theme="dark"
        appearance="interaction-only"
      />
    );
  }
);

export default TurnstileWidget;