'use client';
import React, { useState, useRef } from "react";
import Image from "next/image";
import Form from "react-bootstrap/Form";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Button from "react-bootstrap/Button";
import Alert from 'react-bootstrap/Alert';
import ReCAPTCHA from "react-google-recaptcha";
import { ListGroupItem } from "react-bootstrap";

const RequestQuoteForm: React.FC = () => {
  const [quoteform, setquoteform] = useState({
    name: "",
    email: "",
    phone: "",
    comment: "",
    token: null as string | null,
    skypeID: "",
    company: "",
    file: null as File | null,
    budget: "",
  });

  const [errors, seterrors] = useState({
    name: "",
    email: "",
    //phone: "",
    comment: "",
    token: "",
    file: "",
  });

  const [response, setResponse] = useState<{ status: string; message: string } | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const [loading, setLoading] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setquoteform({ ...quoteform, [name]: value });
    seterrors((prev) => ({ ...prev, [name]: "" }));
  };

  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    seterrors((prev: any) => ({
      ...prev,
      [e.target.name]: '',
    }));
  };

  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // const value = e.target.value;
    // if (/^\d*$/.test(value) && value.length < 16) { 
    //   setquoteform({ ...quoteform, phone: value });
    // }
    const value = e.target.value;
    if (/^\d*$/.test(value)) { 
      setquoteform({ ...quoteform, phone: value });
    }
  };

  const handleCaptcha = (value: string | null) => {
    setquoteform({ ...quoteform, token: value });
    seterrors((prev) => ({ ...prev, token: "" }));
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const allowedTypes = [
        "application/zip",
        "application/x-zip-compressed",
        "image/vnd.adobe.photoshop",
        "image/jpeg",
        "image/png",
        "image/gif",
        "application/pdf",
        "application/msword",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "application/vnd.ms-excel",
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "application/vnd.ms-powerpoint",
        "application/vnd.openxmlformats-officedocument.presentationml.presentation",
        "application/x-rar-compressed",
        "text/plain",
      ];

      if (!allowedTypes.includes(file.type)) {
        seterrors((prev) => ({ ...prev, file: "Invalid file format. Please select a valid file." }));
        return;
      }

      const maxSize = 10 * 1024 * 1024;
      if (file.size > maxSize) {
        seterrors((prev) => ({ ...prev, file: "File size exceeds the 10MB limit." }));
        return;
      }

      setquoteform({ ...quoteform, file });
      seterrors((prev) => ({ ...prev, file: "" }));
    }
  };

  const handlequote = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // const newErrors: typeof errors = { name: "", email: "", phone: "", comment: "", file: "", token: "" };
    const newErrors: typeof errors = { name: "", email: "", comment: "", file: "", token: "" };
    var pattern = /^[56789]\d{14}$/;

    setquoteform((prev) => ({
      ...prev,
        name: prev.name.trim(),
        email: prev.email.trim(),
        phone: prev.phone.trim(),
        comment: prev.comment.trim(),
        skypeID: prev.skypeID.trim(),
        company: prev.company.trim(),
        budget: prev.budget.trim(),
    }))

    if (!quoteform.name.trim()) {
      newErrors.name = "Please Enter Your Name.";
    }

    if(!quoteform.email.trim()){
      newErrors.email = 'Please Enter Your Email.'
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(quoteform.email)) {
      newErrors.email = "Invalid email format.";
    }

    // if (!quoteform.phone.trim()) {
    //   newErrors.phone = "Phone number is required.";
    // }
    // else if (quoteform.phone.length < 15) {
    //   newErrors.phone = "Invalid phone number. Please enter a 15 digit number.";
    // } else if(!pattern.test(quoteform.phone)) {
    //   newErrors.phone = "Invalid mobile number! It must start with 5, 6, 7, 8, or 9.";
    // }
    if (!quoteform.comment.trim()) {
      newErrors.comment = "Comment is required.";
    }
    if (!quoteform.token) newErrors.token = "Captcha is required.";
    if (!quoteform.file) {
      newErrors.file = "File is required.";
    }

    seterrors(newErrors);
    if (Object.values(newErrors).some((error) => error)) return;

    const formData = new FormData();
    formData.append("name", quoteform.name);
    formData.append("email", quoteform.email);
    formData.append("phone", quoteform.phone);
    formData.append("comment", quoteform.comment);
    formData.append("skypeID", quoteform.skypeID);
    formData.append("company", quoteform.company);
    formData.append("token", quoteform.token!);
    formData.append("budget", quoteform.budget);

    if (quoteform.file) formData.append("file", quoteform.file);
    setLoading(true);

    try {
      const response = await fetch(process.env.NEXT_PUBLIC_REQUESTQUOTE_API!, {
        method: "POST",
        body: formData,
      });
      const result = await response.json();

      if (result.status === 'true') {
        setResponse(result);
        setquoteform({
          name: "",
          email: "",
          phone: "",
          comment: "",
          token: null,
          skypeID: "",
          company: "",
          file: null,
          budget: ""
        });
        if (fileInputRef.current) fileInputRef.current.value = "";
        setTimeout(() => {
          setResponse(null);
        }, 5000);
        const items = document.querySelectorAll('.form-field .form-label');
        items.forEach((item) => {
          if (item.classList.contains('label-view')) {
            item.classList.remove('label-view');
          }
        });
      } else {
        setResponse(result);
        setTimeout(() => {
          setResponse(null);
        }, 5000)
      }
    } catch (error) {
      setResponse({ status: "false", message: "Something went wrong. Please try again." });
      setTimeout(() => {
        setResponse(null);
      },5000)
    } finally {
      setLoading(false);
    }
  };

  const handlelabel = (event: React.FormEvent<HTMLInputElement>) => {
    const inputElement = event.currentTarget;
    const fieldName = inputElement.getAttribute("name");
    const labelElement = document.querySelector(`label[data-name=${fieldName}]`)

    if(labelElement) {
      if(inputElement.value !== "") {
        labelElement.classList.add('label-view')
      } else {
        labelElement.classList.remove('label-view')
      }
    }
  }

  

  return (
    <>
      <div className="request_quote_title section-title">
        <span className="sub-title">
          <Image src="/img/star-icon.png" alt="image" width={32} height={34} />
          Get in Touch
        </span>
        <p>
          Simply fill up the form below with as much details as you can to request a free Quote.
          We’ll get back to you as soon as possible.
        </p>
      </div>
      <Container className="request_quote_container pb-70">
        <Form onSubmit={handlequote} autoComplete="off" className="form-container">
          <Row className="d-flex flex-wrap">
            <Form.Group className="col-12 col-sm-6 mb-3">
              <ListGroupItem className={`form-field ${errors.name ? "is-invalid" : ""}`}>
                <Form.Label data-name="name">Name</Form.Label>
                <Form.Control
                  type="text"
                  placeholder=""
                  value={quoteform.name}
                  onChange={handleChange}
                  onInput={handlelabel}
                  name="name"
                  onFocus={handleFocus} autoComplete="off"
                />
              </ListGroupItem>
              <Form.Control.Feedback type="invalid">{errors.name}</Form.Control.Feedback>
            </Form.Group>
            <Form.Group className="col-12 col-sm-6 mb-3">
              <ListGroupItem className="form-field">
                <Form.Label data-name="company">Company</Form.Label>
                <Form.Control type="text" placeholder="" name="company" value={quoteform.company} onChange={handleChange} onInput={handlelabel} />
              </ListGroupItem>
            </Form.Group>
          </Row>
          <Row className="d-flex flex-wrap">
            <Form.Group className="col-12 col-sm-6 mb-3">
              <ListGroupItem className={`form-field ${errors.email ? "is-invalid" : ""}`}>
                <Form.Label data-name="email">Email Address</Form.Label>
                <Form.Control
                  type="text"
                  placeholder=""
                  value={quoteform.email}
                  onChange={handleChange}
                  name="email"
                  onFocus={handleFocus} onInput={handlelabel} autoComplete="off"
                />
              </ListGroupItem>
              <Form.Control.Feedback type="invalid">{errors.email}</Form.Control.Feedback>
            </Form.Group>
            <Form.Group className="col-12 col-sm-6 mb-3">
              {/* <ListGroupItem className={`form-field ${errors.phone ? "is-invalid" : ""}`}>
                <Form.Label data-name="phone">Phone Number</Form.Label>
                <Form.Control
                  type="text"
                  placeholder=""
                  name="phone"
                  value={quoteform.phone}
                  onChange={handleNumberChange}
                  onInput={handlelabel}
                  maxLength={15}
                  onFocus={handleFocus}  autoComplete="off"
                />
              </ListGroupItem> */}
              <ListGroupItem className="form-field">
                <Form.Label data-name="phone">Phone Number</Form.Label>
                <Form.Control
                  type="text"
                  placeholder=""
                  name="phone"
                  value={quoteform.phone}
                  onChange={handleNumberChange}
                  onInput={handlelabel}
                  maxLength={15}
                  onFocus={handleFocus}  autoComplete="off"
                />
              </ListGroupItem>
              {/* <Form.Control.Feedback type="invalid">{errors.phone}</Form.Control.Feedback> */}
            </Form.Group>
          </Row>
          <Row className="d-flex flex-wrap">
            <Form.Group className="col-12 col-sm-6 mb-3">
              <ListGroupItem className="form-field">
                <Form.Label data-name="skypeID">Skype ID</Form.Label>
                <Form.Control type="text" placeholder="" name="skypeID" value={quoteform.skypeID} onChange={handleChange} onInput={handlelabel} />
              </ListGroupItem>
            </Form.Group>
            <Form.Group className="col-12 col-sm-6 mb-3">
              <Form.Select defaultValue="Choose..." name="budget" value={quoteform.budget} onChange={handleChange} onFocus={handleFocus}>
                <option value="">Choose Price</option>
                <option value="$0-$5000">$0-$5000</option>
                <option value="$5000-$10000">$5000-$10000</option>
                <option value="$10000-$25000">$10000-$25000</option>
                <option value="$25000-$50000">$25000-$50000</option>
                <option value="$50000-$75000">$50000-$75000</option>
                <option value="$75000 and above">$75000 and above</option>
              </Form.Select>
            </Form.Group>
          </Row>
          <Row>
            <Form.Group className="col-12">
              <ListGroupItem className="form-field mb-3">
                <Form.Label data-name="comment">Leave a comment here</Form.Label>
                <Form.Control
                  as="textarea"
                  placeholder=""
                  style={{ height: "100px" }}
                  onChange={handleChange}
                  value={quoteform.comment}
                  name="comment"
                  onFocus={handleFocus}  onInput={handlelabel} autoComplete="off"
                />
              </ListGroupItem>
              <Form.Control.Feedback type="invalid">{errors.comment}</Form.Control.Feedback>
            </Form.Group>
          </Row>
          <Form.Group controlId="formFile" className="file-upload-field mb-3">
            <div className="file-upload">
              <input type="file" id="fileInput" ref={fileInputRef} 
              accept=".zip,.psd,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.rar,.txt,.jpg,.jpeg,.png,.gif,.pdf"
              onChange={handleFileChange}
              />
            </div>
            <p className="file_format_text mb-0">Accepted formate (.zip, .psd, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .rar, .txt, .jpg, .jpeg, .png, .gif, .pdf) Accepted Maximum File Size 10MB.</p>
            {errors.file ? <Form.Control.Feedback type="invalid">
              {errors.file}
            </Form.Control.Feedback> : ""}
          </Form.Group>
          <Form.Group className="captcha">
            <ReCAPTCHA
              sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
              onChange={handleCaptcha}
            />
            {errors.token ? (
              <Form.Control.Feedback type="invalid">
                {errors.token}
              </Form.Control.Feedback>
            ) : null}
          </Form.Group>
          <Button variant="primary" type="submit" className={`${loading ? "default-btn loading" : "default-btn"}`}>
            {loading ? "Submitting..." : "Submit"}
            <span></span>
          </Button>
        </Form>
        {response && (
          response.status === "true" ? (
            <Alert variant="success" className="mt-3 mb-0">
              {response.message}
            </Alert>
          ) : (
            <Alert variant="danger" className="mt-3 mb-0">
              {response.message}
            </Alert>
          )
        )}
      </Container>
    </>
  );
};

export default RequestQuoteForm;