"use client";
import { useCurrency } from "@/app/contexts/currencyContext";
import authAxios, { backendUrl } from "@/utils/axios";
import { ShoppingBag } from "lucide-react";
import Image from "next/image";
import { useState, useEffect } from "react";

const OrdersPage = () => {
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);
  const { isLoading, formatPrice } = useCurrency();

  useEffect(() => {
    const fetchOrders = async () => {
      try {
        const response = await authAxios.get("/orders/my-orders");
        setOrders(response.data);
      } catch (error) {
        console.error("Error fetching orders:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchOrders();
  }, []);

  if (loading) {
    return (
      <div className="flex justify-center items-center min-h-[40vh]">
        Loading...
      </div>
    );
  }

  if (!orders.length) {
    return (
      <div>
        <h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
          Orders
        </h1>
        <div className="flex flex-col gap-5 justify-center items-center min-h-[40vh]">
          <h2>
            <ShoppingBag className="sm:ml-20 mb-3 text-[#AC8C6B]" />
            You don&apos;t have any orders yet
          </h2>
        </div>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
        Orders
      </h1>
      <div className="mt-6 space-y-4">
        {orders.map((order) => (
          <div key={order.id} className="bg-white p-4 rounded-lg shadow">
            <div className="flex justify-between items-center mb-4">
              <span className="font-medium">Order #{order.order_number}</span>
              <span
                className={`px-3 py-1 rounded-full text-sm ${
                  order.status === "DELIVERED"
                    ? "bg-green-100 text-green-800"
                    : order.status === "SHIPPED"
                    ? "bg-blue-100 text-blue-800"
                    : "bg-yellow-100 text-yellow-800"
                }`}
              >
                {order.status}
              </span>
            </div>

            <div className="space-y-3">
              {order.items.map((item) => (
                <div key={item.id} className="flex items-center gap-4">
                  <Image
                    src={`${backendUrl}${item.variant.product.images[0].image}`}
                    alt={item.variant.product.product_name}
                    width={64}
                    height={64}
                    className="object-cover rounded-md"
                  />
                  <div>
                    <p className="font-medium">
                      {item.variant.product.product_name}
                    </p>
                    <p className="text-sm text-gray-600">
                      Size: {item.variant.size.size_name}
                      {item.design && ` • Design: ${item.design.design_name}`}
                    </p>
                    <p className="text-sm text-gray-600">
                      Quantity: {item.quantity}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-4 pt-4 border-t flex justify-between items-center">
              <div className="text-gray-600">
                {new Date(order.created_at).toLocaleDateString()}
              </div>
              <div className="font-medium">
                Total:{" "}
                {isLoading ? (
                  <span>Loading...</span>
                ) : (
                  <span>{formatPrice(order.total_amount)}</span>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default OrdersPage;