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

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

  const [activeModal, setActiveModal] = useState<string | null>(null);
  const [orders, setOrders] = useState<any[]>([]);
  const [orderTimers, setOrderTimers] = useState<{ [key: string]: number }>({});

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

  useEffect(() => {
    const interval = setInterval(() => {
      setOrderTimers((prev) => {
        const updated: { [key: string]: number } = { ...prev };
        orders.forEach((order) => {
          const created = dayjs(order.createdAt);
          const now = dayjs();
          const elapsed = now.diff(created, 'second');
          const secondsLeft = 30 - elapsed;
          updated[order._id] = secondsLeft > 0 ? secondsLeft : 0;

          if (secondsLeft <= 0 && !order._statusUpdated) {
            updateOrderStatus(order._id, 'accept');
            order._statusUpdated = true;
          }
        });
        return updated;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [orders]);

  const getOrders = async () => {
    const status = searchParams.get('status') || 'pending';
    const page = searchParams.get('page') || '1';
    const limit = searchParams.get('limit') || '15';
    const restaurant_id = userInfo?.restaurant_id?._id;
    try {
      const params = new URLSearchParams({
        status,
        page,
        limit,
        restaurant_id,
      });
      const apiRes = await apis.Orders.get(params.toString());
      setOrders(apiRes?.data || []);
    } catch (error) {
      console.error(error);
    }
  };

  const updateOrderStatus = async (id: any, status: any) => {
    try {
      const apiRes = await apis.Orders.update(id, status);
      if (apiRes) {
        getOrders();
      }
    } catch (error) {
      console.error(error);
    }
  };

  const formatTime = (seconds: number) => {
    const m = String(Math.floor(seconds / 60)).padStart(2, '0');
    const s = String(seconds % 60).padStart(2, '0');
    return `${m}:${s}`;
  };

  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) => (
          <div
            key={item?._id}
            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="rounded-md bg-[#E6F7ED] px-2 py-1 text-[10px] font-[800] text-[#219653] uppercase">
                      Driver
                    </span>
                  ) : (
                    <span className="rounded-md bg-[#E8F1FF] px-2 py-1 text-[10px] font-[800] text-[#2D9CDB] uppercase">
                      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, index: number) => (
                    <div
                      key={index}
                      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-sm text-[var(--primary-brand)]">
                <p>
                  {item?.user_order_count} order by{' '}
                  {item?.add_receiver_detail?.name || item?.customer_id?.name || 'Walk-in Customer'}
                </p>
              </div>

              {/* Total Bill */}
              <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 flex gap-3">
                <button
                  className="flex-1 cursor-pointer rounded-lg bg-[#FC2424] px-4 py-2 text-[14px] font-[600] text-white transition-colors hover:bg-red-600 active:scale-95"
                  onClick={(e) => {
                    e.stopPropagation();
                    updateOrderStatus(item?._id, 'decline');
                  }}
                >
                  Decline
                </button>
                <button
                  className="flex-1 cursor-pointer rounded-lg bg-[var(--primary-brand)] px-4 py-2 text-[14px] font-[600] text-[#fff] transition-colors active:scale-95"
                  onClick={(e) => {
                    e.stopPropagation();
                    updateOrderStatus(item?._id, 'accept');
                  }}
                >
                  Accept
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
      {orders.length === 0 && (
        <p className="col-span-full text-center mt-10 text-gray-500">No orders to show.</p>
      )}
      {activeModal && orderInfo && (
        <SidebarModal type={activeModal} onClose={() => setActiveModal(null)} />
      )}
    </div>
  );
};

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