"use client";
import React, { useState, useEffect } from "react";

export default function UncollectedList({
  uncollectedData,
  ceremonyId,
  fetchUncollected, // function passed from parent
}: any) {
  const [currentPage, setCurrentPage] = useState(
    uncollectedData.pagination.current_page,
  );

  const { total, last_page, from, to } = uncollectedData.pagination;

  // When currentPage changes, fetch new data
  useEffect(() => {
    if (currentPage !== uncollectedData.pagination.current_page) {
      fetchUncollected(ceremonyId, currentPage);
    }
  }, [currentPage]);

  const handlePrev = () => {
    if (currentPage > 1) setCurrentPage(currentPage - 1);
  };

  const handleNext = () => {
    if (currentPage < last_page) setCurrentPage(currentPage + 1);
  };

  if (!uncollectedData.data || uncollectedData.data.length === 0) {
    return <p className="text-gray-500">No invoices found.</p>;
  }

  return (
    <div className="p-4 space-y-6">
      {/* Pagination */}
      <div className="flex flex-col items-center mt-4 space-y-2">
        {/* Page Info */}
        <span className="text-gray-700 text-center">
          Page {currentPage} of {last_page} (Showing From {from} to {to} of
          Total {total})
        </span>

        {/* Pagination Buttons */}
        <div className="flex gap-4">
          <button
            onClick={handlePrev}
            disabled={currentPage === 1}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            Previous
          </button>

          <button
            onClick={handleNext}
            disabled={currentPage === last_page}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            Next
          </button>
        </div>
      </div>
      {uncollectedData.data.map((invoice: any) => (
        <div
          key={invoice.id}
          className="border rounded-lg p-4 shadow-sm bg-white"
        >
          <div className="flex justify-between items-center mb-4">
            <div>
              <p className="font-semibold text-lg">
                Invoice #{invoice.invoice_number}
              </p>
              <p className="text-gray-600">
                Student: {invoice.gradaute_full_name} ({invoice.student_id})
              </p>
              <p className="text-gray-600">Email: {invoice.email}</p>
              <p className="text-gray-600">
                Mobile:{" "}
                <a
                  href={`tel:${invoice.mobile}`}
                  className="font-extrabold text-green-800"
                >
                  {invoice.mobile}
                </a>
              </p>
            </div>
          </div>
          <div className="overflow-x-auto shadow-md rounded bg-red-100">
            <table className="min-w-full table-auto border-collapse">
              <thead>
                <tr className="bg-gray-100">
                  <th className="border px-3 py-2 text-left">Product Name</th>
                  <th className="border px-3 py-2 text-center">Quantity</th>
                  <th className="border px-3 py-2 text-center">Options</th>
                  <th className="border px-3 py-2 text-center">Status</th>
                </tr>
              </thead>
              <tbody>
                {invoice.order_other_products.map((product: any) => (
                  <tr key={product.id}>
                    <td className="border px-3 py-2">
                      {product.other_product_name}
                    </td>
                    <td className="border px-3 py-2 text-center">
                      {product.quantity}
                    </td>
                    <td className="border px-3 py-2 text-center">
                      {product.options || "-"}
                    </td>
                    <td className="border px-3 py-2 text-center">
                      {product.status}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}

      {/* Pagination */}
      <div className="flex flex-col items-center mt-4 space-y-2">
        {/* Page Info */}
        <span className="text-gray-700 text-center">
          Page {currentPage} of {last_page} (Showing From {from} to {to} of
          Total {total})
        </span>

        {/* Pagination Buttons */}
        <div className="flex gap-4">
          <button
            onClick={handlePrev}
            disabled={currentPage === 1}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            Previous
          </button>

          <button
            onClick={handleNext}
            disabled={currentPage === last_page}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  );
}