"use client";

import Image from "next/image";
import { FaPhoneAlt } from "react-icons/fa";
import { MdEmail } from "react-icons/md";
import { IoLocationSharp } from "react-icons/io5";
import { useState } from "react";
import Link from "next/link";
import axios from "axios";
import { toast } from "react-toastify";
import LoadingSpinner from "@/src/components/reusables/ui/LoadingSpinner";

export default function ContactUsPage() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const contactUs = async (e: any) => {
    e.preventDefault();
      try {
        setIsLoading(true);
        const apiUrl = process.env["NEXT_PUBLIC_DEV_URL"];
  
        const response = await axios.post(`${apiUrl}/contact`, {
          first_name: firstName,
          last_name: lastName,
          email,
          message
        });
  
        if (response.data?.status === "success") {
          toast.success(response.data?.message || "");
        } else {
          toast.error(
            response.data?.errors?.email?.[0] || "Something went wrong."
          );
        }

        setEmail('');
        setFirstName("")
        setLastName("")
        setMessage('')
      } catch (error: any) {
        toast.error(
          error.response.data?.errors?.email?.[0] ||
            "An error occurred. Please try again later."
        );
      } finally {
        setIsLoading(false);
      }
    };

  return (
    <div className="min-h-screen bg-white text-[#1a1a1a] font-inter">
      <header className="flex items-center justify-between md:px-8 px-4 py-4 ">
        <div className="flex items-center gap-2">
            <div className="relative aspect-square h-12 w-12 md:h-16 md:w-16">
              <Image
                src="/images/logo.svg"
                fill
                style={{ objectFit: "contain" }}
                alt="logo"
              />
            </div>
            <Link href="/">
              <div className="text-xl md:text-2xl whitespace-nowrap font-jaini">
                Happy Homes Creators
              </div>
            </Link>
          </div>
        <nav className="space-x-6 text-sm font-medium md:block hidden">
          <a href="#" className="text-gray-500 hover:text-black">
            About us
          </a>
          <Link
            href="/user/contact"
            className="text-[#EF2424] border-b-2 border-[#EF2424] pb-1"
          >
            Contact us
          </Link>
        </nav>
      </header>

      <section className="w-full relative md:px-8 px-4">
        <Image
          src="/images/contact-hero.svg"
          alt="Hero"
          width={1200}
          height={250}
          className="w-full object-cover h-[200px] md:h-[220px]"
        />
        <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
          <p className="text-sm md:text-base text-[#EF2424] bg-white p-2 rounded-[8px] font-medium mb-3">
            WRITE TO US
          </p>
          <h2 className="text-2xl md:text-3xl font-bold text-white">
            Get In Touch
          </h2>
        </div>
      </section>

      <main className="max-w-[1350px] mx-auto px-6 py-8 my-8">
        <div className="flex flex-col md:flex-row gap-12 items-start">
          {/* Form */}
          <div className="flex-[0.6]">
            <h3 className="text-xl font-semibold mb-2">Let's Talk!</h3>
            <p className="mb-6 text-gray-700">
              Get in touch with us using the enquiry form or contact details
              below
            </p>
            <form className="space-y-4 w-full" onSubmit={contactUs}>
              <div className="flex gap-4 w-full md:flex-row flex-col">
                <div className="flex flex-col w-full">
                  <label className="font-[600] mb-2">First Name</label>
                  <input
                    type="text"
                    placeholder="First Name"
                    className="border border-[#D9D9D9] rounded-[8px] px-4 py-2 w-full placeholder:text-gray-500 placeholder:text-sm"
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)}
                  />
                </div>
                <div className="flex flex-col w-full">
                  <label className="font-[600] mb-2">Last Name</label>
                  <input
                    type="text"
                    placeholder="Last Name"
                    className="border border-[#D9D9D9] rounded-[8px] px-4 py-2 w-full placeholder:text-gray-500 placeholder:text-sm"
                    value={lastName}
                    onChange={(e) => setLastName(e.target.value)}
                  />
                </div>
              </div>

              <div className="flex flex-col">
                <label className="font-[600] mb-2">Email Address</label>
                <input
                  type="email"
                  placeholder="Email Address"
                  className="border border-[#D9D9D9] rounded-[8px] px-4 py-2 w-full placeholder:text-gray-500 placeholder:text-sm"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>

              <div className="flex flex-col">
                <label className="font-[600] mb-2">Message</label>
                <textarea
                  placeholder="Type Something..."
                  className="border border-gray-300 rounded px-4 py-2 w-full h-32 resize-none"
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                />
              </div>

              <button
                type="submit"
                className="bg-[#EF2424] text-white cursor-pointer font-medium py-2 px-6 rounded hover:bg-red-600"
              >
                {isLoading ? <LoadingSpinner /> : "Submit" }
              </button>
            </form>
          </div>

          {/* Contact Info */}
          <div className="flex-[0.4] space-y-4">
            <div className="relative w-[440px] h-[372px] hidden md:block">
              <Image
                src="/images/contact.svg"
                alt="Support"
                fill
                className="rounded-[12px]  object-cover absolute"
              />
            </div>

            <div className="text-sm">
              <div className="flex items-center gap-4 my-4">
                <MdEmail
                  className="text-[#EF2424] rounded-[6px] p-1 border border-[#D9D9D9]"
                  size={28}
                />
                <div>
                  <p className="font-semibold">Quick Contact</p>
                  <p className="text-[#767676]">Email: Happyhomemakers@gmail.com</p>
                </div>
              </div>
              <div className="flex items-center gap-4 my-4">
                <FaPhoneAlt
                  className="text-[#EF2424] rounded-[6px] p-1 border border-[#D9D9D9]"
                  size={28}
                />

                <div>
                  <p className="font-semibold">Phone Number</p>
                  <p className="text-[#767676]">08033214565 , 08034065551</p>
                </div>
              </div>
              <div className="flex items-center gap-4 my-4">
                <IoLocationSharp
                  className="text-[#EF2424] rounded-[6px] p-1 border border-[#D9D9D9]"
                  size={28}
                />

                <div>
                  <p className="font-semibold">Headquarters</p>
                  <p className="text-[#767676]">
                    38, Wole Soyinka Way, Saapade, Isara-Remo, Ogun State
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="text-sm text-center py-6 md:mx-10 mx-4 border-t">
        <p className="max-w-4xl mx-auto text-gray-600 leading-5">
          Hello and welcome to HappyHomes Creator! Here you can take your social
          exploration even further by exploring a membership of singles from
          around the world. We bring you far more than just meeting matches
          in your own local area! On Happyhomes.com, you have the chance to find
          love and romance with members from across the world. You can create
          a profile, search for other members who interest you and make contact
          using great dating features. No matter where you are in the world, you
          can get closer to people from a range of cultures.
          <br />
          Can I register free? Yes!
        </p>
        <div className="mt-4 text-black font-semibold">HappyHomes Creator</div>
        <div className="text-gray-500 my-5">
          © {new Date().getFullYear()}. All rights reserved
        </div>
      </footer>
    </div>
  );
}
