"use client";

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

type FormData = {
  fname: string;
  lname: string;
  email: string;
  mobile: string;
  company: string;
  clientType: string;
  subject: string;
  message: string;
  iscloud: number;
};

export default function BookCloudDemoForm() {
  const { showToast } = useToast();
  const { getToken } = useRecaptcha();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>({
    defaultValues: {
      iscloud: 1
    }
  });
  const onSubmit = async (data: FormData) => {
    const recaptchaToken = await getToken("book_demo_save_form");
    const res = await fetch("/api/book-demo", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ ...data,recaptchaToken }),
    });

    const result = await res.json();

    if (res.ok) {
      reset();
      showToast(result.message, "success");
    } else {
      showToast(result.error || "Something went wrong, Please try again later", "danger");
    }
  };  
  return (
    <React.Fragment>
      <h4 className="text-center mb-3">Book Free Demo</h4>
      <Card className="rounded-4 shadow">
        <Card.Body>
          <Form noValidate onSubmit={handleSubmit(onSubmit)}>
            <Row className="g-2">
              <Col md={6}>
                <motion.div whileInView={{x:[30,0]}} transition={{duration:1.6}}>
                  <Form.Label>First name</Form.Label>
                  <Form.Control type="text" {...register("fname", {required: "First name is required",pattern: {value: /^[a-zA-Z]+$/,message: "Enter first name",},})} isInvalid={!!errors.fname} />
                  <Form.Control.Feedback type="invalid">{errors.fname?.message}</Form.Control.Feedback>
                </motion.div>
              </Col>
              <Col md={6}>
                <motion.div whileInView={{x:[-30,0]}} transition={{duration:1.8}}>
                  <Form.Label>Last name</Form.Label>
                  <Form.Control type="text" {...register("lname", {required: "Last name is required",pattern: {value: /^[a-zA-Z]+$/,message: "Enter last name",},})} isInvalid={!!errors.lname} />
                  <Form.Control.Feedback type="invalid">{errors.lname?.message}</Form.Control.Feedback>
                </motion.div>
              </Col>
              <Col md={12}>
                <motion.div whileInView={{y:[30,0]}} transition={{duration:1.6}}>
                  <Form.Label>Phone number</Form.Label>
                  <Form.Control type="tel" {...register("mobile", {required: "Mobile number is required",pattern: {value: /^[6-9]\d{9}$/,message: "Enter a valid 10-digit Indian mobile number",},})} isInvalid={!!errors.mobile} />
                  <Form.Control.Feedback type="invalid">{errors.mobile?.message}</Form.Control.Feedback>
                </motion.div>
              </Col>
              <Col md={12}>
                <motion.div whileInView={{y:[30,0]}} transition={{duration:1.7}}>
                  <Form.Label>Work email address</Form.Label>
                  <Form.Control type="email" placeholder="Email" {...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.div whileInView={{y:[30,0]}} transition={{duration:1.8}}>
                  <Form.Label>Company name</Form.Label>
                  <Form.Control type="text" placeholder="Company Name" {...register("company", { pattern: { value: /^[a-zA-Z0-9&.,'’\- ]{2,50}$/, message: "Enter a valid company name", },})} isInvalid={!!errors.company} />
                  <Form.Control.Feedback type="invalid">{errors.company?.message}</Form.Control.Feedback>
                </motion.div>                      
              </Col>
              <Col md={12}>
                <motion.div whileInView={{y:[30,0]}} transition={{duration:1.8}}>
                  <Form.Label>Client Type</Form.Label>
                  <Form.Select {...register("clientType", {required: "Please select client type"})} isInvalid={!!errors.clientType}>
                    <option value="">-Please Select-</option>
                    <option value="Govt">Govt</option>
                    <option value="Enterprise">Enterprise</option>
                    <option value="Events">Events</option>
                    <option value="Other">Other</option>
                  </Form.Select>
                  <Form.Control.Feedback type="invalid">{errors.clientType?.message}</Form.Control.Feedback>
                </motion.div>                      
              </Col>
              <Col md={12}>
                <motion.div whileInView={{y:[30,0]}} transition={{duration:1.8}}>
                  <Form.Label>Subject</Form.Label>
                  <Form.Select {...register("subject", {required: "Please select subject"})} isInvalid={!!errors.subject}>
                    <option value="">-Please Select-</option>
                    <optgroup label="DigiTech">
                      <option value="AI Services">AI Services</option>
                      <option value="Data Center">Data Center</option>
                      <option value="Cloud Solutions">Cloud Solutions</option>
                      <option value="System Integration">System Integration</option>
                      <option value="Streaming Solution">Streaming Solution</option>
                      <option value="AI Surveillance">AI Surveillance</option>
                    </optgroup>
                      <optgroup label="DigiExam">
                      <option value="Exam Infra">Exam Infra</option>
                      <option value="Security Solutions">Security Solutions</option>
                      <option value="Stationery & Logistic">Stationery & Logistic</option>
                      <option value="Biometric">Biometric</option>
                      <option value="Support Management">Support Management</option>
                      <option value="Frisking">Frisking</option>
                    </optgroup>
                    <optgroup label="Others">
                      <option value="Other">Other</option>
                    </optgroup>
                  </Form.Select>
                  <Form.Control.Feedback type="invalid">{errors.subject?.message}</Form.Control.Feedback>
                </motion.div>                      
              </Col>
              <Col md={12}>
                <motion.div whileInView={{y:[30,0]}} transition={{duration:2}}>
                  <Form.Label>Your Query (Message)</Form.Label>
                  <Form.Control as="textarea" rows={5} placeholder="Enter your message" {...register("message", { required: "Your message is required" })}
                    onPaste={(e) => {
                      e.preventDefault();
                      const text = e.clipboardData.getData("text/plain");
                      const target = e.target as HTMLTextAreaElement;
                      const start = target.selectionStart;
                      const end = target.selectionEnd;
                      const value = target.value;
                      target.value = value.slice(0, start) + text + value.slice(end);
                      target.selectionStart = target.selectionEnd = start + text.length;
                      const event = new Event('input', { bubbles: true });
                      target.dispatchEvent(event);
                    }}
                    isInvalid={!!errors.message}
                  />
                  <Form.Control.Feedback type="invalid">{errors.message?.message}</Form.Control.Feedback>
                </motion.div>
              </Col>
              <Col md={12}>
                <motion.button className="btn btn-lg btn-outline-danger rounded-pill" type="submit" disabled={isSubmitting} whileInView={{x:[100,0]}} transition={{duration:2.2}}>
                  {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>
        </Card.Body>
      </Card>
    </React.Fragment>
  );
}