'use client';

import { orderStatus } from '@/constants/data';
import { useGlobalContext } from '@/context/Provider';
import { useState } from 'react';
import SidebarModal from '../rightSidebar/page';
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent
} from '@/components/ui/tooltip';

const ReviewTable = ({ data }: any) => {
  const { setOrderInfo } = useGlobalContext();
  const [activeModal, setActiveModal] = useState<string | null>(null);
  function timeAgo(dateString: any) {
    const now: any = new Date();
    const past: any = new Date(dateString);
    const diffInMs = now - past;
    const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));

    if (diffInHours < 1) {
      const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
      return `${diffInMinutes} min ago`;
    } else if (diffInHours < 24) {
      return `${diffInHours} hr ago`;
    } else {
      const diffInDays = Math.floor(diffInHours / 24);
      return `${diffInDays} day ago`;
    }
  }

  const handleDate = (date: any) => {
    const timestamp = date;
    const datee = new Date(timestamp);
    const dateString = datee.toLocaleDateString();
    return dateString;
  };
  const handleTime = (date: any) => {
    const timestamp = date * 1000;
    const datee = new Date(timestamp);
    const timeString = datee.toLocaleTimeString();
    return timeString;
  };

  return (
    <div className="mt-4 flex h-auto max-h-[80vh] w-full flex-col overflow-hidden rounded-lg bg-white shadow-lg shadow-gray-500/50">
      {/* Responsive wrapper for horizontal scroll */}
      <div className="overflow-x-auto">
        <table className="min-w-full table-auto">
          <thead className="sticky top-0 z-10 bg-[#FAFAFA] text-[#828282]">
            <tr>
              <th className="w-[15%] px-4 py-2 text-left text-xs font-medium text-[#828282] sm:text-sm">
                Orders ID
              </th>

              <th className="w-[17%] px-4 py-2 text-left text-xs font-medium text-[#828282] sm:text-sm">
                Customer
              </th>
              <th className="w-[17%] px-4 py-2 text-left text-xs font-medium text-[#828282] sm:text-sm">
                Rating
              </th>
              <th className="w-[17%] px-4 py-2 text-left text-xs font-medium text-[#828282] sm:text-sm">
                Description
              </th>
              <th className="w-[17%] px-4 py-2 text-left text-xs font-medium sm:text-sm">
                Time
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {data?.length > 0 &&
              data?.map((item: any, index: number) => (
                <tr key={index} className="hover:bg-gray-50">
                  <td className="w-[15%] px-4 py-2 text-xs text-[#252525] sm:text-sm">
                    #{item?.order_id}
                  </td>
                  <td className="w-[17%] px-4 py-4 text-xs text-[#252525] sm:text-sm">
                    {item?.customer_name}
                  </td>
                  <td className="w-[17%] px-4 py-4 text-xs text-[#252525] sm:text-sm">
                    ⭐ {item?.rating}
                  </td>
                  <td className="w-[17%] px-4 py-4 text-xs text-[#252525] sm:text-sm">
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <span className="cursor-default">
                          {item?.description?.length > 12
                            ? item.description.slice(0, 12) + '...'
                            : item.description}
                        </span>
                      </TooltipTrigger>
                      {item?.description?.length > 12 && (
                        <TooltipContent>
                          <p>{item.description}</p>
                        </TooltipContent>
                      )}
                    </Tooltip>
                  </td>
                  <td className="w-[17%] px-4 py-4 text-xs text-[#252525] sm:text-sm">
                    {timeAgo(item?.created_at)}{' '}
                 
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>

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

export default ReviewTable;