'use client';
import Wrapper from '@/components/common/Wrapper';
import { cn } from '@/lib/utils';
import { ContactFormProps } from '@/src/types/contact';
import { getAnalogousColor, getColor } from '@/src/utils/color';
import ReCAPTCHA from 'react-google-recaptcha';
import { useContactFormBase } from './ContactFormBase';

export function GradientContactForm({ className, styling, sectionId }: ContactFormProps) {
  const { form, onSubmit, recaptchaRef, isBuilder } = useContactFormBase();
  let color = getColor(styling);
  
  if (color === 'var(--color-accent)' && document.documentElement) {
    color = getComputedStyle(document.documentElement).getPropertyValue('--color-accent').trim();
  }

  return (
    <Wrapper id={sectionId} className={cn(className)} styling={styling}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        style={{
          background: `linear-gradient(135deg, ${color}, ${getAnalogousColor(color, 60)} )`,
        }}
        className={cn('mx-auto p-4 rounded-2xl shadow-xl w-full', className)}
      >
        <div className='space-y-6'>
          <div className='relative'>
            <input
              {...form.register('name')}
              placeholder='Your name'
              className='w-full px-6 py-4 text-[var(--color-text)] bg-[var(--color-background)] rounded-lg 
              placeholder-[var(--color-text)] backdrop-blur-sm border border-[var(--color-text)]
              focus:border-[var(--color-text)] focus:ring-0'
            />
            {form.formState.errors.name && (
              <p className='text-red-500 text-sm mt-1'>{form.formState.errors.name.message}</p>
            )}
          </div>

          <div className='relative'>
            <input
              {...form.register('email')}
              placeholder='Your email'
              className='w-full px-6 py-4 text-[var(--color-text)] bg-[var(--color-background)] rounded-lg 
              placeholder-[var(--color-text)] backdrop-blur-sm border border-[var(--color-text)]
              focus:border-[var(--color-text)] focus:ring-0'
            />
            {form.formState.errors.email && (
              <p className='text-red-500 text-sm mt-1'>{form.formState.errors.email.message}</p>
            )}
          </div>

          <div className='relative'>
            <textarea
              {...form.register('message')}
              placeholder='Your message'
              className='w-full px-6 py-4 text-[var(--color-text)] bg-[var(--color-background)] rounded-lg 
              placeholder-[var(--color-text)] backdrop-blur-sm border border-[var(--color-text)]
              focus:border-[var(--color-text)] focus:ring-0 resize-none'
              rows={4}
            />
            {form.formState.errors.message && (
              <p className='text-red-500 text-sm mt-1'>{form.formState.errors.message.message}</p>
            )}
          </div>
        </div>
        {process.env.NODE_ENV === 'production' && (
          <div className='p-4 bg-white/10 rounded-lg w-fit mt-2'>
            <ReCAPTCHA
              ref={recaptchaRef}
              sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
              theme='dark'
              size='invisible'
              badge='inline'
            />
          </div>
        )}
        <button
          type='submit'
          style={{ color: color }}
          className='w-full mt-8 py-4 text-lg font-medium bg-[var(--color-background)] 
          rounded-lg hover:bg-[var(--color-background)]/90 transition-colors'
          disabled={isBuilder}
        >
          Send Message
        </button>
      </form>
    </Wrapper>
  );
}
