"use client";

import useAxios from "@/hooks/useAxios";
import React, { useEffect, useState } from "react";
import SafeHtmlRenderer from "../SafeHtmlRenderer";
import { RefreshCw, MapPin, Phone, Mail, Clock } from "lucide-react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function Contact() {
  const { postData, getData } = useAxios();
  const [captchaSvg, setCaptchaSvg] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const [formData, setFormData] = useState({
    captcha: "",
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    reason: "",
    message: "",
  });

  const fetchCaptcha = async () => {
    try {
      const { data }: any = await getData("captcha/generateCaptcha", {
        withCredentials: true,
      });
      setCaptchaSvg(data?.captcha);
    } catch (error) {
      console.log(error);
      toast.error("Failed to load captcha.");
    }
  };

  useEffect(() => {
    fetchCaptcha();
  }, []);

  const sanitizeName = (value: string) => {
    return value.replace(/[^a-zA-Z\s'-]/g, "").slice(0, 50);
  };

  const sanitizePhone = (value: string) => {
    return value.replace(/\D/g, "").slice(0, 10);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { firstName, lastName, reason, message, email } = formData;

    if (!firstName || !lastName || !reason || !message || !email) {
      toast.error("Please enter all the required fields.");
      return;
    }

    setIsSubmitting(true);

    try {
      const response: any = await postData("complain", formData, {
        withCredentials: true,
      });

      if (response?.success) {
        toast.success(response?.message || "Message sent successfully!");
        setFormData({
          captcha: "",
          firstName: "",
          lastName: "",
          email: "",
          phone: "",
          reason: "",
          message: "",
        });
        fetchCaptcha();
      } else {
        if (response?.message === "Captcha problem again enter") {
          fetchCaptcha();
          toast.error("Captcha is incorrect");
        } else {
          toast.error(response?.message || "Something went wrong.");
        }
      }
    } catch (error) {
      toast.error("Something went wrong. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="container m-auto overflow-hidden">
      <div className="mx-auto max-w-7xl px-4 text-center">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">Contact Us</h1>
      </div>

      <div className="container mx-auto px-4 py-8">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Contact Form Section */}
          <div className="w-full lg:w-1/2">
            <div className="bg-white rounded-lg shadow-xl p-8">
              <h2 className="text-2xl font-semibold text-gray-800 mb-6">
                Send us a Message
              </h2>
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label
                      htmlFor="firstName"
                      className="block text-sm font-medium text-gray-700 mb-1"
                    >
                      First Name<span className="text-red-600">*</span>
                    </label>
                    <input
                      type="text"
                      id="firstName"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="First Name"
                      value={formData.firstName}
                      maxLength={50}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          firstName: sanitizeName(e.target.value),
                        })
                      }
                    />
                  </div>

                  <div>
                    <label
                      htmlFor="lastName"
                      className="block text-sm font-medium text-gray-700 mb-1"
                    >
                      Last Name<span className="text-red-600">*</span>
                    </label>
                    <input
                      type="text"
                      id="lastName"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="Last Name"
                      value={formData.lastName}
                      maxLength={50}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          lastName: sanitizeName(e.target.value),
                        })
                      }
                    />
                  </div>
                </div>

                <div>
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Email<span className="text-red-600">*</span>
                  </label>
                  <input
                    type="email"
                    id="email"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Enter Email Address"
                    value={formData.email}
                    onChange={(e) =>
                      setFormData({ ...formData, email: e.target.value })
                    }
                  />
                </div>

                <div>
                  <label
                    htmlFor="phone"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Phone Number <span className="text-red-600">*</span>
                  </label>
                  <input
                    type="tel"
                    id="phone"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Enter Phone Number"
                    value={formData.phone}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        phone: e.target.value,
                      })
                    }
                  />
                </div>

                <div>
                  <label
                    htmlFor="reason"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Type<span className="text-red-600">*</span>
                  </label>
                  <select
                    id="reason"
                    className="w-full text-gray-500 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    value={formData.reason}
                    onChange={(e) =>
                      setFormData({ ...formData, reason: e.target.value })
                    }
                  >
                    <option value="">Select</option>
                    <option value="Complain">Complain</option>
                    <option value="Feedback">Feedback</option>
                    <option value="Appeal">Appeal</option>
                    <option value="General Enquiry">General Enquiry</option>
                    <option value="Appeal">Appeal</option>
                    <option value="Complaint">Complaint</option>
                  </select>
                </div>

                <div>
                  <label
                    htmlFor="message"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Message<span className="text-red-600">*</span>
                  </label>
                  <textarea
                    id="message"
                    rows={4}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Type Message Here"
                    value={formData.message}
                    onChange={(e) =>
                      setFormData({ ...formData, message: e.target.value })
                    }
                  />
                </div>

                <div>
                  <label
                    htmlFor="captcha"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Captcha<span className="text-red-600">*</span>
                  </label>
                  <input
                    id="captcha"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Enter Captcha"
                    value={formData.captcha}
                    onChange={(e) =>
                      setFormData({ ...formData, captcha: e.target.value })
                    }
                  />
                </div>

                <div className="flex items-center justify-center space-x-2">
                  <SafeHtmlRenderer htmlContent={captchaSvg} />
                  <button
                    type="button"
                    onClick={fetchCaptcha}
                    className="p-2 rounded-full hover:bg-gray-200"
                    aria-label="Regenerate Captcha"
                  >
                    <RefreshCw className="w-5 h-5" />
                  </button>
                </div>

                <div className="flex flex-row justify-center">
                  <button
                    disabled={isSubmitting}
                    className={`${
                      isSubmitting ? "bg-gray-500 text-white" : "bg-btn"
                    } inline-flex hover:bg-btnhover hover:scale-105 w-48 items-center justify-center px-6 py-2 border border-transparent text-sm font-medium rounded-full text-black`}
                  >
                    {isSubmitting ? "Please wait..." : "Send Message"}
                  </button>
                </div>
              </form>
            </div>
          </div>

          {/* Map and Address Section */}
          <div className="w-full lg:w-1/2">
            <div className="bg-white rounded-lg shadow-xl p-8 h-full">
              <h2 className="text-2xl font-semibold text-gray-800 mb-6">
                Visit Our Office
              </h2>

              {/* Map Container */}
              <div className="mb-6 rounded-lg overflow-hidden shadow-md">
                <div className="w-full h-64 bg-gray-200 relative">
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2923.225834197238!2d-106.96618432427373!3d44.79767437107036!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5335f8d7b038b6c7%3A0x4d33d1c81c5b4b0b!2s30%20N%20Gould%20St%20Ste%20B%2C%20Sheridan%2C%20WY%2082801%2C%20USA!5e0!3m2!1sen!2sin!4v1698765432100!5m2!1sen!2sin"
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    title="Our Office Location"
                  ></iframe>
                </div>
              </div>

              {/* Address Details */}
              <div className="space-y-4">
                <div className="flex items-start space-x-3">
                  <MapPin className="w-5 h-5 text-blue-600 mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-gray-800">
                      Office Address
                    </h3>
                    <p className="text-gray-600">
                      30 N Gould Ste B<br />
                      Sheridan, WY 82801
                      <br />
                      USA
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <Clock className="w-5 h-5 text-blue-600 mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-gray-800">
                      Business Hours
                    </h3>
                    <p className="text-gray-600">
                      Monday - Friday: 9:00 AM - 6:00 PM
                      <br />
                      Saturday: Closed
                      <br />
                      Sunday: Closed
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Toast Container */}
      <ToastContainer position="top-center" autoClose={3000} />
    </div>
  );
}

export default Contact;