"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Home,
  ChevronRight,
  MapPin,
  Phone,
  Mail,
  Globe,
  Building2,
  Factory,
  Clock,
  Send,
  MessageCircle,
  ArrowRight,
  Mail as MailIcon,
  PhoneCall,
  User,
  FileText,
  CheckCircle,
  AlertCircle,
  Package,
} from "lucide-react";
import { insertEnquiry } from "@/utils/enquiry";
import { usePathname, useSearchParams } from "next/navigation";
export default function ContactPage() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
    const [formData, setFormData] = useState({
      name: "",
      email: "",
      phone: "",
      message: "",
      city: "",
      product: "",
    });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState(null);

  const products = [
    "Select Product",
    "Epoxy Coated Dowel Bars",
    "Epoxy Coated Reinforcement Bars",
    "Epoxy Coated TMT Bars",
    "Fusion Bonded Epoxy Coated TMT Bars",
    "Fusion Bonded Epoxy Coated Dowel Bar",
    "Dowel Bars",
    "Mild Steel Dowel Bars",
    "PVC Coated Binding Wires",
    "MS Binding Wires",
    "GI Binding Wires",
    
  ];

  const offices = [
    {
      name: "Hariom Ingots and Power Private Limited",
      address:
        "Plot No.: 59-60, Light Industrial Area, Bhilai, 490026, Chhattisgarh",
      country: "INDIA",
      icon: Building2,
      mapLink: "https://maps.google.com/?q=Bhilai+Chhattisgarh+INDIA",
    },
    {
      name: "Hariom Coatings Private Limited",
      address:
        "Village - Gaurapur, Tehsil - Wada, Dist. - Palghar, 421312, Maharashtra",
      country: "INDIA",
      icon: Factory,
      mapLink: "https://maps.google.com/?q=Palghar+Maharashtra+INDIA",
    },
    {
      name: "USA Office",
      address:
        "Kapil Mittal - C/o Candid Realities LLC, 10022 Torian Way, Richmond, TX 77407",
      country: "USA",
      icon: Globe,
      mapLink: "https://maps.google.com/?q=Richmond+TX+77407+USA",
    },
  ];

  const contactDetails = [
    {
      icon: Phone,
      value: "+91 81099-90000",
      href: "tel:+918109990000",
      label: "Customer Support",
    },
    {
      icon: Phone,
      value: "+91 78840-83301",
      href: "tel:+917884083301",
      label: "Sales Enquiry",
    },
    {
      icon: Phone,
      value: "+91 91099-18421",
      href: "tel:+919109918421",
      label: "Export Enquiry",
    },
    {
      icon: Mail,
      value: "info@hariomepoxyshield.com",
      href: "mailto:info@hariomepoxyshield.com",
      label: "Email Us",
    },
  ];

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus(null);


     const fullPageUrl =
       typeof window !== "undefined" ? window.location.href : pathname;

    // Validate required fields
    if (
      !formData.name ||
      !formData.email ||
      !formData.phone ||
      !formData.message
    ) {
      setSubmitStatus({
        type: "error",
        message: "Please fill in all required fields.",
      });
      setIsSubmitting(false);
      return;
    }

    // Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
      setSubmitStatus({
        type: "error",
        message: "Please enter a valid email address.",
      });
      setIsSubmitting(false);
      return;
    }

    // Validate mobile number (10 digits)
    const mobileRegex = /^\d{10}$/;
    if (!mobileRegex.test(formData.phone)) {
      setSubmitStatus({
        type: "error",
        message: "Please enter a valid 10-digit mobile number.",
      });
      setIsSubmitting(false);
      return;
    }

    // Get userId from localStorage
    const userId = localStorage.getItem("userId");

    // Prepare data for API - mapping form fields to API expected fields
    const enquiryData = {
      fullname: formData.name, // map name -> fullname
      email: formData.email,
      mobile: formData.phone, // map phone -> mobile
      product: formData.product,
      city: formData.city,
      cookieUser: userId,
      remark: formData.message, // map message -> remark
      page_url: fullPageUrl,
    };

    try {
      const response = await insertEnquiry(enquiryData);

      setSubmitStatus({
        type: "success",
        message: "Thank you! Our team will get back to you soon.",
      });

      // Reset form
      setFormData({
        name: "",
        email: "",
        phone: "",
        message: "",
        product: "",
        city: "",
      });
    } catch (error) {
      setSubmitStatus({
        type: "error",
        message:
          error.message || "Something went wrong. Please try again later.",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="w-full bg-white">
      {/* Hero Section */}
      <div className="relative bg-gray-900 text-white py-10 lg:py-10 overflow-hidden">
        <div className="absolute inset-0 bg-gray-900 bg-gradient-to-r from-red-900/20 to-transparent" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-2 text-sm mb-6 md:mt-20">
            <Link
              href="/"
              className="text-gray-400 hover:text-white transition-colors flex items-center gap-1"
            >
              <Home className="w-4 h-4" />
              Home
            </Link>
            <ChevronRight className="w-4 h-4 text-gray-500" />
            <span className="text-white">Contact Us</span>
          </div>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
            Contact <span className="text-red-500">Us</span>
          </h2>
          <p className="text-gray-300 text-sm md:text-base max-w-2xl">
            Get in touch with our team for inquiries, support, or collaborations
          </p>
        </div>
      </div>

      {/* Contact Section */}
      <div className="bg-white py-12 lg:py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
            {/* Left Side - Contact Info */}
            <div>
              <div className="flex items-center gap-2 mb-2">
                <PhoneCall className="w-5 h-5 text-red-600" />
                <span className="text-xs font-semibold text-red-600 uppercase tracking-wider">
                  Get In Touch
                </span>
              </div>
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
                Reach Us
              </h2>
              <div className="w-12 h-0.5 bg-red-600 mb-6" />

              <div className="space-y-4 mb-8">
                {contactDetails.map((contact, idx) => (
                  <a
                    key={idx}
                    href={contact.href}
                    className="flex items-center gap-4 p-4 bg-gray-50 hover:bg-red-50 transition-colors group"
                  >
                    <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center group-hover:bg-red-600 transition-colors">
                      <contact.icon className="w-5 h-5 text-red-600 group-hover:text-white transition-colors" />
                    </div>
                    <div>
                      <p className="text-xs text-gray-400">{contact.label}</p>
                      <p className="text-sm font-medium text-gray-800">
                        {contact.value}
                      </p>
                    </div>
                  </a>
                ))}
              </div>

              {/* <div className="flex gap-3">
                <a
                  href="https://wa.me/918109990000"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white text-sm font-medium hover:bg-green-700 transition-colors"
                >
                  <MessageCircle className="w-4 h-4" />
                  WhatsApp
                </a>
                <a
                  href="mailto:info@hariomepoxyshield.com"
                  className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors"
                >
                  <MailIcon className="w-4 h-4" />
                  Email Us
                </a>
              </div> */}
            </div>

            {/* Right Side - Contact Form */}
            <div>
              <div className="flex items-center gap-2 mb-2">
                <FileText className="w-5 h-5 text-red-600" />
                <span className="text-xs font-semibold text-red-600 uppercase tracking-wider">
                  Send Message
                </span>
              </div>
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
                Get In Touch
              </h2>
              <div className="w-12 h-0.5 bg-red-600 mb-6" />

              {/* Success/Error Message */}
              {submitStatus && (
                <div
                  className={`mb-6 p-4 rounded-lg flex items-center gap-3 ${
                    submitStatus.type === "success"
                      ? "bg-green-50 border border-green-200 text-green-700"
                      : "bg-red-50 border border-red-200 text-red-700"
                  }`}
                >
                  {submitStatus.type === "success" ? (
                    <CheckCircle className="w-5 h-5 shrink-0" />
                  ) : (
                    <AlertCircle className="w-5 h-5 shrink-0" />
                  )}
                  <p className="text-sm">{submitStatus.message}</p>
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-5">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Full Name *
                  </label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <input
                      type="text"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      required
                      className="w-full pl-10 pr-4 py-2.5 border border-gray-300 focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none transition-colors"
                      placeholder="Enter your full name"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Email Address *
                    </label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        className="w-full pl-10 pr-4 py-2.5 border border-gray-300 focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none transition-colors"
                        placeholder="your@email.com"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Phone Number *
                    </label>
                    <div className="relative">
                      <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                      <input
                        type="tel"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        required
                        className="w-full pl-10 pr-4 py-2.5 border border-gray-300 focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none transition-colors"
                        placeholder="+91 1234567890"
                      />
                    </div>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    City <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <input
                      type="text"
                      name="city"
                      value={formData.city}
                      onChange={handleChange}
                      required
                      className="w-full pl-10 pr-4 py-2.5 border border-gray-300 focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none transition-colors"
                      placeholder="Enter your city"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Product Interest <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <Package className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <select
                      name="product"
                      value={formData.product}
                      onChange={handleChange}
                      required
                      className="w-full pl-10 pr-4 py-2.5 border border-gray-300 focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none transition-colors appearance-none bg-white"
                    >
                      {products.map((product, idx) => (
                        <option
                          key={idx}
                          value={product === "Select Product" ? "" : product}
                        >
                          {product}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Message *
                  </label>
                  <textarea
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    required
                    rows="5"
                    className="w-full px-4 py-2.5 border border-gray-300 focus:border-red-500 focus:ring-1 focus:ring-red-500 outline-none transition-colors resize-none"
                    placeholder="Tell us about your requirements..."
                  />
                </div>

                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-red-600 text-white text-sm font-semibold hover:bg-red-700 transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
                >
                  {isSubmitting ? (
                    <>
                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                      Sending...
                    </>
                  ) : (
                    <>
                      <Send className="w-4 h-4" />
                      Send Message
                    </>
                  )}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      {/* Offices Section */}
      <div className="bg-gray-50 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-2 mb-2">
            <MapPin className="w-5 h-5 text-red-600" />
            <span className="text-xs font-semibold text-red-600 uppercase tracking-wider">
              Our Locations
            </span>
          </div>
          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
            Our Offices
          </h2>
          <div className="w-12 h-0.5 bg-red-600 mb-6" />

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {offices.map((office, idx) => (
              <div
                key={idx}
                className="border border-gray-200 p-5 bg-white hover:border-red-200 transition-all"
              >
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 bg-red-50 rounded-full flex items-center justify-center flex-shrink-0">
                    <office.icon className="w-5 h-5 text-red-600" />
                  </div>
                  <div>
                    <h3 className="text-base font-bold text-gray-900 mb-1">
                      {office.name}
                    </h3>
                    <p className="text-gray-500 text-sm leading-relaxed">
                      {office.address}
                    </p>
                    <div className="flex items-center gap-2 mt-2">
                      <span className="text-xs font-medium text-red-600">
                        {office.country}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Map Section */}
      <div className="bg-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-2 mb-2">
            <MapPin className="w-5 h-5 text-red-600" />
            <span className="text-xs font-semibold text-red-600 uppercase tracking-wider">
              Find Us
            </span>
          </div>
          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
            Our Location
          </h2>
          <div className="w-12 h-0.5 bg-red-600 mb-6" />

          <div className="w-full h-[400px] bg-gray-200 rounded-lg overflow-hidden shadow-md">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3133.2958363032044!2d81.39051099999999!3d21.220923999999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a29225a052a2241%3A0x4393b08bb1feb516!2sHARIOM%20Group%20Bhilai!5e1!3m2!1sen!2sin!4v1779528474872!5m2!1sen!2sin"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Hariom Group Bhilai Location Map"
            />
          </div>
        </div>
      </div>
    </div>
  );
}