"use client";

import { useParams } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { fetchCommunitiesAction, getCommunity } from "@/lib/actions/communityActions";
import { useAppSelector } from "@/app/store/hooks";
import { showPost } from "@/lib/actions/productCategoryAction";
import { getStoredLocale } from "@/lib/getLocale";
import { Link } from "lucide-react";
import { useTranslations } from "next-intl";
import { transformCategoryData } from "@/lib/formTypes";

interface CommunityDetail {
  _id: string;
  title: string;
  description: string;
  type: string;
  salary: string;
  time: string;
  cityOrState: string;
  date: String;
  location: string;
  createdAt: string;
  creator: any;
  image?: string; // image filename or path
}
interface CommunityAttribute {
  slug: string;
  key?: {
    attributeId?: {
      label?: {
        en?: string;
        ar?: string;
      };
    };
  };
  value?: any;
}



export default function CommunityDetailPage() {
  const t = useTranslations();
  const params = useParams();
  const [community, setCommunity] = useState<any | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { user } = useAppSelector((state) => state.auth);
  const [communityAttribute, setCommunityAttribute] = useState<
    CommunityAttribute[]
  >([]);
  const IMAGE_BASE_URL = process.env.NEXT_PUBLIC_IMAGE_BASE_URL;
  const communityId = Array.isArray(params.id) ? params.id[0] : params.id;
  const locale = getStoredLocale();






  useEffect(() => {
    const loadCommunity = async () => {
      try {
        setLoading(true);
        const response = await getCommunity({
          communityId: communityId as string
        })

        if (response?.success) {
          const communityData = response?.data?.community;
          const createdBy = response?.data?.createdBy;


          const finalData = transformCategoryData(communityData);

          (finalData as any).creator = createdBy;
          setCommunity([finalData]);
        }
      } catch (err) {
        // console.error(err);
        setError(t("failed_to_fetch_community"));
      } finally {
        setLoading(false);
      }
    };

    loadCommunity();
  }, [params.id]);
  
  const isDesktop = typeof window !== "undefined" && window.innerWidth >= 1280;
  const isLaptop = typeof window !== "undefined" && window.innerWidth >= 1024;
  const isTabletPro =
    typeof window !== "undefined" &&
    window.innerWidth >= 768 &&
    window.innerWidth < 1024;
  const isTablet =
    typeof window !== "undefined" &&
    window.innerWidth >= 640 &&
    window.innerWidth < 768;

  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]);

  // ---- SKELETON LOADING ----
  if (loading) {
    return (
      <div className="px-6">
        <div className="max-w-w1660 mx-auto relative">
          <div className="pt-3 pb-4">
            <div className="border border-neutrals100 rounded-lg overflow-hidden bg-white dark:bg-card dark:border-card animate-pulse">
              <div className="flex justify-center items-center bg-neutrals200 dark:bg-neutrals700">
                <div className="w-full h-[400px] bg-neutrals300 dark:bg-neutrals600 rounded-lg" />
              </div>
              <div className="space-y-6">
                {/* <div className="h-8 w-2/3 bg-neutrals300 dark:bg-neutrals600 rounded" /> */}
                <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(5)].map((_, i) => (
                    <div key={i} className="space-y-2">
                      <div className="h-4 w-20 bg-neutrals300 dark:bg-neutrals600 rounded" />
                      <div className="h-5 w-32 bg-neutrals300 dark:bg-neutrals600 rounded" />
                    </div>
                  ))}
                </div>
                <div className="space-y-3">
                  <div className="h-5 w-32 bg-neutrals300 dark:bg-neutrals600 rounded" />
                  <div className="h-4 w-full bg-neutrals300 dark:bg-neutrals600 rounded" />
                  <div className="h-4 w-11/12 bg-neutrals300 dark:bg-neutrals600 rounded" />
                  <div className="h-4 w-10/12 bg-neutrals300 dark:bg-neutrals600 rounded" />
                </div>
                <div className="pt-4 space-y-4">
                  <div className="h-6 w-40 bg-neutrals300 dark:bg-neutrals600 rounded" />
                  <div className="grid grid-cols-2 gap-4">
                    {[...Array(4)].map((_, i) => (
                      <div key={i} className="space-y-2">
                        <div className="h-4 w-24 bg-neutrals300 dark:bg-neutrals600 rounded" />
                        <div className="h-5 w-32 bg-neutrals300 dark:bg-neutrals600 rounded" />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // if (error) return <p>{error}</p>;
  if (!community) return null;

  return (
    <div className="px-6">
      <div className="max-w-w1660 mx-auto relative">
        <div className="pt-3 pb-4">
          {community.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">
                {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"
                  />
                ) : (
                  <div className="w-32 h-32 rounded-full bg-gray-300 flex items-center justify-center text-4xl font-bold text-white mb-4">
                    {ser?.creator?.first_name?.charAt(0)}
                  </div>
                )}
              </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-semibold 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 font-normal dark:text-neutrals400 block mb-0.5">
                              {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.onerror = null;
                                      e.currentTarget.src = "/default.jpg";
                                    }}
                                  />
                                ))}
                              </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-sm mt-1 text-neutrals600 dark:text-neutrals400 capitalize">
                                          {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-base font-semibold mb-0.5">
                      {t("detail_page.community_desc")}:
                    </h2>
                    <div
                      className="text-sm leading-relaxed"
                      dangerouslySetInnerHTML={{ __html: ser.description }}
                    />
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}