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

export function MinimalContactForm({ 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='bg-[var(--color-background)] brightness-110 rounded-3xl shadow-xl p-4 gap-2 flex flex-col'
      >
        <div className='relative'>
          <div className='absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none'>
            <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' style={{ color: color }}>
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
              />
            </svg>
          </div>
          <input
            {...form.register('name')}
            placeholder='Your name'
            className='w-full pl-12 pr-4 py-3 bg-[var(--color-background)] rounded-xl 
            border-2 border-[var(--color-text)]/10 text-[var(--color-text)]
            focus:ring-0 transition-colors
            placeholder-[var(--color-text)]/50'
          />
        </div>
        {form.formState.errors.name && (
          <p className='text-red-500 text-sm mt-1'>{form.formState.errors.name.message}</p>
        )}

        <div className='relative'>
          <div className='absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none'>
            <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' style={{ color: color }}>
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
              />
            </svg>
          </div>
          <input
            {...form.register('email')}
            placeholder='Your email'
            className='w-full pl-12 pr-4 py-3 bg-[var(--color-background)] rounded-xl 
            border-2 border-[var(--color-text)]/10 text-[var(--color-text)]
            focus:ring-0 transition-colors
            placeholder-[var(--color-text)]/50'
          />
        </div>
        {form.formState.errors.email && (
          <p className='text-red-500 text-sm mt-1'>{form.formState.errors.email.message}</p>
        )}

        <div className='relative'>
          <div className='absolute left-0 top-3 pl-4 pointer-events-none'>
            <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' style={{ color: color }}>
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'
              />
            </svg>
          </div>
          <textarea
            {...form.register('message')}
            placeholder='Your message'
            rows={4}
            className='w-full pl-12 pr-4 py-3 bg-[var(--color-background)] rounded-xl 
            border-2 border-[var(--color-text)]/10 text-[var(--color-text)]
            focus:ring-0 transition-colors resize-none
            placeholder-[var(--color-text)]/50'
          />
        </div>
        {form.formState.errors.message && (
          <p className='text-red-500 text-sm mt-1'>{form.formState.errors.message.message}</p>
        )}

        {process.env.NODE_ENV === 'production' && (
          <ReCAPTCHA
            ref={recaptchaRef}
            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ?? ''}
            className='my-4'
            theme={theme}
            size='invisible'
            badge='inline'
          />
        )}
        <button
          type='submit'
          style={{ background: color }}
          className='w-full text-[var(--color-background)] py-3 rounded-xl
            hover:opacity-90 transition-all flex items-center justify-center gap-2
            shadow-lg shadow-[var(--color-accent)]/20'
          disabled={isBuilder}
        >
          <span>Send Message</span>
          <Send className='w-4 h-4' />
        </button>
      </form>
    </Wrapper>
  );
}
