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

export function FloatingContactForm({ className, styling, sectionId }: ContactFormProps) {
  const { form, onSubmit, recaptchaRef, isBuilder } = useContactFormBase();
  const theme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
  const color = getColor(styling);

  return (
    <Wrapper id={sectionId} className={cn(className)} styling={styling}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className={cn(
          'mx-auto p-4 bg-[var(--color-background)] brightness-110 rounded-xl shadow-2xl w-full',
          className
        )}
      >
        <div className='space-y-6'>
          <div className='relative'>
            <input
              {...form.register('name')}
              placeholder=' '
              style={{ borderColor: color }}
              className='peer w-full px-4 py-3 border-b-2 border-[var(--color-text)]/30 
              focus:ring-0 bg-transparent transition-all
              text-[var(--color-text)]'
            />
            <label
              className='absolute left-4 top-3 text-[var(--color-text)]/40 transition-all duration-300 
              peer-focus:-top-6 peer-focus:text-sm
              peer-[:not(:placeholder-shown)]:-top-6 peer-[:not(:placeholder-shown)]:text-sm'
            >
              Your Name
            </label>
            {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=' '
              style={{ borderColor: color }}
              className='peer w-full px-4 py-3 border-b-2 border-[var(--color-text)]/30 
              focus:ring-0 bg-transparent transition-all
              text-[var(--color-text)]'
            />
            <label
              className='absolute left-4 top-3 text-[var(--color-text)]/40 transition-all duration-300 
              peer-focus:-top-6 peer-focus:text-sm
              peer-[:not(:placeholder-shown)]:-top-6 peer-[:not(:placeholder-shown)]:text-sm'
            >
              Your Email
            </label>
            {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=' '
              style={{ borderColor: color }}
              className='peer w-full px-4 py-3 border-b-2 border-[var(--color-text)]/30 
              focus:ring-0 bg-transparent transition-all resize-none
              text-[var(--color-text)]'
              rows={4}
            />
            <label
              className='absolute left-4 top-3 text-[var(--color-text)]/40 transition-all duration-300 
              peer-focus:-top-6 peer-focus:text-sm
              peer-[:not(:placeholder-shown)]:-top-6 peer-[:not(:placeholder-shown)]:text-sm'
            >
              Your Message
            </label>
            {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='flex w-fit mt-6 bg-[var(--color-background)]/10 backdrop-blur-sm rounded-lg'>
            <ReCAPTCHA
              ref={recaptchaRef}
              sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
              size='invisible'
              theme={theme}
              badge='inline'
            />
          </div>
        )}

        <button
          type='submit'
          style={{ background: color }}
          className='w-full mt-8 py-4 text-lg font-medium text-[var(--color-background)] 
          rounded-full hover:opacity-90 transition-all shadow-lg hover:shadow-xl 
          transform hover:-translate-y-0.5'
          disabled={isBuilder}
        >
          Send Message
        </button>
      </form>
    </Wrapper>
  );
}
