'use client';

import DashboardLayout from '@/app/dashboard/layout';
import RadioCheck from '../../../assets/images/radioCheck.png';
import RadioCheckNonVeg from '../../../assets/images/radioCheckNonVeg.png';
import { Icons } from '@/components/icons';
import DeliveryMan from '../../../assets/images/deliveryMan.png';
import { useGlobalContext } from '@/context/Provider';
import { useEffect, useState, useRef, useCallback } from 'react';
import { useSearchParams } from 'next/navigation';
import SidebarModal from '@/components/rightSidebar/page';
import apis, { API_ROOT, BUCKET_ROOT } from '@/utils/apis';
import dayjs from 'dayjs';
import ChatModal from '@/components/ChatModal';
import socketService from '@/utils/socketService';
import { MessageCircle } from 'lucide-react';
import { currency } from '@/lib/utils';

const PickedOrder = () => {
  const { userInfo, setOrderInfo, orderInfo } = useGlobalContext();
  const searchParams = useSearchParams();

  const [activeModal, setActiveModal] = useState<string | null>(null);
  const [orders, setOrders] = useState<any[]>([]);
  const [page, setPage] = useState(Number(searchParams.get('page')) || 1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [chatModalOpen, setChatModalOpen] = useState(false);
  const [selectedOrder, setSelectedOrder] = useState<any>(null);
  const limit = 15;

  useEffect(() => {
    const SOCKET_URL = API_ROOT || "";
    if (userInfo?._id && userInfo?.access_token) {
      if (!socketService.isConnected()) {
        socketService.connect(SOCKET_URL, userInfo.restaurant_id._id, userInfo.access_token);
      }
    }
  }, [userInfo]);

  const getOrders = async (currentPage: number, append = false) => {
    const status = searchParams.get('status') || 'picked_up';
    const restaurant_id = userInfo?.restaurant_id?._id;

    try {
      setLoading(true);
      const params = new URLSearchParams({
        status,
        page: currentPage.toString(),
        limit: limit.toString(),
        restaurant_id,
      });

      const apiRes = await apis.Orders.get(params.toString());
      const data = apiRes?.data || [];

      setOrders((prev) => (append ? [...prev, ...data] : data));
      setHasMore(data.length === limit);
    } catch (error) {
      console.error('Error fetching orders:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (userInfo?._id) {
      getOrders(page, false);
    }
  }, [userInfo]);

  const observer = useRef<IntersectionObserver | null>(null);
  const lastOrderRef = useCallback(
    (node: any) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          const nextPage = page + 1;
          setPage(nextPage);
          getOrders(nextPage, true);
        }
      });

      if (node) observer.current.observe(node);
    },
    [loading, hasMore, page]
  );

  const handleOpenChat = (order: any) => {
    setSelectedOrder(order);
    setChatModalOpen(true);
  };

  return (
    <>
      <div className="h-[92vh] overflow-y-auto bg-gray-50 p-4">
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {orders?.map((item: any, index: number) => {
            const isLast = orders.length === index + 1;

            return (
              <div
                key={item?._id}
                ref={isLast ? lastOrderRef : null}
                className="rounded-xl bg-white shadow-md transition hover:shadow-lg cursor-pointer flex flex-col justify-between"
                onClick={() => {
                  setActiveModal('orderDetail');
                  setOrderInfo(item);
                }}
              >
                <div className="p-6 space-y-4">
                  {/* Header */}
                  <div className="flex justify-between items-start">
                    <div className="space-y-1">
                      <h3 className="text-[14px] font-[800] text-[#121212]">
                        #{item?.order_id}
                      </h3>
                      <span className="text-[12px] font-[500] text-[#808080]">
                        {dayjs(item.createdAt).format('DD MMM, hh:mm a')}
                      </span>
                    </div>
                    <div>
                      {item?.deliver_type === 'driver' ? (
                        <span className="bg-[#E6F7ED] text-[#219653] text-[10px] px-2 py-1 rounded-md font-[800] uppercase tracking-wider">
                          Driver
                        </span>
                      ) : (
                        <span className="bg-[#E8F1FF] text-[#2D9CDB] text-[10px] px-2 py-1 rounded-md font-[800] uppercase tracking-wider">
                          Take Away
                        </span>
                      )}
                    </div>
                  </div>

                  {/* Items */}
                  <div className="space-y-3">
                    {[
                      ...(item?.cart_items || []),
                      ...(item?.grocery_cart_items || []),
                      ...(item?.other_cart_items || []),
                    ]
                      ?.slice(0, 2)
                      .map((cartItem: any, i: number) => (
                        <div key={i} className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Icons.FoodTypeIcon type={cartItem.food_type} className="h-3.5 w-3.5 shrink-0" />
                            <span className="text-[16px] font-[600] text-[#121212] truncate max-w-[200px]">
                              {cartItem.no_of_quantity} x {cartItem.name}
                            </span>
                          </div>
                          <span className="text-[14px] font-[500] text-[#808080]">
                            {currency}{cartItem?.total_price !== undefined && cartItem?.total_price !== null ? cartItem.total_price : cartItem.price * cartItem.no_of_quantity}
                          </span>
                        </div>
                      ))}
                  </div>

                  {/* User */}
                  <div className="pl-4 text-[var(--primary-brand)] text-sm">
                    <p>
                      {item?.user_order_count} order by{' '}
                      {item?.add_receiver_detail?.name}
                    </p>
                  </div>

                  {/* Total */}
                  <div className="flex items-center justify-between border-t border-gray-100 py-3">
                    <span className="text-[14px] font-[600] text-[#121212]">
                      Total Bill
                    </span>
                    <span className="text-[14px] font-[500] text-[var(--primary-brand)]">
                      {currency}{Number(item?.total_amount).toFixed(2)}
                    </span>
                  </div>

                  {/* Footer Actions */}
                  <div className="mt-2 rounded-lg border border-gray-200 p-1 shadow-sm">
                    <div className="flex items-center gap-3">
                      <div className="p-2">
                        <img
                          src={
                            item.driver_id?.image
                              ? `${BUCKET_ROOT}${item.driver_id.image}`
                              : DeliveryMan.src
                          }
                          alt={item.driver_id?.name || "Driver"}
                          className="w-10 h-10 rounded-full object-cover"
                        />
                      </div>
                      <div className="flex-1">
                        <p className="text-[12px] font-[500] text-[#333]">
                          {item?.driver_id?.name} has picked up the order
                        </p>
                      </div>
                    </div>
                    {item?.driver_id && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          handleOpenChat(item);
                        }}
                        className="w-full flex items-center justify-center gap-2 rounded-lg bg-green-600 hover:bg-green-700 p-2 text-white transition-colors active:scale-95 mt-2"
                      >
                        <MessageCircle className="h-4 w-4" />
                        <span className="text-[14px] font-[600]">
                          Chat with Driver
                        </span>
                      </button>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        {loading && (
          <p className="col-span-full text-center mt-4">Loading more orders...</p>
        )}
        {orders.length === 0 && !loading && (
          <p className="col-span-full text-center mt-10">No orders to show.</p>
        )}
      </div>

      {activeModal && orderInfo && (
        <SidebarModal type={activeModal} onClose={() => setActiveModal(null)} />
      )}
      {selectedOrder && (
        <ChatModal
          isOpen={chatModalOpen}
          onClose={() => {
            setChatModalOpen(false);
            setSelectedOrder(null);
          }}
          order={selectedOrder}
          restaurantId={userInfo?.restaurant_id?._id || ""}
          userId={userInfo?._id || ""}
        />
      )}
    </>
  );
};

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