import React, { useEffect, useState, useCallback } from 'react';
import NextImage from 'next/image';
import Link from 'next/link';
import { createSlug } from '@/core/utils/slug';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import {
  fetchCategoryManagementSolr,
  fetchCategoryManagementVersion,
} from '../api/categoryManagementApi';

const saveToLocalStorage = (key, data, version, expiryInHours) => {
  const now = new Date();
  const item = {
    value: data,
    version: version,
    expiry: now.getTime() + expiryInHours * 60 * 60 * 1000,
  };
  localStorage.setItem(key, JSON.stringify(item));
};

const getFromLocalStorage = (key) => {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;

  const item = JSON.parse(itemStr);
  const now = new Date();

  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }

  return item;
};

const isExpired = (expiry) => {
  const now = new Date();
  return now.getTime() > expiry;
};

const CategoryDynamicMobile = () => {
  const [selectedCategory, setSelectedCategory] = useState({});
  const [categoryManagement, setCategoryManagement] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const loadCategoryManagement = useCallback(async () => {
    const cachedData = getFromLocalStorage('homepage_categoryDynamic'); // nama key namaPage_namaKomopnen
    const cachedVersion = cachedData?.version;
    // apakah data sudah kadaluarsa
    const dataExpired = cachedData ? isExpired(cachedData.expiry) : true;

    if (cachedData && !dataExpired) {
      setCategoryManagement(cachedData.value);
    } else {
      // Jika kadaluarsa, cek versi terbaru dari API
      const latestVersion = await fetchCategoryManagementVersion();

      if (cachedData && cachedData.version === latestVersion) {
        // Jika versinya sama, reset expiry
        saveToLocalStorage(
          'homepage_categoryDynamic',
          cachedData.value,
          latestVersion,
          24
        );
        setCategoryManagement(cachedData.value);
      } else {
        // Jika versinya beda, lakukan fetch data baru
        setIsLoading(true);
        const items = await fetchCategoryManagementSolr();
        setIsLoading(false);

        // Simpan data baru
        saveToLocalStorage(
          'homepage_categoryDynamic',
          items,
          latestVersion,
          24
        );
        setCategoryManagement(items);
      }
    }
  }, []);

  useEffect(() => {
    loadCategoryManagement();
  }, [loadCategoryManagement]);

  useEffect(() => {
    if (categoryManagement?.length > 0) {
      const initialSelections = categoryManagement.reduce((acc, category) => {
        if (category.categories.length > 0) {
          acc[category.id] = category.categories[0].id_level_2;
        }
        return acc;
      }, {});
      setSelectedCategory(initialSelections);
    }
  }, [categoryManagement]);

  const handleCategoryLevel2Click = (categoryId, idLevel2) => {
    setSelectedCategory((prev) => ({
      ...prev,
      [categoryId]: idLevel2,
    }));
  };

  return (
    <div className='p-4'>
      {categoryManagement &&
        categoryManagement?.map((category) => (
          <div key={category.id}>
            <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
              <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
                {category.name}
              </h1>
              <Link
                href={createSlug(
                  '/shop/category/',
                  category?.name,
                  category?.category_id
                )}
                className='!text-red-500 font-semibold text-sm'
              >
                Lihat Semua
              </Link>
            </div>
            <Swiper slidesPerView={2.3} spaceBetween={10}>
              {category.categories.map((index) => (
                <SwiperSlide key={index.id}>
                  <div
                    onClick={() =>
                      handleCategoryLevel2Click(category.id, index?.id_level_2)
                    }
                    className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${
                      selectedCategory[category.id] === index?.id_level_2
                        ? 'bg-red-50 border-red-500 text-red-500'
                        : 'border-gray-200 text-gray-900'
                    }`}
                  >
                    <div className='p-1 flex justify-start items-center'>
                      <div className='flex flex-row justify-center items-center'>
                        <NextImage
                          src={
                            index.image ? index.image : '/images/noimage.jpeg'
                          }
                          alt={index.name}
                          width={30}
                          height={30}
                          className=''
                        />
                        <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
                          <h2 className='font-semibold text-[10px] line-clamp-1'>
                            {index?.name}
                          </h2>
                        </div>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
            <div className='p-3 mt-2 border'>
              <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
                {category.categories.map(
                  (index) =>
                    selectedCategory[category.id] === index?.id_level_2 &&
                    index?.child_frontend_id_i.map((x) => (
                      <div key={x.id}>
                        <Link
                          href={createSlug(
                            '/shop/category/',
                            x?.name,
                            x?.id_level_3
                          )}
                          className='flex flex-row gap-1 border rounded group hover:border-red-500'
                        >
                          <NextImage
                            src={x.image ? x.image : '/images/noimage.jpeg'}
                            alt={x.name}
                            width={40}
                            height={40}
                            className='p-2'
                          />
                          <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
                            <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
                              {x?.name}
                            </h3>
                          </div>
                        </Link>
                      </div>
                    ))
                )}
              </div>
            </div>
          </div>
        ))}
    </div>
  );
};

export default CategoryDynamicMobile;