"use client";
import { useState } from "react";
import Footer from "@/components/Footer";
import { useLanguage } from "@/context/LanguageContext";
import api from "@/api/axios";
import { toast } from "sonner";


export default function ContactPage() {
  const { lang,t } = useLanguage();

  const [fullName, setFullName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!fullName.trim()) {
      toast.info(lang === "ar" ? "يرجى إدخال الاسم الكامل" : "Please enter your full name");
      return;
    }

    if (!email.trim()) {
      toast.info(lang === "ar" ? "يرجى إدخال البريد الإلكتروني" : "Please enter your email");
      return;
    }

    if (!phone.trim()) {
      toast.info(lang === "ar" ? "يرجى إدخال رقم الهاتف" : "Please enter your phone number");
      return;
    }

    if (!message.trim()) {
      toast.info(lang === "ar" ? "يرجى إدخال الرسالة" : "Please enter your message");
      return;
    }

    setLoading(true);

    try {
      await api.post("contact-us", {
        full_name: fullName.trim(),
        email: email.trim(),
        phone: phone.trim(),
        message: message.trim(),
      });

      toast.success(
          lang === "ar"
              ? "تم إرسال رسالتك بنجاح"
              : "Your message has been sent successfully"
      );

      setFullName("");
      setEmail("");
      setPhone("");
      setMessage("");
    } catch (error: any) {
      toast.error(
          error?.response?.data?.message ||
          (lang === "ar"
              ? "حدث خطأ أثناء إرسال الرسالة"
              : "An error occurred while sending the message")
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-white px-4 min-h-screen flex flex-col">
      <section className="text-center py-12 mt-20 privacy-policy">
        <div className="flex justify-center items-center mb-4">
          <span className="flex items-center gap-2 border border-[#FF2B77] text-primary text-sm font-medium px-4 py-1 rounded-full">
            <span className="w-2 h-2 bg-[#FF2B77] rounded-full"></span>
            {t("contact_us")}{" "}
          </span>
        </div>
        <h2 className="text-xl md:text-4xl font-semibold text-gray-800 flex justify-center items-center leading-snug">
          {t("we_are_here_to_answer")}{" "}&nbsp;
          <span className="text-primary mr-2">{t("questions")}.</span>
          <img
            src="/icons/letter.svg"
            alt="letter"
            className="ml-2 w-6 h-6 relative top-[-5px]"
          />
        </h2>
        <p className="text-[#888C92] max-w-2xl mx-auto mt-3 leading-relaxed">
          {t("serve_service")}
        </p>
      </section>

      {/* 💌 Contact Info Boxes */}
      <section className="px-6 md:px-20 mb-12 relative z-1">
        <div className="relative flex flex-col md:flex-row justify-between items-center bg-white rounded-2xl overflow-hidden md:divide-none md:divide-x shadow-lg">
          {/* ظل علوي */}
          <span className="absolute top-0 left-0 w-full h-1 bg-gradient-to-b from-black/6 to-transparent"></span>

          {/* Email */}
          <div className="flex-1 text-center py-6 px-4 relative">
            <img src="/svg/location.svg" alt="location" className="mx-auto mb-3" />
          </div>

          {/* 🔸 الخط لا يظهر على الموبايل */}
          <div className="hidden md:block">
            <img src="/svg/line.svg" alt="" className="mx-auto mb-3" />
          </div>

          {/* Phone */}
          <div className="flex-1 text-center py-6 px-4 relative">
            <img src="/svg/contact.svg" alt="contact" className="mx-auto mb-3" />
          </div>

          {/* 🔸 الخط لا يظهر على الموبايل */}
          <div className="hidden md:block">
            <img src="/svg/line.svg" alt="" className="mx-auto mb-3" />
          </div>

          {/* Location */}
          <div className="flex-1 text-center py-6 px-4 relative">
            <img src="/svg/email.svg" alt="email" className="mx-auto mb-3" />
          </div>
        </div>
      </section>

      {/* 🤝 Contact Us + Form */}
      <section className="relative w-full flex justify-center mb-28">
        <div className="grid md:grid-cols-2 gap-10 w-full max-w-6xl items-start">
          {/* Text Section */}
          <div
              className={`space-y-4 ${
                  lang === "ar"
                      ? "text-right md:order-1"
                      : "text-left md:order-2"
              }`}
          >
            <img
                src="/icons/hand.svg"
                alt="hand"
                className={`w-22 mb-2 ${lang === "ar" ? "" : "ml-auto md:ml-0"}`}
            />

            <h3 className="text-xl md:text-2xl font-medium text-secondary">
              {t("contact_us_today")}
            </h3>

            <div className="space-y-1">
              {[
                t("contact_point_1"),
                t("contact_point_2"),
                t("contact_point_3"),
                t("contact_point_4"),
              ].map((text, i) => (
                  <div
                      key={i}
                      className={`flex items-center gap-4 bg-[#FEF1F6] rounded-[4px] p-4 ${
                          lang === "ar" ? "pr-4 flex-row" : "pl-4"
                      }`}
                  >
                    <img src="/icons/check.svg" alt="check" className="w-5 h-5" />
                    <p
                        className={`text-gray-700 text-sm md:text-base ${
                            lang === "ar" ? "text-right" : "text-left"
                        }`}
                    >
                      {text}
                    </p>
                  </div>
              ))}
            </div>
          </div>

          {/* Form Section */}
          <div
              className={`relative w-full ${
                  lang === "ar" ? "md:order-2" : "md:order-1"
              }`}
          >
            <form
                onSubmit={handleSubmit}
                className="bg-white shadow-md border border-pink-100 rounded-[12px] p-6 space-y-4 relative z-10"
            >
              <div className={lang === "ar" ? "mb-4 text-right" : "mb-4 text-left"}>
                <label
                    className={`block text-[#1B213E] text-sm font-medium mb-2 ${
                        lang === "ar" ? "text-right mr-1" : "text-left ml-1"
                    }`}
                >
                  {t("full_name")}*
                </label>
                <input
                    type="text"
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    placeholder={t("enter_full_name")}
                    className={`w-full border border-[#E3E3E3] rounded-[4px] p-3 text-[#7D7581] focus:outline-none focus:ring-2 focus:ring-[#FEF1F6] ${
                        lang === "ar" ? "text-right" : "text-left"
                    }`}
                />
              </div>

              <div className={lang === "ar" ? "mb-4 text-right" : "mb-4 text-left"}>
                <label
                    className={`block text-[#1B213E] text-sm font-medium mb-2 ${
                        lang === "ar" ? "text-right mr-1" : "text-left ml-1"
                    }`}
                >
                  {t("email")}*
                </label>
                <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder={t("enter_email")}
                    className={`w-full border border-[#E3E3E3] rounded-[4px] p-3 text-[#7D7581] focus:outline-none focus:ring-2 focus:ring-[#FEF1F6] ${
                        lang === "ar" ? "text-right" : "text-left"
                    }`}
                />
              </div>

              <div className={lang === "ar" ? "mb-4 text-right" : "mb-4 text-left"}>
                <label
                    className={`block text-[#1B213E] text-sm font-medium mb-2 ${
                        lang === "ar" ? "text-right mr-1" : "text-left ml-1"
                    }`}
                >
                  {t("phone_number")}*
                </label>
                <input
                    type="text"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder={t("phone_number")}
                    className={`w-full border border-[#E3E3E3] rounded-[4px] p-3 text-[#7D7581] focus:outline-none focus:ring-2 focus:ring-[#FEF1F6] ${
                        lang === "ar" ? "text-right" : "text-left"
                    }`}
                />
              </div>

              <div className={lang === "ar" ? "mb-4 text-right" : "mb-4 text-left"}>
                <label
                    className={`block text-[#1B213E] text-sm font-medium mb-2 ${
                        lang === "ar" ? "text-right mr-1" : "text-left ml-1"
                    }`}
                >
                  {t("message")}*
                </label>
                <textarea
                    rows={3}
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    placeholder={t("enter_message")}
                    className={`w-full border border-[#E3E3E3] rounded-[4px] p-3 text-[#7D7581] focus:outline-none focus:ring-2 focus:ring-[#FEF1F6] ${
                        lang === "ar" ? "text-right" : "text-left"
                    }`}
                />
              </div>

              <button
                  type="submit"
                  disabled={loading}
                  className="w-full bg-[#FF2B77] text-white font-book py-3 rounded-[4px] disabled:opacity-70 disabled:cursor-not-allowed"
              >
                {loading
                    ? lang === "ar"
                        ? "جاري الإرسال..."
                        : "Sending..."
                    : t("send")}
              </button>
            </form>
          </div>
        </div>

        <div className="absolute bottom-[-80px] inset-x-0 z-0">
          <img
              src="/svg/wide-line.svg"
              alt="wide pink line"
              className="w-screen h-auto object-cover"
          />
        </div>
      </section>

      {/* 🌍 Map Section */}
      <section className="relative text-center bg-white overflow-hidden">
        <h2 className="text-2xl md:text-4xl font-semibold text-gray-800 flex justify-center items-center mb-12">
          {t("we_reach_you_wherever")}{" "}
          <span className="text-primary mr-2">{t("you_are")}</span>
          <img
              src="/icons/letter.svg"
              alt="letter"
              className="ml-2 w-6 h-6 relative top-[-5px]"
          />
        </h2>

        <div>
          <img src="/svg/world-map.svg" alt="World Map" className="" />
        </div>
      </section>

      <section className="relative py-10 flex justify-center bg-white mb-10">
        <div className="relative w-full max-w-5xl rounded-[45px] px-8 py-8 text-center text-white overflow-hidden ready-section">
          <h2 className="text-[86px] font-bold">{t("are_you_ready")}</h2>
          <p className="mb-8 text-base max-w-2xl mx-auto">
            {t("home_desc")}
          </p>
          <div className="mx-auto w-max cursor-pointer">
            <div className="mx-auto flex justify-center">
              <div className="relative w-[250px] h-[86px] rounded-full bg-white/80 shadow-[0_8px_25px_rgba(0,0,0,0.28)] select-none pointer-events-none overflow-visible">
                {/* النص */}
                <span
                    className={`absolute top-1/2 -translate-y-1/2 text-primary text-[38px] font-bold ${
                        lang === "ar" ? "left-[55px]" : "left-[50px]"
                    }`}
                >
      {lang === "ar" ? "نعم" : "Yes"}
    </span>

                {/* الدائرة */}
                <div className="absolute right-[-2px] top-1/2 -translate-y-1/2 w-[96px] h-[96px] rounded-full bg-[#E9ECF3] border-[6px] border-white shadow-[0_7px_14px_rgba(0,0,0,0.25)]" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 🌸 Footer */}
      <Footer />
    </div>
  );
}