"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/Delete.png";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import enums from "@/utils/enums";
import apis from "@/utils/apis";
import { Modal } from "@/components/ui/modal";
import { useGlobalContext } from "@/context/Provider";
import { useDispatch } from "react-redux";
import { cartReset, updateAddress } from "@/store/actions/user/userAction";
import { AppDispatch } from "@/store/store";

const DeleteAccount = () => {
  const { Toast, setUserInfo } = useGlobalContext();
  const dispatch = useDispatch<AppDispatch>();
  const [formData, setFormData] = useState({
    message: "",
  });
  const [reason, setReason] = useState("");
  const [isOpen1, setIsOpen1] = useState(false);
  const [reasonList, setReasonList] = useState<any[]>([]);

  const router = useRouter();

  useEffect(() => {
    const fetchReasons = async () => {
      try {
        const res = await apis.Auth.getReport("type=account_delete&page=1&limit=10");
        setReasonList(res?.data || []);
      } catch (error) {
        Toast.error(error);
      }
    };

    fetchReasons();
  }, []);



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

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    let payload = {
      report_reason_id: reason,
      delete_description: formData?.message,
    };
    try {
      const apiRes = await apis.Auth.deleteAccount(payload);
      if (apiRes) {
        setIsOpen1(false);

        // Clear global state
        setUserInfo && setUserInfo(null);
        dispatch(cartReset());
        dispatch(updateAddress(null));

        // Clear everything
        sessionStorage.clear();
        localStorage.clear();

        // Clear all cookies
        const cookies = document.cookie.split(";");
        for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i];
          const eqPos = cookie.indexOf("=");
          const name = eqPos > -1 ? cookie.substr(0, eqPos).trim() : cookie.trim();
          document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
        }

        router.push("/home");
      }
    } catch (error: any) {
      Toast.error(error);
    }
    setFormData({ message: "" });
  };
  const handleModalOpen = (e: any) => {
    e.preventDefault();
    if (!reason) {
      Toast.error("Select reason first!");
      return;
    }
    if (!formData?.message) {
      Toast.error("Enter message first!");
      return;
    }
    setIsOpen1(true);
  };
  return (
    <div className="w-full h-auto grid grid-cols-1 md:grid-cols-12 gap-4">
      <div className="md:col-span-8  w-full mt-4 mx-auto p-6 px-10">
        <h2 className="text-2xl font-semibold mb-6">Delete account</h2>

        <form onSubmit={handleModalOpen}>
          <div className="space-y-4">
            <div>
              <label className="text-[#828282] mb-4">Reason</label>
              <Select onValueChange={(val: any) => setReason(val)}>
                <SelectTrigger className="w-full text-[#828282] px-4 py-3 rounded-3xl border border-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300">
                  <SelectValue placeholder="Select reason" />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    {reasonList.map((item: any) => (
                      <SelectItem key={item._id} value={item._id}>
                        {item.reason}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>


            </div>

            <div>
              <label className="text-[#828282] mb-4">Message</label>
              <textarea
                name="message"
                value={formData.message}
                onChange={handleChange}
                placeholder="Please explain us in brief..."
                rows={6}
                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300"
                required
                maxLength={220}
              />
            </div>

            <div>
              <button
                type="submit"
                // onClick={handleModalOpen}
                className="w-full py-3 px-4 bg-primary hover:bg-primary text-center text-white font-medium rounded-md transition duration-200"
              >
                Delete account
              </button>
            </div>
          </div>
        </form>
      </div>

      <div className="md:col-span-4 w-full mt-10">
        <Image
          src={Contactus}
          alt={"title"}
          width={450}
          height={450}
          className="object-cover rounded-lg"
        />
      </div>
      <Modal
        isOpen={isOpen1}
        description=""
        onClose={() => setIsOpen1(false)}
        title={"Delete Account"}
      >
        <div className="w-full p-2 flex flex-col items-center">
          <span className="block mt-4 mb-4 text-sm text-gray-500">
            This action is permanent and will remove all your account data.
          </span>
          <div className="flex flex-row gap-4">
            <button
              onClick={() => setIsOpen1(false)}
              // onClick={verifyEmail}
              className="w-full py-3 px-4 bg-red-600 mt-4 hover:bg-red-300 text-center text-white font-medium rounded-md transition duration-200"
            >
              Cancel
            </button>
            <button
              onClick={(e: any) => handleSubmit(e)}
              // onClick={verifyEmail}
              className="w-full py-3 px-4 bg-primary mt-4 hover:bg-primary/90 text-center text-white font-medium rounded-md transition duration-200"
            >
              Submit
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
};

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