import Image from "next/image";
import Link from "next/link";
import { useMediaQuery } from "react-responsive";
import { useMemo, useEffect, useState } from "react";
import { fetchCommunitiesAction } from "@/lib/actions/communityActions";
import { useTranslations } from "next-intl";
import { getImageUrl } from "@/hooks/useImageUrl";
interface Community {
  _id: string;
  title: string;
  description: string;
  date: string;
  time: string;
  location: string;
  image: string;
  type: "event" | "job";
  createdAt: string;
  creator: any;
}

export default function CommunitySection() {
  const [communities, setCommunities] = useState<Community[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const t = useTranslations();
  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 [showAll, setShowAll] = useState(false);

  useEffect(() => {
    const loadCommunities = async () => {
      try {
        setLoading(true);
        const response = await fetchCommunitiesAction({ limit: 20 }, "en");
        if (response.success && response.data) {
          setCommunities(response.data.communities);
        } else {
          setError(response.message || "Failed to fetch communities");
        }
      } catch (err) {
        setError(
          err instanceof Error ? err.message : "Failed to fetch communities",
        );
      } finally {
        setLoading(false);
      }
    };

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

  // const visibleItems = useMemo(() => {
  //   if (showAll) return communities; // show all
  //   return communities.slice(0, initialCount); // show first 5
  // }, [communities, showAll]);

  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 getEventDateTime = (community: any) => {
    const rawDate = community?.createdAt;
    if (!rawDate) return { day: "", month: "", time: "" };

    // Create date in IST explicitly (UTC +5:30)
    const eventDate = new Date(rawDate);
    const istOffset = 5.5 * 60 * 60 * 1000; // +5:30
    const istDate = new Date(eventDate.getTime() + istOffset);

    // Format date parts
    const day = istDate.getDate();
    const month = istDate.toLocaleString("en-US", { month: "short" }); // e.g., Oct
    const time = istDate.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
      hour12: true,
      timeZone: "Asia/Kolkata",
    });

    return { day, month, time };
  };

  function parseDateString(dateStr?: string) {
    if (!dateStr) return { month: "", day: "", year: "" };
    const parts = dateStr.split(" ");
    return {
      month: parts[0] || "",
      day: parts[1]?.replace(",", "") || "",
      year: parts[2] || "",
    };
  }

  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("community_section.latest_in_community")}
          </h2>
          <Link
            href="/community"
            className="text-sm font-semibold text-primary500 hover:underline dark:text-primary400"
          >
            {t("community_section.view_more")}
          </Link>
        </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 rounded-lg overflow-hidden relative animate-pulse"
            >
              <div className="h-[290px] w-full bg-neutrals200 dark:bg-neutrals700"></div>
              <div className="absolute top-3 right-3 z-10 bg-neutrals200 dark:bg-neutrals700 w-16 h-20 rounded-md"></div>
              <div className="absolute h-full bottom-0 left-0 right-0 bg-gradient-to-t from-neutrals200 via-neutrals100 to-transparent dark:from-neutrals700 dark:via-neutrals600 dark:to-transparent px-3 py-2">
                <div className="flex flex-col justify-end h-full">
                  <div className="h-5 bg-neutrals300 dark:bg-neutrals600 rounded w-full mb-1"></div>
                  <div className="h-4 bg-neutrals300 dark:bg-neutrals600 rounded w-20 mb-1"></div>
                  <div className="h-4 bg-neutrals300 dark:bg-neutrals600 rounded w-16"></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  if (error) {
    return null;
  }

  if (communities.length === 0) {
    return null;
  }

  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("community_section.latest_in_community")}
        </h2>
        <Link
          href="/community"
          className="text-sm font-semibold text-primary500 hover:underline dark:text-primary400"
        >
          {t("community_section.view_more")}
        </Link>
      </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">
        {visibleItems.map((community) => {
          // const { time,month,date } = getEventDateTime(community);
          const finalImageUrl = getImageUrl(community?.image);
          const { month, day } = parseDateString(community?.date);

          return (
            <Link key={community?._id} href={`/community/${community?._id}`}>
              <div
                key={community?._id}
                className="flex-shrink-0 rounded-lg overflow-hidden relative"
              >
                <img
                  src={finalImageUrl}
                  alt={community?.title}
                  width={300}
                  height={200}
                  className="h-[290px] w-full object-cover"
                  onError={(e) => {
                    if (!e.currentTarget.src.endsWith("/event.webp")) {
                      e.currentTarget.src = "/event.webp";
                    }
                  }}
                />
                <div className="absolute top-3 right-3 z-10 bg-primary500/50 backdrop-blur-sm text-white px-4 py-3 rounded-md text-center rtl:left-3 rtl:right-auto">
                  <div className="text-sm font-bold leading-tight mb-0.5">
                    {day}
                  </div>
                  <div className="text-xs font-normal uppercase">{month}</div>
                </div>
                <div className="absolute h-full bottom-0 left-0 right-0 bg-gradient-to-t from-primary500/80 via-primary500/30 to-transparent px-3 py-2 text-white text-sm space-y-1">
                  <div className="flex flex-col justify-end h-full">
                    <h4 className="text-base font-semibold leading-tight mb-1 line-clamp-2">
                      {community?.title}
                    </h4>
                    <p className="text-sm mb-1 line-clamp-2">
                      {community?.location ||
                        t("home_page.location_not_specified")}
                    </p>
                    <p className="text-sm">{community?.time} IST</p>
                  </div>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </>
  );
}