'use client';
import DashboardLayout from '@/app/dashboard/layout';
import { useEffect, useState } from 'react';
import apis from '@/utils/apis';
import ReviewTable from '@/components/reviewTable/table';

const ReviewList = () => {
  const [reviewsList, setReviewsList] = useState<any[]>([]);
  const [overallRating, setOverallRating] = useState<number>(0);
  const [totalCount, setTotalCount] = useState<number>(0);

  const [page, setPage] = useState<number>(1);
  const [limit] = useState<number>(3);
  const [loading, setLoading] = useState<boolean>(true);
  const [loadingMore, setLoadingMore] = useState<boolean>(false);
  const [hasMore, setHasMore] = useState<boolean>(true);

  const fetchReviews = async (pageNumber = 1, isAppend = false) => {
    try {
      if (isAppend) {
        setLoadingMore(true);
      } else {
        setLoading(true);
      }

      const query = new URLSearchParams({
        page: pageNumber.toString(),
        limit: limit.toString()
      }).toString();

      const res = await apis.User.review(query);

      const items = Array.isArray(res?.data)
        ? res.data
        : Array.isArray(res?.data?.data)
          ? res.data.data
          : Array.isArray(res)
            ? res
            : [];

      const count = Number(res?.count ?? res?.total ?? res?.data?.count ?? res?.pagination?.total ?? 0);
      const rating = Number(res?.overall_rating ?? res?.data?.overall_rating ?? 0);

      if (rating > 0) {
        setOverallRating(rating);
      }

      if (isAppend) {
        setReviewsList((prev) => {
          const updated = [...prev, ...items];
          const total = count > 0 ? count : updated.length;
          setHasMore(updated.length < total && items.length > 0);
          return updated;
        });
      } else {
        setReviewsList(items);
        const total = count > 0 ? count : items.length;
        setTotalCount(total);
        setHasMore(items.length < total && items.length > 0);
      }

      if (count > 0) {
        setTotalCount(count);
      }
    } catch (error) {
      console.error('Error fetching reviews:', error);
    } finally {
      setLoading(false);
      setLoadingMore(false);
    }
  };

  const handleLoadMore = () => {
    if (loading || loadingMore || !hasMore) return;
    const nextPage = page + 1;
    setPage(nextPage);
    fetchReviews(nextPage, true);
  };

  useEffect(() => {
    fetchReviews(1, false);
  }, []);

  return (
    <div className="min-h-screen w-full bg-white p-4 md:p-8">
      <ReviewTable
        reviewsList={reviewsList}
        overallRating={overallRating}
        totalCount={totalCount}
        loading={loading}
        loadingMore={loadingMore}
        hasMore={hasMore}
        onLoadMore={handleLoadMore}
      />
    </div>
  );
};

export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <ReviewList />
    </DashboardLayout>
  );
}