'use client';
import React, { useState, useEffect } from 'react';
import Container from '@/components/ui/pages/dashboard/common/Container';
import Breadcrumb from '@/components/ui/pages/dashboard/Breadcrumb';
import { useSidebar } from '@/components/contexts/SidebarContext';
import {
  BiFilter,
  BiHomeSmile,
  BiRightArrowAlt,
  BiLoaderAlt,
} from 'react-icons/bi';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import Link from 'next/link';
import {
  useGetSessionYears,
  useGetGallery,
  useGetSchoolSettings,
} from '@/lib/api/student/queryHooks';
import { Gallery, SessionYear } from '@/lib/api/student/functions';
import { useTranslate } from '@/components/hooks/useTranslate';
import { getGallery } from '@/lib/api/student/functions';
import { useRouter } from 'next/navigation';

export default function GalleryPage() {
  const translate = useTranslate();
  const { collapsed } = useSidebar();
  const router = useRouter();

  // Fetch school settings to check for feature access
  const { data: schoolSettings, isLoading: isLoadingSettings } =
    useGetSchoolSettings();

  // Check feature permission and redirect if disabled
  useEffect(() => {
    // Skip check while loading
    if (isLoadingSettings || !schoolSettings?.data) return;

    const enabledFeatures = schoolSettings.data.features || {};

    const isFeatureEnabled = (featureName: string) => {
      if (!enabledFeatures || Object.keys(enabledFeatures).length === 0) {
        return false;
      }
      return Object.values(enabledFeatures).some(
        (feature) =>
          typeof feature === 'string' &&
          feature.toLowerCase() === featureName.toLowerCase(),
      );
    };

    if (!isFeatureEnabled('School Gallery Management')) {
      router.push('/student/dashboard');
    }
  }, [schoolSettings, isLoadingSettings, router]);
  const [selectedSessionYearId, setSelectedSessionYearId] = useState<
    number | null
  >(null);

  // Pagination state - initial offset is 0 and limit is 5
  const [offset, setOffset] = useState(0);
  const [limit] = useState(8);
  const [allGalleries, setAllGalleries] = useState<Gallery[]>([]);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  // Fetch session years from API
  const { data: sessionYearsData, isLoading: sessionYearsLoading } =
    useGetSessionYears();

  // Fetch initial gallery data based on selected session year
  // Only use query hook for initial load (offset=0) to avoid unnecessary refetches
  const {
    data: galleryData,
    isLoading: galleryLoading,
    error: galleryError,
  } = useGetGallery(selectedSessionYearId || 0, offset, limit);

  // Set default session year when data loads
  useEffect(() => {
    if (
      !selectedSessionYearId &&
      sessionYearsData?.data &&
      sessionYearsData.data.length > 0
    ) {
      // Find the year with default === 1
      const defaultYear = sessionYearsData.data.find(
        (year: SessionYear) => year.default === 1,
      );
      // If default year exists, use its ID, otherwise use the ID of the first year
      const idToUse = defaultYear
        ? defaultYear.id
        : sessionYearsData.data[0].id;

      console.log('Setting default session year ID:', idToUse);
      setSelectedSessionYearId(idToUse);
    }
  }, [sessionYearsData, selectedSessionYearId]);

  // Reset galleries and pagination when session year changes
  useEffect(() => {
    if (selectedSessionYearId) {
      setAllGalleries([]);
      setOffset(0);
      setHasMore(true);
    }
  }, [selectedSessionYearId]);

  // Accumulate gallery data when new data is fetched from query hook
  // This only handles the initial load (offset=0)
  useEffect(() => {
    if (galleryData?.data && offset === 0) {
      // First load - replace all galleries
      setAllGalleries(galleryData.data);
      // Check if there are more items to load
      // If returned data is less than limit, we've reached the end
      setHasMore(galleryData.data.length === limit);
      setIsLoadingMore(false);
    }
  }, [galleryData, offset, limit]);

  // Handle Load More button click
  const handleLoadMore = async () => {
    if (!selectedSessionYearId || isLoadingMore || !hasMore) return;

    setIsLoadingMore(true);
    const newOffset = offset + limit;

    try {
      const response = await getGallery(
        selectedSessionYearId,
        newOffset,
        limit,
      );
      if (response.data) {
        if (response.data.length > 0) {
          setAllGalleries((prev) => [...prev, ...response.data]);
          setOffset(newOffset);
          // If returned data is less than limit, we've reached the end
          setHasMore(response.data.length === limit);
        } else {
          setHasMore(false);
        }
      } else {
        setHasMore(false);
      }
    } catch (error) {
      console.error('Error loading more galleries:', error);
      setHasMore(false);
    } finally {
      setIsLoadingMore(false);
    }
  };

  const breadcrumbItems = [
    {
      label: translate('home'),
      href: '/student/dashboard',
      icon: <BiHomeSmile className="w-5 h-5" />,
    },
    {
      label: translate('gallery'),
    },
  ];

  // Handle session year selection
  const handleSessionYearChange = (sessionYearId: string) => {
    const parsedId = parseInt(sessionYearId);
    if (!isNaN(parsedId)) {
      setSelectedSessionYearId(parsedId);
      // Reset pagination when session year changes
      setOffset(0);
      setAllGalleries([]);
      setHasMore(true);
    }
  };

  // Generate color palette for gallery items
  const colorPalette = [
    '#FFB74D',
    '#FF6B9D',
    '#FFA726',
    '#AB47BC',
    '#66BB6A',
    '#EF5350',
    '#42A5F5',
    '#8D6E63',
  ];

  // Get color for gallery item based on ID
  const getGalleryItemColor = (id: number) => {
    return colorPalette[id % colorPalette.length];
  };

  return (
    <Container collapsed={collapsed}>
      <Breadcrumb title={translate('gallery')} items={breadcrumbItems} />

      <div className="bg-white rounded-[12px] border border-gray-200 p-4">
        {/* Session Year Dropdown */}
        <div className="flex justify-end mb-4 items-center gap-2">
          {/* Filter Icon */}
          <BiFilter className="w-4 h-4 text-gray-600" />

          <span className="text-sm text-gray-900 font-normal">
            {translate('sessionYear')}
          </span>

          <div className="flex items-center gap-2 bg-white rounded-[6px] border border-gray-300 px-3 py-2">
            <Select
              value={selectedSessionYearId?.toString() || ''}
              onValueChange={handleSessionYearChange}
              disabled={sessionYearsLoading}
            >
              <SelectTrigger className="w-auto h-auto border-none shadow-none focus:ring-0 text-sm font-normal p-0 gap-1">
                <SelectValue
                  placeholder={
                    sessionYearsLoading
                      ? translate('loading')
                      : translate('selectYear')
                  }
                />
              </SelectTrigger>
              <SelectContent>
                {(() => {
                  if (
                    sessionYearsData?.data &&
                    sessionYearsData.data.length > 0
                  ) {
                    // console.log(
                    //   'Session Year Keys:',
                    //   Object.keys(sessionYearsData.data[0])
                    // );
                  }

                  return sessionYearsData?.data?.map((item: SessionYear) => {
                    return (
                      <SelectItem key={item.id} value={String(item.id)}>
                        {item.name}
                      </SelectItem>
                    );
                  });
                })()}
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* Gallery Grid */}
        {galleryLoading ? (
          <div className="flex justify-center items-center py-12">
            <div className="flex items-center gap-2 text-gray-600">
              <BiLoaderAlt className="w-5 h-5 animate-spin" />
              <span>{translate('loadingGallery')}</span>
            </div>
          </div>
        ) : galleryError ? (
          <div className="flex justify-center items-center py-12">
            <div className="text-center">
              <p className="text-red-600 mb-2">
                {translate('failedToLoadGallery')}
              </p>
              <p className="text-gray-500 text-sm">
                {translate('pleaseTryAgainLater')}
              </p>
            </div>
          </div>
        ) : allGalleries && allGalleries.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-6">
            {allGalleries.map((gallery: Gallery) => (
              // Wrap entire card in Link so it's clickable on all devices (mobile, tablet, desktop)
              <Link
                key={gallery.id}
                href={`/student/gallery/detail?id=${gallery.id}`}
                className="bg-white rounded-[12px] border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 group relative hover:shadow-lg"
              >
                {/* Gallery Thumbnail */}
                <div
                  className="w-full h-[280px] flex items-center justify-center relative bg-cover bg-center"
                  style={{
                    backgroundColor: getGalleryItemColor(gallery.id),
                    backgroundImage: gallery.thumbnail
                      ? `url(${gallery.thumbnail})`
                      : 'none',
                  }}
                >
                  {!gallery.thumbnail && (
                    <span className="text-white text-sm font-medium opacity-50">
                      {translate('galleryImage')}
                    </span>
                  )}

                  {/* Black Overlay on Hover - Slides up from bottom (desktop only) */}
                  <div className="absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100 translate-y-full group-hover:translate-y-0 transition-all duration-500 ease-in-out pointer-events-none">
                    {/* Title and Photo Count - Bottom with proper spacing */}
                    <div className="bg-white rounded-[8px] p-3 absolute bottom-3 left-3 right-3">
                      <div className="flex justify-between items-center">
                        <div className="flex flex-col gap-1">
                          <h3 className="text-gray-900 font-semibold text-base">
                            {gallery.title}
                          </h3>
                          <p className="text-gray-500 text-sm">
                            {gallery.total_photos > 0 && (
                              <>
                                {gallery.total_photos} {translate('photos')}
                              </>
                            )}
                            {gallery.total_photos > 0 &&
                              gallery.total_videos > 0 &&
                              ' | '}
                            {gallery.total_videos > 0 && (
                              <>
                                {gallery.total_videos} {translate('videos')}
                              </>
                            )}
                          </p>
                        </div>
                        <div className="flex justify-end">
                          <div className="bg-(--primary-color) w-8 h-8 rounded-md flex items-center justify-center">
                            <BiRightArrowAlt className="w-5 h-5 text-white rtl:rotate-180" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <div className="flex justify-center items-center py-12">
            <div className="text-center">
              <p className="text-gray-600 mb-2">
                {translate('noGalleryItemsFound')}
              </p>
              <p className="text-gray-500 text-sm">
                {translate('trySelectingDifferentSessionYear')}
              </p>
            </div>
          </div>
        )}

        {/* Load More Button - Only show if there are more items to load */}
        {allGalleries.length >= 6 && hasMore && (
          <div className="flex justify-center mt-6">
            <button
              onClick={handleLoadMore}
              disabled={isLoadingMore || !hasMore}
              className="bg-(--primary-color) text-white px-6 py-2 rounded-[4px] font-medium hover:bg-(--primary-color)/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {isLoadingMore ? (
                <>
                  <BiLoaderAlt className="w-5 h-5 animate-spin" />
                  <span>{translate('loading')}</span>
                </>
              ) : (
                <span>{translate('loadMore') || 'Load More'}</span>
              )}
            </button>
          </div>
        )}
      </div>
    </Container>
  );
}