"use client";

import { Loader2 } from "lucide-react";
import { useEffect, useState, useCallback } from "react";
import Image from "next/image";
import PriceDisplay from "@/components/ui/formattedPrice";

const Page = ({ params }: { params: { uuid: string } }) => {
  const { uuid } = params;
  const [order, setOrder] = useState<OrdersType | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  const fetchOrderDetails = useCallback(async () => {
    try {
      const response = await fetch(`/api/orders/${uuid}`);
      if (response.status === 200) {
        const data = await response.json();
        setOrder(data.data);
      }
    } catch (error) {
      console.error("Failed to fetch order details", error);
    } finally {
      setLoading(false);
    }
  }, [uuid]);

  useEffect(() => {
    fetchOrderDetails();
  }, [fetchOrderDetails]);

  if (!order) {
    return (
      <div className="flex justify-center items-center h-screen bg-gray-100">
        <Loader2 className="animate-spin h-10 w-10 text-indigo-600" />
      </div>
    );
  }

  return (
    <div className="w-full max-w-8xl mx-auto px-6 py-12 space-y-10 bg-gray-50 min-h-screen">
      <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight">
        🧾 Order Summary
      </h1>

      {/* Card */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Shipping Details */}
        <div className="bg-white rounded-2xl shadow p-6 space-y-3 border">
          <h2 className="text-2xl font-semibold text-indigo-600 mb-2">📦 Shipping Info</h2>
          <p><span className="text-gray-600 font-medium">Name:</span> <span className="font-semibold">{order?.shipment_details.name}</span></p>
          <p><span className="text-gray-600 font-medium">Phone:</span> <span className="font-semibold">{order?.shipment_details.phone}</span></p>
          <p><span className="text-gray-600 font-medium">Email:</span> <span className="font-semibold">{order?.shipment_details.email}</span></p>
          {order?.shipment_details.is_delivered ? (
            <>
              <p><span className="text-gray-600 font-medium">Delivered:</span> ✅ Yes</p>
              <p><span className="text-gray-600 font-medium">Delivery Date:</span> {order?.shipment_details.delivery_date}</p>
            </>
          ) : (
            <p className="text-red-500 font-semibold">🚫 Not Delivered Yet</p>
          )}
        </div>

        {/* Delivery Address */}
        <div className="bg-white rounded-2xl shadow p-6 space-y-3 border">
          <h2 className="text-2xl font-semibold text-indigo-600 mb-2">🏠 Delivery Address</h2>
          <p><span className="text-gray-600 font-medium">Street:</span> <span className="font-semibold">{order?.address.address_line}</span></p>
          <p><span className="text-gray-600 font-medium">City:</span> <span className="font-semibold">{order?.address.city}</span></p>
          <p><span className="text-gray-600 font-medium">District:</span> <span className="font-semibold">{order?.address.district}</span></p>
          <p><span className="text-gray-600 font-medium">Division:</span> <span className="font-semibold">{order?.address.division}</span></p>
          <p><span className="text-gray-600 font-medium">Postal Code:</span> <span className="font-semibold">{order?.address.post_code}</span></p>
          <p><span className="text-gray-600 font-medium">Delivery Cost:</span> <span className="font-semibold"> <PriceDisplay price={order.delivery_cost ?? 0} /></span></p>
        </div>
      </div>

      {/* Payment Info */}
      <div className="bg-white rounded-2xl shadow p-6 border">
        <h2 className="text-2xl font-semibold text-indigo-600 mb-4">💳 Payment Info</h2>
        <p className="text-gray-600 font-medium">
          Payment Status:{" "}
          <span className={`ml-2 px-3 py-1 rounded-full text-sm font-semibold ${order?.payment.payment_status === "PAID"
            ? "bg-green-100 text-green-700"
            : "bg-yellow-100 text-yellow-700"
            }`}>
            {order?.payment.payment_status}
          </span>
        </p>
      </div>

      {/* Order Items */}
      <div className="bg-white rounded-2xl shadow p-6 border">
        <h2 className="text-2xl font-semibold text-indigo-600 mb-4">🛒 Ordered Items</h2>
        <div className="space-y-5">
          {order?.order_items.map((item, index) => (
            <div key={index} className="flex items-center gap-5 border-b pb-4 last:border-b-0">
              <Image
                src={item.variant?.variant_images[0]?.file_url}
                alt="Product"
                width={70}
                height={70}
                className="rounded-lg object-cover border"
              />
              <div>
                <p className="font-medium text-gray-800">{item.variant?.name}</p>
                <p className="text-sm mt-1 font-semibold">
                  Qty: <span className="font-semibold">{item.quantity}</span> ×
                  <span className="font-semibold"> <PriceDisplay price={item.price} /></span>
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Order Summary */}
      <div className="bg-white rounded-2xl shadow p-6 border">
        <h2 className="text-2xl font-semibold text-indigo-600 mb-4">📊 Final Summary</h2>
        <div className="grid sm:grid-cols-2 gap-y-3">
          <p><span className="text-gray-600 font-medium ">Order Total:</span> <span className="font-semibold"><PriceDisplay price={order?.order_total_amount} /></span></p>
          <p className="flex items-center gap-2">
            <span className="text-gray-600 font-medium">Order Status:</span>
            <span className={`px-3 py-1 rounded-full text-sm font-semibold ${order?.order_status === "Delivered"
              ? "bg-green-100 text-green-700"
              : "bg-blue-100 text-blue-700"
              }`}>
              {order?.order_status}
            </span>
          </p>
        </div>
      </div>
    </div>
  );
};

export default Page;