'use client';

import { orderStatus } from "@/constants/data";
import { useGlobalContext } from "@/context/Provider";
import { useState } from "react";
import SidebarModal from "../rightSidebar/page";
import { formatOrderStatus } from "@/lib/utils";

const EarningTable = ({ data }: any) => {
  const { setOrderInfo } = useGlobalContext();
  const [activeModal, setActiveModal] = useState<string | null>(null);

  const handleDate = (date: any) => {
    if (!date) return "N/A";
    const timestamp = date > 9999999999 ? date : date * 1000;
    const dateObj = new Date(timestamp);

    const options: Intl.DateTimeFormatOptions = {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    };

    return dateObj.toLocaleDateString('en-US', options);
  };


  const formatEarningType = (type: string) => {
    if (!type) return "N/A";
    if (type === "pos") return "POS";
    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
  };

  return (
    <div className="w-full bg-white overflow-hidden">
      {/* Single horizontal scroll container wrapping entire table */}
      <div className="overflow-x-auto">
        {/* Single table for header + body */}
        <table className="min-w-[600px] w-full table-auto">
          <thead className="bg-[#FAFAFA] text-[#828282] sticky top-0 z-10">
            <tr>
              <th className="px-4 py-3 text-left text-xs sm:text-sm font-medium w-[15%] whitespace-nowrap">
                Orders ID
              </th>
              {/* <th className="px-4 py-3 text-left text-xs sm:text-sm font-medium w-[17%] whitespace-nowrap">
                Users
              </th> */}
              <th className="px-4 py-3 text-left text-xs sm:text-sm font-medium w-[17%] whitespace-nowrap">
                Date
              </th>
              <th className="px-4 py-3 text-left text-xs sm:text-sm font-medium w-[17%] whitespace-nowrap">
                Earning
              </th>
              <th className="px-4 py-3 text-left text-xs sm:text-sm font-medium w-[17%] whitespace-nowrap">
                Status
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 overflow-y-auto">
            {data?.length > 0 ? (
              data.map((item: any, index: number) => (
                <tr
                  key={index}
                  className={`hover:bg-gray-50 ${item?.earning_type !== "current" ? "cursor-default" : "cursor-pointer"}`}
                  onClick={() => {
                    if (item?.earning_type !== "current") return;
                    setActiveModal("orderDetail");
                    setOrderInfo(item);
                  }}
                >
                  <td className="px-4 py-4 text-xs sm:text-sm text-[#252525] w-[15%] whitespace-nowrap">
                    #{item?.order?.order_id || item?.reference_id}
                  </td>
                  {/* <td className="px-4 py-3 text-xs sm:text-sm w-[17%] whitespace-nowrap">
                    <div className="text-[#252525]">Ralph Edwards</div>
                  </td> */}
                  <td className="px-4 py-4 text-xs sm:text-sm text-[#252525] w-[17%] whitespace-nowrap">
                    {handleDate(item?.order_placed_at || item?.created_at)}
                  </td>
                  <td className="px-4 py-4 text-xs sm:text-sm text-[#188A42] w-[17%] whitespace-nowrap">
                    +${(item?.restaurant_earning ?? 0).toFixed(2)}
                  </td>

                  <td
                    className="px-4 py-4 text-xs sm:text-sm text-[#188A42] w-[17%] whitespace-nowrap"
                    onClick={(e) => {
                      e.stopPropagation();
                      if (item?.earning_type !== "current") return;
                      setActiveModal("orderDetail");
                      setOrderInfo(item);
                    }}
                  >
                    {item?.earning_type === "current" ? (orderStatus?.[item?.order?.order_status] || formatOrderStatus(item?.order?.order_status)) : formatEarningType(item?.earning_type)}
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={4} className="px-4 py-8 text-center text-sm text-gray-400">
                  No orders found
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {activeModal && (
        <SidebarModal
          type={activeModal}
          onClose={() => setActiveModal(null)}
        />
      )}
    </div>
  );
};

export default EarningTable;