'use client'

import { useState } from 'react'
import { Send, CheckCircle, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { AnimatedSection } from '@/components/ui/AnimatedSection'
import { cn } from '@/lib/utils'
import { contactApi } from '@/lib/api'

interface ServiceContactFormProps {
  serviceName: string
  title?: string
  subtitle?: string
  colorTheme?: 'cyan' | 'orange' | 'red' | 'slate' | 'emerald' | 'primary' | 'indigo'
}

const colorClasses = {
  cyan: {
    gradient: 'from-cyan-500 to-cyan-700',
    bg: 'bg-cyan-600',
    hover: 'hover:bg-cyan-700',
    focus: 'focus:ring-cyan-500 focus:border-cyan-500',
  },
  orange: {
    gradient: 'from-orange-500 to-orange-700',
    bg: 'bg-orange-600',
    hover: 'hover:bg-orange-700',
    focus: 'focus:ring-orange-500 focus:border-orange-500',
  },
  red: {
    gradient: 'from-red-500 to-red-700',
    bg: 'bg-red-600',
    hover: 'hover:bg-red-700',
    focus: 'focus:ring-red-500 focus:border-red-500',
  },
  slate: {
    gradient: 'from-slate-600 to-slate-800',
    bg: 'bg-slate-700',
    hover: 'hover:bg-slate-800',
    focus: 'focus:ring-slate-500 focus:border-slate-500',
  },
  emerald: {
    gradient: 'from-emerald-500 to-emerald-700',
    bg: 'bg-emerald-600',
    hover: 'hover:bg-emerald-700',
    focus: 'focus:ring-emerald-500 focus:border-emerald-500',
  },
  indigo: {
    gradient: 'from-indigo-600 to-indigo-800',
    bg: 'bg-indigo-600',
    hover: 'hover:bg-indigo-700',
    focus: 'focus:ring-indigo-500 focus:border-indigo-500',
  },
  primary: {
    gradient: 'from-primary-600 to-primary-800',
    bg: 'bg-primary-600',
    hover: 'hover:bg-primary-700',
    focus: 'focus:ring-primary-500 focus:border-primary-500',
  },
}

export function ServiceContactForm({
  serviceName,
  title = '¿Listo para comenzar?',
  subtitle = 'Completa el formulario y un experto te contactará pronto',
  colorTheme = 'primary',
}: ServiceContactFormProps) {
  const [loading, setLoading] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [error, setError] = useState('')

  const colors = colorClasses[colorTheme]

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)
    setError('')

    const formData = new FormData(e.currentTarget)
    const data = {
      name: formData.get('name') as string,
      email: formData.get('email') as string,
      phone: formData.get('phone') as string,
      company: formData.get('company') as string,
      subject: `Cotización: ${serviceName}`,
      message: formData.get('message') as string,
    }

    try {
      await contactApi.submit(data)
      setSubmitted(true)
    } catch (err) {
      setError('Hubo un error al enviar el formulario. Por favor intenta de nuevo.')
    } finally {
      setLoading(false)
    }
  }

  if (submitted) {
    return (
      <section className={cn('section-padding bg-gradient-to-br', colors.gradient)}>
        <div className="container-custom">
          <AnimatedSection className="max-w-xl mx-auto text-center">
            <div className="bg-white rounded-2xl p-8 shadow-xl">
              <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
              <h3 className="text-2xl font-bold text-gray-900 mb-2">
                ¡Mensaje Enviado!
              </h3>
              <p className="text-gray-600">
                Gracias por tu interés en {serviceName}. Un experto te contactará pronto.
              </p>
            </div>
          </AnimatedSection>
        </div>
      </section>
    )
  }

  return (
    <section className={cn('section-padding bg-gradient-to-br', colors.gradient)}>
      <div className="container-custom">
        <div className="grid lg:grid-cols-2 gap-12 items-center max-w-5xl mx-auto">
          <AnimatedSection variant="slideRight">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              {title}
            </h2>
            <p className="text-lg text-white/90 mb-6">{subtitle}</p>
            <ul className="space-y-3 text-white/80">
              <li className="flex items-center gap-2">
                <CheckCircle className="w-5 h-5" />
                <span>Respuesta en menos de 24 horas</span>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle className="w-5 h-5" />
                <span>Asesoría personalizada sin costo</span>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle className="w-5 h-5" />
                <span>Sin compromiso de compra</span>
              </li>
            </ul>
          </AnimatedSection>

          <AnimatedSection variant="slideLeft" delay={0.2}>
            <form onSubmit={handleSubmit} className="bg-white rounded-2xl p-4 sm:p-6 md:p-8 shadow-xl">
              <div className="grid md:grid-cols-2 gap-4 mb-4">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                    Nombre *
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    required
                    className={cn(
                      'w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2',
                      colors.focus
                    )}
                    placeholder="Tu nombre"
                  />
                </div>
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                    Email *
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    required
                    className={cn(
                      'w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2',
                      colors.focus
                    )}
                    placeholder="tu@email.com"
                  />
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4 mb-4">
                <div>
                  <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
                    Teléfono
                  </label>
                  <input
                    type="tel"
                    id="phone"
                    name="phone"
                    className={cn(
                      'w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2',
                      colors.focus
                    )}
                    placeholder="+52 55 1234 5678"
                  />
                </div>
                <div>
                  <label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">
                    Empresa
                  </label>
                  <input
                    type="text"
                    id="company"
                    name="company"
                    className={cn(
                      'w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2',
                      colors.focus
                    )}
                    placeholder="Tu empresa"
                  />
                </div>
              </div>

              <div className="mb-4">
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
                  Mensaje
                </label>
                <textarea
                  id="message"
                  name="message"
                  rows={3}
                  className={cn(
                    'w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 resize-none',
                    colors.focus
                  )}
                  placeholder="Cuéntanos sobre tu proyecto o necesidades..."
                />
              </div>

              {error && (
                <p className="text-red-600 text-sm mb-4">{error}</p>
              )}

              <button
                type="submit"
                disabled={loading}
                className={cn(
                  'w-full flex items-center justify-center gap-2 px-6 py-3 text-white font-semibold rounded-lg transition-colors disabled:opacity-50',
                  colors.bg,
                  colors.hover
                )}
              >
                {loading ? (
                  <>
                    <Loader2 className="w-5 h-5 animate-spin" />
                    Enviando...
                  </>
                ) : (
                  <>
                    Solicitar Cotización
                    <Send className="w-5 h-5" />
                  </>
                )}
              </button>
            </form>
          </AnimatedSection>
        </div>
      </div>
    </section>
  )
}