"use client";

import { useEffect, useState } from 'react';
import { TurnstileCaptcha } from '@/components/forms/TurnstileCaptcha';
import type { HubspotFormConfig } from '@/lib/hubspot';

declare global {
  interface Window {
    hbspt?: {
      forms?: {
        create: (options: Record<string, unknown>) => void;
      };
    };
  }
}

type HubSpotFormProps = {
  targetId: string;
  formId?: string;
  portalId?: string;
  config?: HubspotFormConfig;
  className?: string;
};

const HubSpotForm = ({ targetId, formId, portalId, config, className }: HubSpotFormProps) => {
  const [captchaToken, setCaptchaToken] = useState('');
  const effectivePortalId = config?.portalId || portalId || process.env.NEXT_PUBLIC_HUBSPOT_PORTAL_ID;
  const effectiveFormId = config?.formGuid || formId;

  useEffect(() => {
    if (!captchaToken) {
      const target = document.getElementById(targetId);
      if (target) target.innerHTML = '';
      return undefined;
    }

    const mountForm = () => {
      const target = document.getElementById(targetId);
      if (!target || !window.hbspt?.forms || !effectivePortalId || !effectiveFormId) return;

      target.innerHTML = '';
      window.hbspt.forms.create({
        portalId: effectivePortalId,
        formId: effectiveFormId,
        target: `#${targetId}`,
      });
    };

    if (window.hbspt?.forms) {
      mountForm();
      return undefined;
    }

    let script = document.querySelector<HTMLScriptElement>('script[src="https://js.hsforms.net/forms/v2.js"]');
    if (!script) {
      script = document.createElement('script');
      script.src = 'https://js.hsforms.net/forms/v2.js';
      script.async = true;
      document.body.appendChild(script);
    }

    script.addEventListener('load', mountForm);
    return () => {
      script?.removeEventListener('load', mountForm);
    };
  }, [captchaToken, effectiveFormId, effectivePortalId, targetId]);

  return (
    <div className={className ?? 'min-h-[500px]'}>
      <TurnstileCaptcha onToken={setCaptchaToken} />
      <div id={targetId} className={captchaToken ? undefined : 'hidden'} />
    </div>
  );
};

export default HubSpotForm;