"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  ArrowLeft,
  CalendarIcon,
  CircleDashed,
  Clock,
  MapPin,
  Phone,
  User,
  X,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  useDeleteOrdersMutation,
  useGetOrderDetailsQuery,
  useUpdateOrdersMutation,
} from "@/redux/services/orders.api";
import { useRouter } from "next/navigation";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "@/components/ui/use-toast";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import Image from "next/image";

export default function OrderDetails({ params }: { params: { id: string } }) {
  const router = useRouter();
  // useEffect(() => {
  //   const token = localStorage.getItem("token");
  //   if (!token) {
  //     router.push("/");
  //   }
  // });
  const [isTrackingOpen, setIsTrackingOpen] = useState(false);

  const {
    data: orderDetails,
    isLoading: isorderDetailsLoading,
    error: orderDetailsError,
  } = useGetOrderDetailsQuery(params.id);

  if (orderDetailsError) {
    router.push("/order-management");
  }

  const [
    cancelOrder,
    { isLoading: isCancelOrderLoading, error: cancelOrderError },
  ] = useDeleteOrdersMutation();
  const [
    completeOrder,
    { isLoading: isCompleteOrderLoading, error: completeOrderError },
  ] = useUpdateOrdersMutation();

  const handleCancel = (e: any) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const message = formData.get("message") || "none";

    cancelOrder({
      orderId: params.id,
      status: "cancelled",
      cancelReason: message.toString(),
    })
      .unwrap()
      .then((res: any) => {
        if (res.status) {
          return toast({
            title: res.message,
            variant: "success",
          });
        }

        return toast({
          title: res.message,
          variant: "destructive",
        });
      })
      .catch((err: any) =>
        toast({
          title: "Error creating Product",
          description: "All Fields Are Required To Create Product",
          variant: "destructive",
        })
      );
  };
  const handelDelivered = (e: any) => {
    e.preventDefault();

    completeOrder({
      orderId: params.id,
      status: "completed",
    })
      .unwrap()
      .then((res: any) => {
        if (res.status) {
          return toast({
            title: res.message,
            variant: "success",
          });
        }

        return toast({
          title: res.message,
          variant: "destructive",
        });
      })
      .catch((err: any) =>
        toast({
          title: "Error creating Product",
          description: "All Fields Are Required To Create Product",
          variant: "destructive",
        })
      );
  };

  // const formatDateWithOrdinal = (dateString: string) => {
  //   const date = new Date(dateString);

  //   const day = date.getDate();
  //   const month = date.toLocaleDateString("en-US", { month: "long" });
  //   const year = date.getFullYear();

  //   const getOrdinal = (day: number) => {
  //     if (day > 3 && day < 21) return "th"; // covers 11th - 20th
  //     switch (day % 10) {
  //       case 1:
  //         return "st";
  //       case 2:
  //         return "nd";
  //       case 3:
  //         return "rd";
  //       default:
  //         return "th";
  //     }
  //   };

  //   return `${day}${getOrdinal(day)} of ${month} ${year}`;
  // };

  const formatDateWithOrdinal = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  const formatTimeWithAmPm = (dateString: string) => {
    const date = new Date(dateString);

    return date.toLocaleTimeString("en-US", {
      hour: "numeric",
      minute: "numeric",
      hour12: true, // This ensures 12-hour format with AM/PM
    });
  };
  const formatDate = (dateString: string) => {
    const [day, month, year] = dateString.split("-");
    const date = new Date(`${year}-${month}-${day}`);
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  if (isorderDetailsLoading) {
    return (
      <div className="flex items-center ml-8 h-[80vh] justify-center">
        <CircleDashed className="animate-spin text-[#be063f]" />
      </div>
    );
  }

  return (
    <div className="container mx-auto p-4 ">
      <div className="flex items-center justify-between mb-6">
        <Link
          href="/order-management"
          className="flex items-center text-primary"
        >
          <ArrowLeft className="mr-2 hover:animate-pulse hover:-translate-x-2 transition" />
          <span>Details</span>
        </Link>
        <span
          className={`px-2 py-1 capitalize rounded-full text-xs ${
            orderDetails?.status.toLowerCase() === "pending"
              ? "bg-yellow-100 text-yellow-800"
              : orderDetails?.status.toLowerCase() === "completed"
              ? "bg-green-100 text-green-800"
              : "bg-red-100 text-red-800"
          }`}
        >
          {orderDetails?.status}
        </span>
      </div>

      <div className="grid md:grid-cols-2 gap-6 mb-6">
        <Card
          className={`${
            orderDetails?.products && orderDetails?.products.length < 4
              ? "h-fit"
              : ""
          } `}
        >
          <CardHeader>
            <CardTitle>Products</CardTitle>
          </CardHeader>
          {/* <ScrollArea className="h-[calc(24rem-4rem)]"> */}
          <ScrollArea
            className={`${
              orderDetails?.products && orderDetails?.products.length < 5
                ? ""
                : "h-[calc(22rem-4rem)]"
            } `}
          >
            <CardContent>
              <ul className="space-y-4" role="list">
                {orderDetails?.products.map((product, index) => (
                  <li key={index} className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="relative w-12 h-12 mr-4">
                        <Avatar>
                          {product.image && product.image.length > 0 ? (
                            <Image
                              src={
                                // process.env.NEXT_PUBLIC_API_URL +
                                // "/" +
                                product.image
                              }
                              height={200}
                              width={200}
                              alt="BI"
                            />
                          ) : (
                            <AvatarFallback>
                              {product.name.charAt(0)}
                            </AvatarFallback>
                          )}
                        </Avatar>
                        {/* <Avatar>
                          <AvatarImage
                            src={product.image}
                            alt={product.name.charAt(0)}
                          />
                          <AvatarFallback>
                            {product.name.charAt(0)}
                          </AvatarFallback>
                        </Avatar> */}
                        {/* <img
                          src={product.image}
                          alt={product.name}
                          className="w-12 h-12 rounded-full mr-4"
                        /> */}
                      </div>
                      <span className="font-medium">{product.name}</span>
                    </div>
                    <span className="text-sm text-gray-500">
                      Qty: {product.quantity}
                    </span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </ScrollArea>
        </Card>

        <Card className="h-fit">
          <CardContent className="pt-6">
            <dl className="space-y-4">
              <div className="flex justify-between border-b">
                <dt className="font-medium ">Additional Notes</dt>
                <dd className="text-right text-gray-500">
                  {orderDetails?.additionalNote
                    ? orderDetails?.additionalNote.length > 0
                      ? orderDetails?.additionalNote
                      : "-------"
                    : "-------"}
                </dd>
              </div>
              <div className="flex justify-between">
                <dt className="font-medium">Order ID</dt>
                <dd>{orderDetails?.orderId}</dd>
              </div>
              <div className="flex justify-between">
                <dt className="font-medium">Creation Date</dt>
                <dd>
                  {orderDetails?.createdAt &&
                    formatDateWithOrdinal(orderDetails?.createdAt)}
                  {/* // formatDateWithOrdinal(orderDetails?.createdAt) */}
                </dd>
              </div>
              <div className="flex justify-between">
                <dt className="font-medium">Creation Time</dt>
                {orderDetails?.createdAt && (
                  <dd>
                    {new Date(orderDetails?.createdAt).toLocaleString("en-US", {
                      hour: "numeric",
                      minute: "numeric",
                      hour12: true,
                    })}
                  </dd>
                )}
              </div>
              {/* <div className="flex justify-between">
                <dt className="font-medium">Contact Info</dt>
                <dd className="text-right">
                  {orderDetails?.branchId.email}
                </dd>
              </div> */}
              {/* <div className="flex justify-between">
                <dt className="font-medium">Branch Address</dt>
                <dd className="text-right">{orderDetails?.branchId.address}</dd>
              </div> */}
              {/* <div className="flex justify-between border-t pt-2">
                <dt className="font-medium pt-4">Total Amount</dt>
                <dd className="text-xl font-bold pt-4">
                  ${orderDetails?.totalAmount}
                </dd>
              </div> */}
            </dl>
          </CardContent>
        </Card>
      </div>

      {/* {orderDetails?.status === "pending" && (
        <div className="flex flex-col sm:flex-row gap-4 mb-6">
          <Button
            variant="appVariant"
            className="flex-1"
            onClick={(e) => handelDelivered(e)}
          >
            Order Delivered
          </Button>

          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline" className="flex-1">
                Cancel Order
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>
                  Cancel Order for {orderDetails.invoiceNumber}
                </DialogTitle>
              </DialogHeader>
              <form onSubmit={handleCancel}>
                <div className="grid w-full gap-2">
                  <Label htmlFor="message">Cancel Reason</Label>
                  <Textarea
                    placeholder="Type your message here."
                    name="message"
                    id="message"
                  />
                </div>
                <div className="flex justify-end mt-4">
                  <Button variant="appVariant" type="submit">
                    Cancel Order
                  </Button>
                </div>
              </form>
            </DialogContent>
          </Dialog>
          <Button
            variant="outline"
            className="flex-1"
            onClick={() => setIsTrackingOpen(true)}
          >
            Track Order
          </Button>
        </div>
      )}

      {orderDetails?.status !== "cancelled" ? (
        <Card>
          <CardHeader>
            <CardTitle>Order Details</CardTitle>
          </CardHeader>
          <CardContent>
            <dl className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="flex items-center">
                <User className="mr-2 text-primary" />
                <div>
                  <dt className="text-sm text-muted-foreground">Name</dt>
                  <dd className="font-medium">{orderDetails?.customerName}</dd>
                </div>
              </div>
              <div className="flex items-center">
                <Phone className="mr-2 text-primary" />
                <div>
                  <dt className="text-sm text-muted-foreground">
                    Phone Number
                  </dt>
                  <dd className="font-medium">{orderDetails?.customerPhone}</dd>
                </div>
              </div>
              <div className="flex items-center">
                <CalendarIcon className="mr-2 text-primary" />
                <div>
                  <dt className="text-sm text-muted-foreground">PickUp Date</dt>
                  <dd className="font-medium">
                    {" "}
                    {orderDetails?.date &&
                      formatDateWithOrdinal(orderDetails.date)}
                  </dd>
                </div>
              </div>
              <div className="flex items-center">
                <Clock className="mr-2 text-primary" />
                <div>
                  <dt className="text-sm text-muted-foreground">PickUp Time</dt>
                  <dd className="font-medium">{orderDetails?.time}</dd>
                </div>
              </div>
            </dl>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          <h1 className="text-2xl font-bold">Reason to Cancel</h1>
          <p>{orderDetails?.cancelReason ?? "None"}</p>
        </div>
      )} */}

      <Dialog open={isTrackingOpen} onOpenChange={setIsTrackingOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle className="flex justify-center border-b items-center">
              Order Tracking
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setIsTrackingOpen(false)}
              >
                {/* <X className="h-4 w-4" /> */}
              </Button>
            </DialogTitle>
          </DialogHeader>
          {/* <div> */}
          <div className="flex items-center space-x-4">
            <div className="marker:text-2xl w-4 h-4 bg-[#8e0029] outline outline-offset-2 outline-[#8e0029] rounded-full"></div>
            <div>
              <p className="font-bold">Order Created</p>
              <p className="font-sans">
                {orderDetails?.date &&
                  formatDateWithOrdinal(orderDetails?.createdAt)}
                ,{" "}
                {orderDetails?.createdAt &&
                  formatTimeWithAmPm(orderDetails.createdAt)}
              </p>
            </div>
          </div>
          <div className="h-14 w-0 border-l border-2 border-[#8f0029] ml-1.5 -mt-4"></div>

          <div className="flex items-center space-x-4">
            <div className="marker:text-2xl w-4 h-4 bg-[#8e0029] outline outline-offset-2 outline-[#8e0029] rounded-full"></div>
            <div>
              <p className="font-bold">Order Pick Up</p>
              <p className="font-sans">
                {orderDetails?.date && formatDateWithOrdinal(orderDetails.date)}
                ,{orderDetails?.time}
                {/* {orderDetails?.time && formatTimeWithAmPm(orderDetails.time)} */}
              </p>
            </div>
          </div>
          {/* </div> */}
          {/* <div className="mt-4">
            <div className="flex flex-col items-center mr-4">
              <div className="w-4 h-4 bg-[#8e0029] outline outline-offset-2 outline-[#8e0029] rounded-full">
                Order Created
              </div>
              {index < orderDetails?.tracking.length - 1 && (
              <div className="w-[1px] h-16 mt-4 bg-[#8e0029]"></div>
         )} 
            </div>
            <div>
              <p className="font-semibold">{orderDetails?.status}</p>
              <p className="text-sm text-muted-foreground">
                {orderDetails?.date &&
                  new Date(orderDetails?.date).toLocaleDateString("en-US", {
                    year: "numeric",
                    day: "numeric",
                    month: "short",
                  })}
              </p>
            </div> */}
          {/* {orderDetails?.tracking.map((step, index) => (
              <div key={index} className="flex items-start mb-4">
                <div className="flex flex-col items-center mr-4">
                  <div className="w-4 h-4 bg-[#8e0029] outline outline-offset-2 outline-[#8e0029] rounded-full"></div>
                  {index < orderDetails?.tracking.length - 1 && (
                    <div className="w-[1px] h-16 mt-4 bg-[#8e0029]"></div>
                  )}
                </div>
                <div>
                  <p className="font-semibold">{step.status}</p>
                  <p className="text-sm text-muted-foreground">{step.date}</p>
                </div>
              </div>
            ))} */}
          {/* </div> */}
        </DialogContent>
      </Dialog>
    </div>
  );
}