'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 SidebarModal from '@/components/rightSidebar/page';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useGlobalContext } from '@/context/Provider';
import { useSearchParams } from 'next/navigation';
import apis from '@/utils/apis';
import dayjs from 'dayjs';
import { currency } from '@/lib/utils';
import NeedMoreTimeModal from '@/components/NeedMoreTimeModal';
import { CheckCircle2, Clock } from 'lucide-react';

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

  const [activeModal, setActiveModal] = useState<string | null>(null);
  const [selectedOrderForMoreTime, setSelectedOrderForMoreTime] = useState<any>(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 limit = 15;

  const [orderTimers, setOrderTimers] = useState<{ [key: string]: number }>({});

  useEffect(() => {
    const calculateTimers = () => {
      setOrderTimers((prev) => {
        const updated: { [key: string]: number } = {};
        orders.forEach((order) => {
          let target;
          if (order.more_time_required_at) {
            const start = dayjs(order.more_time_required_at);
            const limitMinutes = order.add_more_time || 0;
            target = start.add(limitMinutes, 'minute');
          } else {
            const start = dayjs(order.order_confirmed_at || order.order_placed_at || order.createdAt);
            const limitMinutes = (order.restaurant_id?.average_preparing_time || 10) + (order.add_more_time || 0);
            target = start.add(limitMinutes, 'minute');
          }
          const diffSeconds = target.diff(dayjs(), 'second');
          updated[order._id] = diffSeconds > 0 ? diffSeconds : 0;
        });
        return updated;
      });
    };

    calculateTimers();
    const interval = setInterval(calculateTimers, 1000);

    return () => clearInterval(interval);
  }, [orders]);

  const formatPrepTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

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

  const getOrders = async (currentPage: number, append = false) => {
    const status = searchParams.get('status') || 'prepared';
    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);
    } finally {
      setLoading(false);
    }
  };

  const observer = useRef<IntersectionObserver | null>(null);

  const lastOrderRef = useCallback(
    (node: HTMLElement | null) => {
      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 updateOrderStatus = async (id: string) => {
    try {
      await apis.Orders.update(id, 'ready');
      getOrders(page, false);
    } catch (error) {
      Toast.error(error);
    }
  };

  return (
    <div className="h-[92vh] overflow-y-auto bg-gray-50 p-3 sm:p-4">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        {orders.map((item, index) => {
          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-4 space-y-4">
                {/* Header */}
                <div className="flex justify-between items-start transition-colors hover:bg-gray-50/50 rounded-lg p-1 -m-1">
                  <div className="space-y-1">
                    <p className="text-[14px] font-[800] text-[#121212]">
                      #{item.order_id}
                    </p>
                    <p className="text-[12px] text-[#808080] font-medium">
                      {dayjs(item.createdAt).format('DD MMM, hh:mm a')}
                    </p>
                  </div>
                  <div className="flex flex-col items-end gap-2">
                    {item?.deliver_type === 'takeaway' ? (
                      <span className="bg-[#E8F1FF] text-[#2D9CDB] text-[10px] px-2 py-1 rounded-md font-[800] uppercase tracking-wider">
                        Take Away
                      </span>
                    ) : 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>
                    ) : null}
                  </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-[14px] font-semibold truncate max-w-[200px]">
                            {cartItem.no_of_quantity} x {cartItem.name}
                          </span>
                        </div>
                        <span className="text-[13px] text-gray-500">
                          {currency}{cartItem?.total_price !== undefined && cartItem?.total_price !== null ? cartItem.total_price : cartItem.price * cartItem.no_of_quantity}
                        </span>
                      </div>
                    ))}
                </div>

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

                {/* Total */}
                <div className="flex justify-between border-t pt-3">
                  <span className="text-sm font-semibold">
                    Total Bill
                  </span>
                  <span className="text-sm font-semibold text-[var(--primary-brand)]">
                    {currency}{Number(item?.total_amount).toFixed(2)}
                  </span>
                </div>

                {/* Driver Status if applicable */}
                {item?.deliver_type == 'driver' && (
                  <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={DeliveryMan.src} width={30} height={30} />
                      </div>
                      <div className="flex-1">
                        <p className="text-[12px] font-[500] text-[#333]">
                          {item?.driver_id
                            ? item?.driver_id?.name +
                            ' has arrived at the location'
                            : 'We are selecting driver'}{' '}
                        </p>
                      </div>
                    </div>
                  </div>
                )}

                {/* Button */}
                <div className="w-full">
                  {orderTimers[item?._id] !== undefined && orderTimers[item?._id] > 0 ? (
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        updateOrderStatus(item?._id);
                      }}
                      className="w-full h-[44px] rounded-lg bg-[var(--primary-brand)] text-white text-sm font-semibold active:scale-95 transition hover:opacity-95"
                    >
                      Order Ready ({formatPrepTime(orderTimers[item?._id])})
                    </button>
                  ) : (
                    <div className="flex gap-3 w-full">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          updateOrderStatus(item?._id);
                        }}
                        className="flex-1 min-h-[44px] px-2 py-1.5 rounded-lg border border-[var(--primary-brand)] text-[var(--primary-brand)] bg-white text-xs sm:text-sm font-bold active:scale-95 transition hover:bg-orange-50 flex items-center justify-center gap-1.5 leading-tight text-center"
                      >
                        <CheckCircle2 className="w-4 h-4 shrink-0" />
                        <span>Order Ready</span>
                      </button>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setSelectedOrderForMoreTime(item);
                        }}
                        className="flex-1 min-h-[44px] px-2 py-1.5 rounded-lg bg-[var(--primary-brand)] text-white text-xs sm:text-sm font-bold active:scale-95 transition hover:opacity-95 flex items-center justify-center gap-1.5 leading-tight text-center"
                      >
                        <Clock className="w-4 h-4 shrink-0" />
                        <span>Need more time</span>
                      </button>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Empty State */}
      {
        !loading && orders.length === 0 && (
          <p className="mt-10 text-center text-gray-500">
            No orders to show.
          </p>
        )
      }

      {/* Sidebar */}
      {
        activeModal && orderInfo && (
          <SidebarModal type={activeModal as string} onClose={() => setActiveModal(null)} />
        )
      }

      {/* Need More Time Modal */}
      {selectedOrderForMoreTime && (
        <NeedMoreTimeModal
          order={selectedOrderForMoreTime}
          onClose={() => setSelectedOrderForMoreTime(null)}
          onSubmit={async (time) => {
            try {
              const apiRes = await apis.Orders.addMorePreparingTime(selectedOrderForMoreTime._id, time);
              Toast?.success?.(apiRes?.data?.message || 'Preparing time updated successfully');
              getOrders(page, false);
            } catch (error: any) {
              console.error('Error updating preparation time:', error);
              Toast?.error?.(error?.response?.body?.message || error?.message || 'Failed to update time');
            }
          }}
        />
      )}
    </div >
  );
};

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