"use client";
import React, { useState, useEffect, useRef } from "react";
import { ChevronRight, Gem, Search, ChevronDown } from "lucide-react";
import authAxios from "@/utils/axios";
import Image from "next/image";

const PremiumBanner = ({ data }) => {
  const {
    header1,
    description1,
    header_quote1,
    header_quote2,
    header_quote3,
    header_quote4,
  } = data || {};
  
  const [formData, setFormData] = useState({
    first_name: "",
    last_name: "",
    email: "",
    phone_number: "",
    country: "",
  });

  const [message, setMessage] = useState("");
  const [countries, setCountries] = useState([]);
  const [filteredCountries, setFilteredCountries] = useState([]);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const dropdownRef = useRef(null);

  useEffect(() => {
    const fetchCountries = async () => {
      try {
        const response = await fetch("https://countriesnow.space/api/v0.1/countries/");
        const data = await response.json();
        if (!data.error && data.data) {
          setCountries(data.data);
          setFilteredCountries(data.data);
        }
      } catch (error) {
        console.error("Error fetching countries:", error);
      }
    };

    fetchCountries();
  }, []);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsDropdownOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  useEffect(() => {
    if (searchTerm) {
      const filtered = countries.filter(country => 
        country.country.toLowerCase().includes(searchTerm.toLowerCase())
      );
      setFilteredCountries(filtered);
    } else {
      setFilteredCountries(countries);
    }
  }, [searchTerm, countries]);

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

  const handleCountrySearch = (e) => {
    setSearchTerm(e.target.value);
  };

  const selectCountry = (countryName) => {
    setFormData(prev => ({ ...prev, country: countryName }));
    setIsDropdownOpen(false);
    setSearchTerm("");
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!formData.country) {
      setMessage("Please select your country.");
      return;
    }
    
    try {
      const response = await authAxios.post(
        "/consultation/booking/create/",
        formData
      );
      if (response.status === 201) {
        setFormData({
          first_name: "",
          last_name: "",
          email: "",
          phone_number: "",
          country: "",
        });
        setMessage("Consultation experts will contact you shortly.");
        setTimeout(() => {
          setMessage("");
        }, 5000);
      } else {
        setMessage("An error occurred. Please try again.");
      }
    } catch (error) {
      console.error("Error submitting form:", error);
      setMessage("An error occurred. Please try again.");
    }
  };

  return (
    <div className="min-h-screen bg-white p-2 md:p-8 flex items-center justify-center">
      <div className="max-w-6xl w-full bg-white shadow-lg rounded-xl overflow-hidden p-4 md:p-12">
        <div className="grid md:grid-cols-2 gap-8">
          <div className="bg-[#EDE8E0] p-2 md:p-14 flex flex-col justify-center rounded-lg">
            <h2 className="text-4xl font-serif text-center text-[#AC8C6B]">
              Book a Free Consultation
            </h2>
            <p className="text-center text-gray-600 text-sm mt-2">
              Get expert guidance tailored to your needs.
            </p>

            <form onSubmit={handleSubmit} className="space-y-5 mt-6">
              <input
                type="text"
                name="first_name"
                placeholder="First Name"
                value={formData.first_name}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />
              <input
                type="text"
                name="last_name"
                placeholder="Last Name"
                value={formData.last_name}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />
              <input
                type="email"
                name="email"
                placeholder="Email"
                value={formData.email}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />
              <input
                type="text"
                name="phone_number"
                placeholder="Phone Number"
                value={formData.phone_number}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />
              
              <div className="relative" ref={dropdownRef}>
                <div 
                  className="w-full p-4 border rounded-md flex justify-between items-center cursor-pointer bg-white"
                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                >
                  <span className={formData.country ? "text-black" : "text-gray-400"}>
                    {formData.country || "Select Country"}
                  </span>
                  <ChevronDown className={`transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`} />
                </div>
                
                {isDropdownOpen && (
                  <div className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg max-h-60 overflow-y-auto">
                    <div className="sticky top-0 bg-white p-2 border-b">
                      <div className="relative">
                        <input
                          type="text"
                          placeholder="Search countries..."
                          value={searchTerm}
                          onChange={handleCountrySearch}
                          className="w-full p-2 pl-8 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                        />
                        <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
                      </div>
                    </div>
                    
                    {filteredCountries.length > 0 ? (
                      filteredCountries.map((country, index) => (
                        <div
                          key={country.iso2 + index}
                          className="p-3 hover:bg-gray-100 cursor-pointer"
                          onClick={() => selectCountry(country.country)}
                        >
                          {country.country}
                        </div>
                      ))
                    ) : (
                      <div className="p-3 text-center text-gray-500">No countries found</div>
                    )}
                  </div>
                )}
              </div>

              {message && (
                <p className={`py-2 text-center rounded-md ${message.includes("error") ? "text-red-700 bg-red-100" : "text-green-700 bg-green-100"}`}>
                  {message}
                </p>
              )}

              <button
                type="submit"
                className="w-full bg-[#AC874C] text-white font-semibold py-4 rounded-md hover:bg-[#96724f] transition"
              >
                Request Consultation
              </button>
            </form>
          </div>

          <div className="p-14 flex flex-col justify-center">
            <h2 className="text-4xl font-serif text-[#AC8C6B] text-center">
              {header1 ?? "Why Choose Our Consultation?"}
            </h2>
            <p className="text-center text-gray-600 text-sm mt-2">
              {description1 ??
                "Gain expert insights and personalized guidance."}
            </p>

            <ul className="mt-6 space-y-4 text-gray-700 text-lg">
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote1 ??
                  "Expert guidance from experienced professionals"}
              </li>
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote2 ?? "Tailored advice for your specific needs"}
              </li>
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote3 ?? "Unlock clarity and direction in life"}
              </li>
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote4 ?? "Free initial text-based consultation"}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PremiumBanner;