"use client";

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { registroSchema, RegistroForm } from './schema';

export default function RegistroEmbedPage() {
  const [serverError, setServerError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<RegistroForm>({ resolver: zodResolver(registroSchema) });

  async function onSubmit(values: RegistroForm) {
    setServerError(null);
    const payload = {
      form_id: 'registro-embed',
      form_data: {
        fields: [
          { name: 'nombre_negocio', value: values.nombre_negocio },
          { name: 'rif', value: values.rif },
          { name: 'categoria', value: values.categoria },
          { name: 'direccion', value: values.direccion },
          { name: 'nombre_contacto', value: values.nombre_contacto },
          { name: 'email', value: values.email },
          { name: 'telefono', value: values.telefono },
          { name: 'acepta_terminos', value: values.acepta_terminos },
        ],
      },
    };

    try {
      // Intentar primero POST a /api/solicitudes por compatibilidad; si falla, fallback a /api/solicitudes/webhook
      let res = await fetch('/api/solicitudes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        // fallback
        try {
          res = await fetch('/api/solicitudes/webhook', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
          });
        } catch (e) {
          // ignore, handled below
        }
      }

      const json = await res.json().catch(() => null);

      if (res.ok && json && (json.ok || json.success)) {
        setSuccess(true);
        reset();
      } else if (res.ok && json && json.ok) {
        setSuccess(true);
        reset();
      } else {
        setServerError((json && (json.error || JSON.stringify(json))) || 'Error en el servidor');
      }
    } catch (err: any) {
      console.error('Submit error', err);
      setServerError(err?.message || 'Error desconocido');
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-transparent p-6">
      <div className="w-full max-w-2xl bg-white rounded-xl shadow-md p-8">
        <h2 className="text-2xl font-semibold text-slate-900 mb-2">Solicitud de registro - Aliado Comercial</h2>
        <p className="text-sm text-slate-500 mb-6">Rellena el formulario para solicitar la creación de tu ficha comercial.</p>

        {serverError && (
          <div className="mb-4 rounded-md bg-red-50 border border-red-100 p-3 text-red-700">{serverError}</div>
        )}

        {success ? (
          <div className="text-center py-12">
            <h3 className="text-xl font-semibold text-green-700">¡Solicitud enviada con éxito!</h3>
            <p className="mt-3 text-slate-600">Nos pondremos en contacto contigo pronto.</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-slate-700">Nombre Comercial <span className="text-red-600">*</span></label>
                <input {...register('nombre_negocio')} aria-invalid={!!errors.nombre_negocio} className="mt-1 block w-full rounded-md border-slate-200 shadow-sm p-2" />
                {errors.nombre_negocio && <p className="text-red-500 text-xs mt-1">{errors.nombre_negocio.message}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700">RIF / Documento <span className="text-red-600">*</span></label>
                <input {...register('rif')} className="mt-1 block w-full rounded-md border-slate-200 shadow-sm p-2" />
                {errors.rif && <p className="text-red-500 text-xs mt-1">{errors.rif.message}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700">Categoría / Rubro <span className="text-red-600">*</span></label>
                <input type="text" {...register('categoria')} placeholder="Ej: Restaurante, Belleza, Tecnología..." className="mt-1 block w-full rounded-md border-slate-200 shadow-sm p-2" />
                {errors.categoria && <p className="text-red-500 text-xs mt-1">{errors.categoria.message}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700">Dirección Física <span className="text-red-600">*</span></label>
                <textarea {...register('direccion')} rows={3} className="mt-1 block w-full rounded-md border-slate-200 shadow-sm p-2"></textarea>
                {errors.direccion && <p className="text-red-500 text-xs mt-1">{errors.direccion.message}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700">Nombre del Contacto <span className="text-red-600">*</span></label>
                <input {...register('nombre_contacto')} className="mt-1 block w-full rounded-md border-slate-200 shadow-sm p-2" />
                {errors.nombre_contacto && <p className="text-red-500 text-xs mt-1">{errors.nombre_contacto.message}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700">Correo Electrónico <span className="text-red-600">*</span></label>
                <input type="email" {...register('email')} className="mt-1 block w-full rounded-md border-slate-200 shadow-sm p-2" />
                {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700">Teléfono / WhatsApp <span className="text-red-600">*</span></label>
                <input type="tel" {...register('telefono')} className="mt-1 block w-full rounded-md border-slate-200 shadow-sm p-2" />
                {errors.telefono && <p className="text-red-500 text-xs mt-1">{errors.telefono.message}</p>}
              </div>

              <div className="md:col-span-2">
                <label className="inline-flex items-start gap-2">
                  <input type="checkbox" {...register('acepta_terminos')} className="mt-1" />
                  <span className="text-sm text-slate-700">Acepto los términos y condiciones de aliado comercial <span className="text-red-600">*</span></span>
                </label>
                {errors.acepta_terminos && <p className="text-red-500 text-xs mt-1">{errors.acepta_terminos.message}</p>}
              </div>
            </div>

            <div className="pt-4">
              <button type="submit" disabled={isSubmitting} className="inline-flex items-center justify-center rounded-md bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 shadow">
                {isSubmitting ? (
                  <>
                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8z"></path>
                    </svg>
                    Enviando solicitud...
                  </>
                ) : (
                  'Enviar solicitud'
                )}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}