"use client";
import React, { useEffect, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useRouter } from "next/navigation";
import Image from "next/image";
import Contactus from "@/assets/images/ContactUs.png";
import apis from "@/utils/apis";
import { useGlobalContext } from "@/context/Provider";

const Contact = () => {
  const { Toast,userInfo } = useGlobalContext();

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  }) as any;

  useEffect(() => {
    if(userInfo){
      setFormData({name:userInfo?.name , email:userInfo?.email})
    }
  }, [userInfo])
  

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

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!formData.email || !emailRegex.test(formData.email)) {
      Toast.error("Enter a valid email!");
      return;
    }
    try {
      const apiRes= await apis.contact.add(formData);
      Toast.success("Message sent successfully");
      setFormData({ name: "", email: "", subject: "", message: "" });
    } catch (error) {
      
    }
  };
  return (
    <div className="w-full h-auto grid grid-cols-1 md:grid-cols-12 gap-4 px-4 md:px-10 py-6">
      <div className="md:col-span-8 w-full">
        <h2 className="text-2xl font-semibold mb-6">Contact Us</h2>

        <form onSubmit={handleSubmit}>
          <div className="space-y-4">
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
              placeholder="Name"
              className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300"
              required
              maxLength={15}
            />

            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              placeholder="Email"
              className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300"
              required
            />

            <input
              type="text"
              name="subject"
              value={formData.subject}
              onChange={handleChange}
              placeholder="Subject"
              className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300"
              required
              maxLength={40}
            />

            <textarea
              name="message"
              value={formData.message}
              onChange={handleChange}
              placeholder="Write your message here..."
              rows={6}
              className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300"
              required
              maxLength={225}
            />

            <button
              type="submit"
              className="w-full py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition duration-200"
            >
              Submit
            </button>
          </div>
        </form>
      </div>

      <div className="md:col-span-4 w-full flex justify-center md:justify-end mt-10 md:mt-0">
        <Image
          src={Contactus}
          alt="Contact Us Illustration"
          width={350}
          height={350}
          className="object-contain rounded-lg"
        />
      </div>
    </div>
  );
};

export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <Contact />
    </DashboardLayout>
  );
}