'use client';

import React from "react";
import { motion } from "framer-motion";
import { Container, Row, Col, Form, Stack, Spinner } from 'react-bootstrap';
import { useForm } from "react-hook-form";
import { useToast } from '@/context/ToastContext';
import { useRecaptcha } from "@/hooks/useRecaptcha";

type FormData = { 
  name: string;
  email: string;
};

export default function Subscribe() {
  const { showToast } = useToast();
  const { getToken } = useRecaptcha();
  const { register, handleSubmit, formState: { errors, isSubmitting }, reset, } = useForm<FormData>();
  const onSubmit = async (data: FormData) => {
    const recaptchaToken = await getToken("subscribe_form");
    const payload = { ...data, recaptchaToken };

    const res = await fetch("/api/subscribe", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });

    const result = await res.json();
    if (res.ok) {
      showToast(result.message, 'success');
      reset();
    } else {
      showToast(result.error || "Something went wrong, Please try again later", 'danger');
    }
  };
  return (
    <section className="section-subscribe">
      <Container className="position-relative">    
        <Row xs={1} md={2} className="g-3 g-md-5">
          <Col md={5} className="d-flex flex-column">
            <motion.h4 className="fw-bold">Be the first to know when</motion.h4>
            <motion.p className="fs-3 fw-bold text-danger">We drop a new feature or product</motion.p>
            <Form className="my-auto" noValidate onSubmit={handleSubmit(onSubmit)}>
              <Row className="g-3">
                <Col md={12}>
                  <motion.div whileInView={{y:[30,0]}} transition={{duration:1.4}}>
                    <Form.Control size="lg" type="text" placeholder="Your Name" className="rounded-0" {...register("name", { required: "Full name is required", pattern: { value: /^[a-zA-Z]+ [a-zA-Z]+$/, message: "Enter first and last name", }, })} isInvalid={!!errors.name} /> 
                    <Form.Control.Feedback type="invalid">{errors.name?.message}</Form.Control.Feedback>
                  </motion.div>
                </Col>
                <Col md={12}>
                  <motion.div whileInView={{y:[30,0]}} transition={{duration:1.6}}>
                    <Form.Control size="lg" type="email" placeholder="Email" className="rounded-0" {...register("email", {
                      required: "Email is required",
                      pattern: {
                        value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                        message: "Invalid email format",
                      },
                    })} isInvalid={!!errors.email} />
                    <Form.Control.Feedback type="invalid">{errors.email?.message}</Form.Control.Feedback>
                  </motion.div>
                </Col>
                <Col md={12}>
                    <motion.button type="submit" disabled={isSubmitting} className="btn btn-lg btn-outline-danger w-100 rounded-pill" whileInView={{scale:[0.2,1]}} transition={{duration:1.8}}>
                      {isSubmitting ? (
                        <Stack gap={2} direction="horizontal">
                          <Spinner animation="grow" size="sm" variant="danger" />
                          <Spinner animation="grow" size="sm" variant="primary" />
                          <Spinner animation="grow" size="sm" variant="success" />
                          <span>Submitting...</span>
                        </Stack>
                      ) : (
                        "Submit"
                      )}
                    </motion.button>
                </Col>
              </Row>
            </Form>
          </Col>
          <Col md={7}>
            <motion.img className="img-fluid rounded-4" src="https://media.vensysco.com/vensysco-bg.webp" alt="Vensysco" whileInView={{scale:[1.2,1], opacity:[0,1]}} transition={{duration:2}} />              
          </Col>          
        </Row>
      </Container>
    </section>
  );
}