'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 BorderedContactForm({ className, styling, sectionId }: ContactFormProps) {
  const { form, onSubmit, recaptchaRef, isBuilder } = useContactFormBase();
  const theme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
  const formColor = getColor(styling);

  return (
    <Wrapper id={sectionId} className={cn(className)} styling={styling}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className={cn('mx-auto p-1 rounded-xl w-full', className)}
        style={{ background: formColor }}
      >
        <div className='bg-[var(--color-background)] p-4 rounded-lg'>
          <div className='space-y-6'>
            <div className='relative'>
              <label className='text-sm font-medium text-[var(--color-text)]/70 mb-1 block'>Name</label>
              <input
                {...form.register('name')}
                style={{ borderColor: formColor }}
                className='w-full px-4 py-3 border-2 border-[var(--color-text)]/20 rounded-lg 
                focus:ring-0 bg-[var(--color-background)]
                text-[var(--color-text)]'
              />
              {form.formState.errors.name && (
                <p className='text-red-500 text-sm mt-1'>{form.formState.errors.name.message}</p>
              )}
            </div>

            <div className='relative'>
              <label className='text-sm font-medium text-[var(--color-text)]/70 mb-1 block'>Email</label>
              <input
                style={{ borderColor: formColor }}
                {...form.register('email')}
                className='w-full px-4 py-3 border-2 border-[var(--color-text)]/20 rounded-lg 
                focus:ring-0 bg-[var(--color-background)]
                text-[var(--color-text)]'
              />
              {form.formState.errors.email && (
                <p className='text-red-500 text-sm mt-1'>{form.formState.errors.email.message}</p>
              )}
            </div>

            <div className='relative'>
              <label className='text-sm font-medium text-[var(--color-text)]/70 mb-1 block'>Message</label>
              <textarea
                {...form.register('message')}
                style={{ borderColor: formColor }}
                className='w-full px-4 py-3 border-2 border-[var(--color-text)]/20 rounded-lg 
                focus:ring-0 resize-none bg-[var(--color-background)]
                text-[var(--color-text)]'
                rows={4}
              />
              {form.formState.errors.message && (
                <p className='text-red-500 text-sm mt-1'>{form.formState.errors.message.message}</p>
              )}
            </div>
          </div>
          <div
            className='flex w-fit justify-center mt-6 shadow-md rounded-lg overflow-hidden'
            style={{ fontFamily: 'var(--text-font-family) !important' }}
          >
            {process.env.NODE_ENV === 'production' && (
              <ReCAPTCHA
                ref={recaptchaRef}
                sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
                theme={theme}
                size='invisible'
                badge='inline'
              />
            )}
          </div>

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