"use client";

import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { fetchJobsAction, getJob } from "@/lib/actions/jobActions";
import { getCategory, showPost } from "@/lib/actions/productCategoryAction";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { getStoredLocale } from "@/lib/getLocale";
import { toast } from "react-toastify";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useTranslations } from "next-intl";
import { transformCategoryData } from "@/lib/formTypes";
import DataNotFound from "@/components/common/DataNotFound";

interface JobDetail {
  _id: string;
  jobTitle: string;
  jobDescription: string;
  employmentType: string;
  salary: string;
  location: string;
  cityOrState?: string;
  contactNumber: string;
  createdAt: string;
  creator?: any;
}

const translation: Record<string, string> = {};

export default function JobDetailPage() {
  const params = useParams(); // { id: 'job-id' }
  const { user } = useAppSelector((state) => state.auth);
  const locale = getStoredLocale();
  const postId = Array.isArray(params.id) ? params.id[0] : params.id;
  const [job, setJob] = useState<any | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [post, setPost] = useState<any>([]);
  const [initialData, setInitialData] = useState<[]>([]);
  const dispatch = useAppDispatch();
  const router = useRouter();
  const t = useTranslations();
  // Fetch job from fetchJobsAction
  useEffect(() => {
    const loadJob = async () => {
      try {
        setLoading(true);

        const response = await getJob({
          jobId: params.id as string,
        });

        if (response?.success) {
          const jobData = response?.data?.job;
          const createdBy = response?.data?.createdBy;

          const finalData = transformCategoryData(jobData);

          (finalData as any).creator = createdBy;

          setJob([finalData]);
        }
      } catch (err) {
        setError(t("failed_to_fetch_job_service"));
      } finally {
        setLoading(false);
      }
    };

    loadJob();
  }, [postId]);

  useEffect(() => {
    if (!user?.token) return;
    const fetchCategory = async () => {
      try {
        const response = await getCategory(user?.token);
        if (response.success && Array.isArray(response?.data)) {
          setInitialData(response?.data);
        }
      } catch (error: any) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
        toast.error(
          error?.response?.data?.message || t("validation.error_msg")
        );
      }
    };
    fetchCategory();
  }, [user?.token]);
  const [mainCategory, setMainCategory] = useState<string>("");
  function buildNestedChildMap(mainArray: any, selectedIds: any) {
    const result = {};
    let currentLevel = mainArray.find(
      (item: any) => item.id === selectedIds[0]
    );

    for (let i = 1; i < selectedIds.length; i++) {
      if (!currentLevel || !currentLevel.children) break;

      const child = currentLevel.children.find(
        (child: any) => child.id === selectedIds[i]
      );

      if (child) {
        (result as any)[`Category ${i}`] = child.title;
        currentLevel = child;
      } else {
        break;
      }
    }

    return result;
  }

  if (loading) {
    return (
      <div className="px-6">
        <div className="max-w-w1660 mx-auto relative">
          <div className="pt-3 pb-4 animate-pulse">
            <div className="border border-neutrals100 rounded-lg overflow-hidden bg-white dark:bg-card dark:border-card">
              {/* LEFT LOGO SKELETON */}
              <div className="flex items-center justify-center bg-primary50 dark:bg-primary700">
                <div className="w-full h-96 max-lg:h-72 max-md:h-60 max-md:mt-0 bg-gray-200 rounded-full dark:bg-gray-700" />
              </div>

              {/* RIGHT DETAILS SKELETON */}
              <div className="space-y-6">
                <div className="h-6 bg-gray-200 rounded dark:bg-gray-700 w-1/2" />

                <div className="grid grid-cols-2 gap-y-4 gap-x-6 max-w-3xl max-sm:gap-y-3 max-[360px]:flex max-[360px]:flex-col">
                  {Array.from({ length: 6 }).map((_, i) => (
                    <div
                      key={i}
                      className="h-4 bg-gray-200 rounded dark:bg-gray-700"
                    />
                  ))}
                </div>

                <div className="space-y-2">
                  <div className="h-5 bg-gray-200 rounded dark:bg-gray-700 w-1/3" />
                  <div className="h-20 bg-gray-200 rounded dark:bg-gray-700" />
                </div>

                <div className="h-5 bg-gray-200 rounded dark:bg-gray-700 w-1/3" />

                <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5 pl-2.5 mt-2.5">
                  {Array.from({ length: 4 }).map((_, i) => (
                    <div
                      key={i}
                      className="h-12 bg-gray-200 rounded dark:bg-gray-700"
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (error) return <p>{error}</p>;
  if (!job) return <DataNotFound/>;

  return (
    <div className="px-6">
      <div className="max-w-w1660 mx-auto relative">
        <div className="pt-3 pb-4">
          {job.length > 0 ? (
            job.map((ser: any, index: number) => (
              <div
                key={index}
                className="border border-neutrals100 rounded-lg overflow-hidden bg-white dark:bg-card dark:border-card"
              >
                {/* Left Side: Image or Initial */}
                <div className="flex justify-center items-center bg-primary50 dark:bg-primary700 min-h-60">
                  {ser.image ? (
                    <img
                      src={ser.image}
                      alt={ser.title}
                      onError={(e) => {
                        e.currentTarget.onerror = null;
                        e.currentTarget.src = "/default.jpg";
                      }}
                      className="w-full h-96 border-4 rounded-xl border-white dark:border-neutrals400/20 object-cover m-2 max-lg:h-72 max-md:h-60 max-md:mt-0"
                    />
                  ) : (
                    <p className="text-8xl font-bold text-primary500 dark:text-white">
                      Kanzy
                    </p>
                  )}
                </div>

                {/* Right Side: Details */}
                <div className="pt-3 p-4 px-5 max-sm:p-3 max-sm:px-3">
                  <h1 className="text-2xl font-bold mb-2 text-neutrals800 dark:text-white">
                    {ser.title}
                  </h1>
                  {ser.short_description && (
                    <p className="text-sm mb-6 text-neutrals600 dark:text-neutrals400">
                      {ser.short_description}
                    </p>
                  )}

                  {/* Other Details */}
                  {ser?.additional_attributes?.length > 0 && (
                    <div className="mt-4">
                      <h2 className="text-lg font-semibold mb-4 text-neutrals800 dark:text-white">
                        {t("detail_page.other_details")}
                      </h2>

                      <div className="grid grid-cols-2 gap-y-4 gap-x-6 max-w-3xl max-sm:gap-y-3 max-[360px]:flex max-[360px]:flex-col">
                        {ser.additional_attributes.map((attr: any) => {
                          const isImageType =
                            attr.type?.includes("image") &&
                            !attr.isFileUploader;
                          const isVideoType =
                            attr.type?.includes("video") &&
                            !attr.isFileUploader;
                          const isFileUploader = !!attr.isFileUploader;

                          return (
                            <div
                              key={attr.field}
                              className={
                                isImageType || isFileUploader
                                  ? "col-span-2"
                                  : ""
                              }
                            >
                              <span className="text-neutrals600 text-sm dark:text-neutrals400 block mb-1">
                                {attr.label?.en}:
                              </span>

                              {isFileUploader && Array.isArray(attr.files) && (
                                <div className="flex flex-wrap gap-2 mt-2">
                                  {attr.files.map(
                                    (file: string, idx: number) => (
                                      <img
                                        key={idx}
                                        src={file}
                                        alt={`${attr.label?.en || "file"} ${
                                          idx + 1
                                        }`}
                                        className="w-16 h-16 object-cover rounded border"
                                        onError={(e) => {
                                          e.currentTarget.src =
                                            "/default-image.png";
                                        }}
                                      />
                                    )
                                  )}
                                </div>
                              )}

                              {isImageType &&
                                attr?.processedValue?.selectedOptions?.length >
                                  0 && (
                                  <div className="flex flex-wrap gap-3 mt-2">
                                    {attr?.processedValue?.selectedOptions.map(
                                      (option: any, idx: number) => (
                                        <div
                                          key={idx}
                                          className="flex flex-col items-center text-center"
                                        >
                                          <img
                                            src={option.meta?.fileUrl_en}
                                            alt={option.value?.en}
                                            className="w-16 h-16 object-cover rounded border"
                                            onError={(e) => {
                                              e.currentTarget.onerror = null;
                                              e.currentTarget.src =
                                                "/default.jpg";
                                            }}
                                          />
                                          <span className="text-xs mt-1 text-neutrals600 dark:text-neutrals400">
                                            {option.value?.en}
                                          </span>
                                        </div>
                                      )
                                    )}
                                  </div>
                                )}

                              {isVideoType && attr?.files?.length > 0 && (
                                <div className="flex flex-wrap gap-3 mt-2">
                                  {attr?.files.map(
                                    (option: any, idx: number) => (
                                      <div
                                        key={idx}
                                        className="p-2 bg-gray-100 rounded-xl flex flex-col items-center text-center dark:bg-neutrals400/20"
                                      >
                                        <video
                                          className="w-40 h-full max-h-40"
                                          src={`${process.env.NEXT_PUBLIC_API}${option.location}`}
                                          controls
                                        />
                                      </div>
                                    )
                                  )}
                                </div>
                              )}

                              {!isFileUploader &&
                                !isImageType &&
                                !Array.isArray(attr.value) && (
                                  <strong className="text-neutrals800 font-semibold dark:text-neutrals300 block max-sm:text-sm">
                                    {typeof attr.value === "object" &&
                                    attr.value !== null
                                      ? attr.value.displayValue ||
                                        attr.value.value ||
                                        "-"
                                      : attr.value || ""}
                                  </strong>
                                )}

                              {Array.isArray(attr.value) && !isFileUploader && (
                                <div className="flex flex-wrap gap-1 mt-1">
                                  {attr.value.map((val: any, idx: number) => {
                                    // Handle objects with 'value' property (like country/state/city)
                                    if (
                                      typeof val === "object" &&
                                      val !== null &&
                                      "value" in val
                                    ) {
                                      return (
                                        <strong
                                          key={idx}
                                          className="text-xs mt-1 text-neutrals600 dark:text-neutrals400"
                                        >
                                          {val.value}
                                        </strong>
                                      );
                                    }
                                    // Handle plain strings/numbers
                                    return (
                                      <strong
                                        key={idx}
                                        className="text-xs mt-1 text-neutrals600 dark:text-neutrals400"
                                      >
                                        {val}
                                      </strong>
                                    );
                                  })}
                                </div>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  )}

                  {/* Service Description */}
                  {ser?.description && (
                    <div className="mt-6 text-neutrals800 dark:text-neutrals400">
                      <h2 className="text-lg font-semibold">
                        {t("detail_page.job_desc")}:
                      </h2>
                      <div
                        className="text-sm leading-relaxed"
                        dangerouslySetInnerHTML={{ __html: ser.description }}
                      />
                    </div>
                  )}
                </div>
              </div>
            ))
          ) : (
            <DataNotFound />
          )}
        </div>
      </div>
    </div>
  );
}