'use client';

import DashboardLayout from "@/app/dashboard/layout";
import DeliveryMan from "../../../assets/images/deliveryMan.png";
import RadioCheck from "../../../assets/images/radioCheck.png";
import RadioCheckNonVeg from "../../../assets/images/radioCheckNonVeg.png";
import { Icons } from "@/components/icons";
import { useGlobalContext } from "@/context/Provider";
import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter, 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 { Dialog, DialogContent } from "@/components/ui/dialog";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp";
import { Button } from "@/components/ui/button";
import { currency } from "@/lib/utils";

const ReadyOrder = () => {
  const router = useRouter();
  const { userInfo, setOrderInfo, orderInfo, Toast } = 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?.restaurant_id?._id || !userInfo?.access_token) {
      console.warn("⚠️ Cannot connect socket: missing userInfo data");
      return;
    }

    if (!socketService.isConnected()) {
      socketService.connect(
        SOCKET_URL,
        userInfo.restaurant_id._id,
        userInfo.access_token
      );
    }
  }, [userInfo?.restaurant_id?._id, userInfo?.access_token]);

  /* ================= Fetch Orders ================= */
  useEffect(() => {
    if (userInfo?._id) {
      getCount(1, false);
    }
  }, [userInfo]);

  const getCount = async (currentPage: number, append = false) => {
    const status = searchParams.get("status") || "ready";
    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);
    }
  };

  /* ================= Infinite Scroll ================= */
  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);
          getCount(nextPage, true);
        }
      });

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

  /* ================= OTP ================= */
  const [open, setOpen] = useState(false);
  const [otp, setOtp] = useState("");
  const [orderId, setOrderId] = useState<string | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const [verifying, setVerifying] = useState(false);

  useEffect(() => {
    if (!open) {
      setOtp("");
      setErrorMsg(null);
    }
  }, [open]);

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

  const updateOrderStatus = async () => {
    try {
      setVerifying(true);
      setErrorMsg(null);
      await apis.Orders.readyupdate(orderId, "delivered", otp);
      setOpen(false);
      Toast.success("Takeaway order verified successfully!");
      getCount(page, false);
    } catch (error: any) {
      console.error(error);
      const backendError = error?.response?.body?.message || error?.response?.body?.error_description || "Something went wrong";
      setErrorMsg(backendError);
      Toast.error(error);
      setOtp("");
    } finally {
      setVerifying(false);
    }
  };

  return (
    <div className="h-[92vh] overflow-y-auto bg-gray-50 p-3 sm:p-4 no-scrollbar">
      <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 hover:shadow-lg transition cursor-pointer flex flex-col min-h-[300px]"
              onClick={() => {
                setActiveModal("orderDetail");
                setOrderInfo(item);
              }}
            >
              <div className="p-4 flex-1 flex flex-col space-y-4">
                {/* Header/Info */}
                <div className="space-y-4 flex-1">
                  <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-xs font-bold text-gray-800">
                        #{item.order_id}
                      </p>
                      <p className="text-[10px] text-gray-500 font-medium">
                        {dayjs(item.createdAt).format('DD MMM, hh:mm a')}
                      </p>
                      {item.scheduled_time && (
                        <p className="text-[10px] text-[var(--primary-brand)] font-bold">
                          Scheduled Time: {dayjs(item.scheduled_time).format('DD MMM, hh:mm a')}
                        </p>
                      )}
                    </div>
                    <div className="flex flex-col items-end gap-2">
                      {item?.deliver_type === "takeaway" ? (
                        <span className="bg-blue-100 text-blue-600 text-[9px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider shadow-sm">
                          Take Away
                        </span>
                      ) : item?.deliver_type === "driver" ? (
                        <span className="bg-green-100 text-green-600 text-[9px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider shadow-sm">
                          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 justify-between items-center"
                        >
                          <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>

                  <p className="text-sm text-[var(--primary-brand)] font-medium">
                    {item?.user_order_count} order by{" "}
                    {item?.add_receiver_detail?.name}
                  </p>

                  <div className="flex justify-between border-t border-gray-100 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>
                </div>

                {/* Status-specific actions */}
                <div className="mt-auto space-y-3 pt-2">
                  {String(item?.deliver_type).toLowerCase().includes("takeaway") && (
                    <button
                      className="w-full h-[44px] flex items-center justify-center rounded-lg bg-[var(--primary-brand)] hover:opacity-90 text-white text-sm font-semibold transition active:scale-95 shadow-sm"
                      onClick={(e) => {
                        e.stopPropagation();
                        setOpen(true);
                        setOrderId(item?._id);
                      }}
                    >
                      Enter OTP
                    </button>
                  )}

                  {String(item?.deliver_type).toLowerCase() === "driver" && (
                    <div
                      className="rounded-lg border border-gray-200 p-2 bg-gray-50/50"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <div className="flex items-center gap-3">
                        <img
                          src={
                            item.driver_id?.image
                              ? `${BUCKET_ROOT}${item.driver_id.image}`
                              : DeliveryMan.src
                          }
                          alt={item.driver_id?.name || "Driver"}
                          className="w-8 h-8 object-contain"
                        />
                        <div className="flex-1 min-w-0">
                          <p className="text-[11px] font-medium text-gray-700 truncate">
                            {item?.driver_id
                              ? `${item.driver_id.name} is assigned`
                              : "We are selecting a driver"}
                          </p>
                        </div>
                      </div>

                      {item?.driver_id && (
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            handleOpenChat(item);
                          }}
                          className="w-full mt-2 flex items-center justify-center gap-2 rounded-lg bg-green-600 hover:bg-green-700 p-2 text-white transition active:scale-95 shadow-sm"
                        >
                          <MessageCircle className="h-3.5 w-3.5" />
                          <span className="text-xs font-semibold">
                            Chat with Driver
                          </span>
                        </button>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* States */}
      {loading && (
        <p className="mt-8 text-center text-sm text-gray-500 animate-pulse">
          Loading more orders...
        </p>
      )}
      {!loading && orders.length === 0 && (
        <div className="mt-20 flex flex-col items-center justify-center text-gray-400">
          <p className="text-sm">No orders to show</p>
        </div>
      )}

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

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="sm:max-w-md rounded-xl">
          <div className="p-2">
            <h2 className="text-xl font-bold text-gray-900 mb-2">
              Enter OTP
            </h2>
            <p className="text-sm text-gray-500 mb-6">
              Please enter the 4-digit code provided by the customer to verify this takeaway order.
            </p>

            <div className="flex flex-col items-center gap-8">
              <InputOTP
                maxLength={4}
                value={otp}
                onChange={(value) => setOtp(value)}
              >
                <InputOTPGroup className="gap-3">
                  {[...Array(4)].map((_, index) => (
                    <InputOTPSlot
                      key={index}
                      index={index}
                      className="w-14 h-14 text-xl font-bold border-2 focus:border-[var(--primary-brand)] rounded-lg"
                    />
                  ))}
                </InputOTPGroup>
              </InputOTP>

              {errorMsg && (
                <p className="text-sm font-semibold text-red-500 -mt-4 text-center">
                  {errorMsg}
                </p>
              )}

              <Button
                onClick={updateOrderStatus}
                disabled={otp.length !== 4 || verifying}
                className="w-full h-12 bg-[var(--primary-brand)] hover:bg-[var(--primary-brand)] text-white font-bold rounded-xl text-base shadow-lg transition-all disabled:opacity-50 disabled:shadow-none"
              >
                {verifying ? "Verifying..." : "Verify"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

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

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