"use client";
import PriceDisplay from "@/components/ui/formattedPrice";
import Link from "next/link";
import React, { useCallback, useEffect, useState } from "react";
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";

type Order = {
  id: string;
  order_date: Date;
  order_total_amount: number;
  order_status: "pre-order" | "in-transit" | "confirmed" | "cancelled";
  uuid: string;
};

const statusColors: Record<Order["order_status"], string> = {
  "pre-order": "bg-yellow-100 text-yellow-700",
  "in-transit": "bg-blue-100 text-blue-700",
  confirmed: "bg-green-100 text-green-700",
  cancelled: "bg-red-100 text-red-700",
};

const OrdersClient = () => {
  const [orders, setOrders] = useState<Order[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(5);

  const fetchOrders = useCallback(async () => {
    const response = await fetch(`/api/orders?page=${page}&limit=${limit}`);
    const data = await response.json();

    setOrders(data.orders);
    setTotal(data.total);
  }, [page, limit])

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

  const totalPages = Math.ceil(total / limit);

  return (
    <section className="space-y-6 py-6 px-4">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <h1 className="text-3xl font-bold tracking-tight text-gray-900">
          My Orders
        </h1>
        <p className="text-gray-600 mt-2 sm:mt-0">
          Showing <span className="font-medium">{(page - 1) * limit + 1}</span>–
          <span className="font-medium">
            {Math.min(page * limit, total)}
          </span>{" "}
          of <span className="font-medium">{total}</span> orders
        </p>
      </div>

      {/* Orders list */}
      <div className="grid gap-6">
        {orders.length === 0 ? (
          <div className="text-center py-12 bg-gray-50 rounded-2xl border border-gray-200">
            <p className="text-lg font-medium text-gray-700">No orders found</p>
            <p className="text-sm text-gray-500 mt-1">
              Looks like you haven’t placed any orders yet.
            </p>
          </div>
        ) : (
          orders.map((order) => (
            <div
              key={order.id}
              className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition"
            >
              <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
                  <dl>
                    <dt className="text-sm font-medium text-gray-500">Order ID</dt>
                    <dd className="text-base font-semibold text-gray-900">
                      {order.id}
                    </dd>
                  </dl>
                  <dl>
                    <dt className="text-sm font-medium text-gray-500">Date</dt>
                    <dd className="text-base font-semibold text-gray-900">
                      {new Date(order.order_date).toLocaleString("en-GB", {
                        day: "2-digit",
                        month: "2-digit",
                        year: "numeric",
                        hour: "numeric",
                        minute: "2-digit",
                        second: "2-digit",
                        hour12: true,
                      })}
                    </dd>
                  </dl>
                  <dl>
                    <dt className="text-sm font-medium text-gray-500">Price</dt>
                    <dd className="text-base font-semibold text-gray-900">
                      <PriceDisplay price={order.order_total_amount} />
                    </dd>
                  </dl>
                  <dl>
                    <dt className="text-sm font-medium text-gray-500">Status</dt>
                    <dd>
                      <span
                        className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${statusColors[order.order_status]}`}
                      >
                        {order.order_status}
                      </span>
                    </dd>
                  </dl>
                </div>

                <div>
                  <Link
                    href={`/orders/${order.uuid}`}
                    className="inline-block rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition"
                  >
                    View Details
                  </Link>
                </div>
              </div>
            </div>
          ))
        )}
      </div>


      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex justify-center items-center mt-8 space-x-2">
          <button
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={page === 1}
            className={`flex items-center px-4 py-2 rounded-lg border transition ${page === 1
              ? "bg-gray-100 text-gray-400 cursor-not-allowed"
              : "bg-white text-gray-600 hover:bg-gray-100 border-gray-300"
              }`}
          >
            <FiChevronLeft className="mr-1" /> Previous
          </button>
          <span className="px-3 py-2 text-sm text-gray-700 font-medium">
            Page {page} of {totalPages}
          </span>
          <button
            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
            disabled={page === totalPages}
            className={`flex items-center px-4 py-2 rounded-lg border transition ${page === totalPages
              ? "bg-gray-100 text-gray-400 cursor-not-allowed"
              : "bg-white text-gray-600 hover:bg-gray-100 border-gray-300"
              }`}
          >
            Next <FiChevronRight className="ml-1" />
          </button>
        </div>
      )}
    </section>
  );
};

export default OrdersClient;