import React, { useState } from 'react';
import classNames from 'classnames';
import { useTranslation } from 'next-i18next';
import * as Yup from 'yup';
import axios from 'axios';
import { apiNewsletterSubscriptions, apiToken } from '@/data/constants';
import { validationWithMessages } from '@/utils/validate';

interface NewsletterProps {
  background?: string;
  title?: string | null;
  text?: string | null;
}

const INITIAL_VALUES = {
  email: '',
};

const INITIAL_ERRORS = {
  email: '',
  general: '',
};

const Newsletter: React.FC<NewsletterProps> = ({ background, title, text }) => {
  const { t } = useTranslation('common');

  const [formData, setFormData] = useState(INITIAL_VALUES);
  const [errors, setErrors] = useState(INITIAL_ERRORS);
  const [status, setStatus] = useState<'loaded' | 'sending' | 'sended'>('loaded');

  // 🔎 Yup Validation Schema

  const yupObjectShape = {
    email: Yup.string()
      .email(t('common:formMessages.errrorEmail'))
      .required(t('common:formMessages.errorRequired')),
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ email: e.target.value });
    setErrors(INITIAL_ERRORS);
  };

  const handleSubmit = async () => {
    setStatus('sending');
    const validateForm = await validationWithMessages(yupObjectShape, formData);

    if (validateForm?.isValid) {
      setErrors(INITIAL_ERRORS);

      try {
        // 1️⃣ Verificar si ya existe en Strapi
        const checkUrl = `${apiNewsletterSubscriptions}?filters[email][$eq]=${formData.email}`;
        const checkResponse = await axios.get(checkUrl, {
          headers: { Authorization: `Bearer ${apiToken}` }
        });

        // Si existe, Strapi regresa data.length > 0
        if (checkResponse?.data?.data?.length > 0) {
          setStatus('loaded');
          setErrors({
            ...INITIAL_ERRORS,
            general: t('common:formMessages.alreadyRegistered') // agrega este mensaje en tu JSON
          });
          return;
        }

        // 2️⃣ Si NO existe, ahora sí hacer el POST
        const options = {
          method: "POST",
          url: apiNewsletterSubscriptions,
          headers: {
            Authorization: "Bearer " + apiToken,
            "Content-Type": "application/json"
          },
          data: {
            data: {
              ...formData,
            }
          }
        };

        const response = await axios.request(options);

        if (response?.status === 200 || response?.status === 201) {
          setStatus('sended');
        } else {
          setStatus('loaded');
          setErrors({ ...INITIAL_ERRORS, general: t('common:formMessages.generalError') });
        }

      } catch (error) {
        console.error(error);
        setStatus('loaded');
        setErrors({ ...INITIAL_ERRORS, general: t('common:formMessages.generalError') });
      }

    } else {
      setStatus('loaded');
      setErrors({ ...INITIAL_ERRORS, ...validateForm?.errors });
    }
  };


  return (
    <div className="py-7 bg-white">
      <div className="container">
        <div
          className={classNames(`tw-relative`, { 'tw-bg-main-color': !background })}
          style={{ backgroundColor: background }}
        >
          <div className="card-body p-10 py-xl-14 tw-relative z-10">
            <div className="row align-items-center gy-6">
              <div className="col-12">
                <h3 className="tw-font-ibm tw-font-medium text-white tw-text-[32px] lg:tw-text-4xl tw-text-center">
                  {title || t('common:newsletter.title')}
                </h3>
                <p className="text-white mb-0 tw-font-inter tw-font-normal tw-text-base tw-text-center">
                  {text || t('common:newsletter.text')}
                </p>

                {errors.general && (
                  <p className="tw-text-red-400 tw-text-sm tw-mt-3 tw-text-center">{errors.general}</p>
                )}
              </div>

              {status === 'sended' ? (
                <div className="col-12 tw-text-center tw-text-white tw-font-inter tw-text-xl tw-mt-3">
                  {t('common:formMessages.sended')}
                </div>
              ) : (
                <div className="col-md-8 offset-md-2">
                  <div className="newsletter-wrapper">
                    <div className="d-lg-flex">
                      <div className="tw-w-full mb-4">
                        <input
                          type="email"
                          name="email"
                          placeholder={t('common:newsletter.email')}
                          className="tw-w-full tw-font-inter tw-text-white placeholder:tw-text-white tw-text-sm tw-bg-white/[0.3] border border-white tw-py-2 tw-px-3 tw-rounded-lg min-[992px]:tw-rounded-r-none "
                          value={formData.email}
                          onChange={handleChange}
                        />


                        {errors.email && (
                          <p className="tw-text-red-400 tw-text-xs ">{errors.email}</p>
                        )}
                      </div>

                      <button
                        onClick={handleSubmit}
                        className={classNames(
                          'tw-font-bold tw-h-[38px]  mb-4 tw-w-full min-[992px]:tw-w-auto tw-font-inter tw-uppercase hover:tw-opacity-75 tw-text-sm tw-bg-white border border-white tw-py-2 tw-px-3 tw-rounded-lg min-[992px]:tw-rounded-l-none',
                          { 'tw-text-main-color': !background },
                          { 'tw-text-main-dark': background }
                        )}
                      >
                        {status === 'sending'
                          ? t('common:formMessages.sending') + '...'
                          : t('common:newsletter.send')}
                      </button>
                    </div>

                  </div>
                </div>
              )}

            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Newsletter;