import Link from "next/link";
import { IoLocationOutline } from "react-icons/io5";
import { useMediaQuery } from "react-responsive";
import { useMemo, useEffect, useState } from "react";
import { fetchJobsAction } from "@/lib/actions/jobActions";
import { useFormatDateTime } from "@/lib/utils/dateTimeUtils";
import { useTranslations } from "next-intl";
import { getStoredLocale } from "@/lib/getLocale";

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

export default function PostAvailabilitySection() {
  const [jobs, setJobs] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showAll, setShowAll] = useState(false); // ✅ new state for view more/less
  const locale = getStoredLocale();
  const t = useTranslations();
  const { formatDateTime } = useFormatDateTime();

  useEffect(() => {
    const loadJobs = async () => {
      try {
        setLoading(true);
        const response = await fetchJobsAction({ limit: 6 }, locale);
        if (response.success && response.data?.jobs) {
          setJobs(response.data.jobs);
        } else {
          setError(response.message || t("failed_to_load_jobs"));
        }
      } catch (err) {
        setError(t("failed_to_load_jobs"));
      } finally {
        setLoading(false);
      }
    };

    loadJobs();
  }, []);

  const isDesktop = useMediaQuery({ minWidth: 1536 });
  const isLaptop = useMediaQuery({ minWidth: 1280, maxWidth: 1535 });
  const isTabletPro = useMediaQuery({ minWidth: 992, maxWidth: 1279 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 });

  const initialCount = 6; // initially show 5 items
  // const visibleItems = useMemo(() => {
  //   if (isDesktop) return jobs.slice(0, 6);
  //   if (isLaptop) return jobs.slice(0, 5);
  //   if (isTabletPro) return jobs.slice(0, 3);
  //   if (isTablet) return jobs.slice(0, 3);
  //   return jobs.slice(0, 2); // mobile
  // }, [jobs, isDesktop, isLaptop, isTabletPro, isTablet]);

  // const skeletonCount = useMemo(() => {
  //   if (isDesktop) return 6;
  //   if (isLaptop) return 5;
  //   if (isTabletPro) return 3;
  //   if (isTablet) return 3;
  //   return 2; // mobile
  // }, [isDesktop, isLaptop, isTabletPro, isTablet]);
  const visibleItems = useMemo(() => {
    if (showAll) return jobs; // show all when toggled
    return jobs.slice(0, initialCount);
  }, [jobs, showAll]);

  const skeletonCount = useMemo(
    () => (showAll ? jobs.length : initialCount),
    [jobs, showAll]
  );
 
  if (loading) {
    return (
      <>
        <div className="flex justify-between items-center border-b border-neutrals100 pb-2.5 mb-5 dark:border-darkborder max-md:mb-4">
          <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
            {t("post_availability_section.post_availability")}
          </h2>
          <span className="text-sm font-semibold text-primary500 dark:text-primary400">
            {t("post_availability_section.view_more")}
          </span>
        </div>
        <div className="grid md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-5 max-md:grid-cols-2 max-[500px]:grid-cols-1">
          {[...Array(skeletonCount)].map((_, index) => (
            <div
              key={index}
              className="flex-shrink-0 overflow-hidden relative border border-neutrals100 rounded-lg bg-white dark:bg-card dark:border-card animate-pulse"
            >
              <div className="p-4 pb-4">
                <div className="flex justify-between items-center mb-5">
                  <div className="h-6 bg-neutrals200 rounded w-16 dark:bg-neutrals700"></div>
                  <div className="h-6 bg-neutrals200 rounded w-20 dark:bg-neutrals700"></div>
                </div>
                <div className="h-5 bg-neutrals200 rounded w-full mb-1 dark:bg-neutrals700"></div>
                <div className="h-4 bg-neutrals200 rounded w-24 dark:bg-neutrals700"></div>
              </div>
              <div className="flex items-center justify-between bg-neutrals50 text-xs py-2 px-4 text-neutrals500 dark:bg-cardfooter">
                <div className="flex items-center gap-1">
                  <div className="w-4 h-4 bg-neutrals200 rounded dark:bg-neutrals700"></div>
                  <div className="h-4 bg-neutrals200 rounded w-16 dark:bg-neutrals700"></div>
                </div>
                <div className="h-4 bg-neutrals200 rounded w-20 dark:bg-neutrals700"></div>
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  if (error || jobs.length === 0) return null;
  // const showButton = jobs.length > initialCount;
  return (
    <>
      <div className="flex justify-between items-center border-b border-neutrals100 pb-2.5 mb-5 dark:border-darkborder max-md:mb-4">
        <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
          {t("post_availability_section.post_availability")}
        </h2>
        {/* {showButton && ( */}
        <Link
          href="/jobs"
          className="text-sm font-semibold text-primary500 hover:underline dark:text-primary400"
        >
          {t("post_availability_section.view_more")}
        </Link>
        {/* <button
          className="text-sm font-semibold text-primary500 hover:underline dark:text-primary400"
          onClick={() => setShowAll(!showAll)}
        >
          {showAll ? "View Less" : t("post_availability_section.view_more")}
        </button> */}
        {/* )} */}
      </div>
      <div className="grid md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-5 max-md:grid-cols-2 max-[500px]:grid-cols-1">
      {/* <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5"> */}
        {visibleItems.map((job) => {
          return (
            <Link href={`/jobs/${job?.id}`} key={job.id}>
              <div className="flex-shrink-0 overflow-hidden relative border border-neutrals100 rounded-lg bg-white dark:bg-card dark:border-card">
                <div className="p-4 pb-4">
                  <div className="flex justify-between items-center mb-5">
                    <p className="text-xl font-bold text-primary500 dark:text-white">
                      Kanzy
                    </p>
                    <span
                      className="text-sm px-2.5 py-1 rounded-md bg-kzblue50 text-primary500 font-normal dark:bg-background dark:text-neutrals400 max-w-[100px] line-clamp-1"
                      title={job?.employmentType}
                    >
                      {job?.employmentType}
                    </span>
                  </div>
                  <p className="text-base font-semibold text-neutrals900 leading-tight mb-1 dark:text-neutrals400">
                    {job?.title}
                  </p>
                  <div
                    className="text-sm text-neutrals500 line-clamp-2"
                    dangerouslySetInnerHTML={{
                      __html: job?.description,
                    }}
                  />
                  <div className="pt-0 p-4 mt-4 pl-0 pb-0">
                    <span className="text-xs font-medium px-2.5 py-1 rounded-sm bg-green-200 -ml-5 text-green-700 dark:bg-green-800 dark:text-neutrals100">
                      {job?.hiringOrJobHunting === "Looking for a Job"
                        ? "Requirement Post"
                        : job?.hiringOrJobHunting === "Hiring"
                        ? "Vacancy Post"
                        : "Kanzy"}
                    </span>
                  </div>
                </div>
                <div className="flex items-center justify-between bg-neutrals50 text-xs py-2 px-4 text-neutrals500 dark:bg-cardfooter">
                  <div className="flex items-center gap-1">
                    <IoLocationOutline className=" text-neutrals800 w-4 h-4 dark:text-neutrals400" />
                    <span className="text-sm text-neutrals800 dark:text-neutrals400">
                      {job?.cityOrState}
                    </span>
                  </div>
                  <span className="text-sm text-neutrals800 dark:text-neutrals400">
                    {formatDateTime(job?.createdAt)}
                  </span>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </>
  );
}