import { getOrdersForAdmin } from "@/lib/queries";
import { formatKes } from "@/lib/format";
import { updateOrderStatus } from "./actions";
import { Package } from "lucide-react";

export default async function OrdersPage() {
  const orders = await getOrdersForAdmin();

  return (
    <div>
      <h1 className="font-display font-semibold text-2xl uppercase text-ink mb-6">
        Orders
      </h1>

      {orders.length === 0 ? (
        <div className="bg-white border border-line rounded-lg py-20 flex flex-col items-center justify-center text-center">
          <Package size={40} className="text-ink/20 mb-3" />
          <p className="text-ink/60 font-medium">No orders yet</p>
          <p className="text-sm text-ink/40 mt-1">
            Orders will appear here once customers start checking out.
          </p>
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-line overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-sand border-b border-line">
              <tr className="text-left text-ink/60">
                <th className="px-4 py-3 font-medium">Order #</th>
                <th className="px-4 py-3 font-medium">Customer</th>
                <th className="px-4 py-3 font-medium">Items</th>
                <th className="px-4 py-3 font-medium">Total</th>
                <th className="px-4 py-3 font-medium">Payment</th>
                <th className="px-4 py-3 font-medium">Status</th>
                <th className="px-4 py-3 font-medium">Date</th>
              </tr>
            </thead>
            <tbody>
              {orders.map((order) => (
                <tr key={order.id} className="border-b border-line last:border-0">
                  <td className="px-4 py-2.5 font-mono text-harbor">{order.orderNumber}</td>
                  <td className="px-4 py-2.5 text-ink">
                    {order.user.firstName} {order.user.lastName}
                  </td>
                  <td className="px-4 py-2.5 text-ink/60">{order.items.length}</td>
                  <td className="px-4 py-2.5 font-mono text-ink">{formatKes(order.total)}</td>
                  <td className="px-4 py-2.5 text-ink/60 text-xs font-mono">
                    {order.paymentMethod.replace("_", " ")}
                  </td>
                  <td className="px-4 py-2.5">
                    <form
                      action={updateOrderStatus.bind(null, order.id)}
                      className="flex items-center gap-1.5"
                    >
                      <select
                        name="status"
                        defaultValue={order.status}
                        className="text-xs font-mono border border-line rounded px-1.5 py-1 outline-none"
                      >
                        <option value="PENDING">Pending</option>
                        <option value="CONFIRMED">Confirmed</option>
                        <option value="PROCESSING">Processing</option>
                        <option value="SHIPPED">Shipped</option>
                        <option value="DELIVERED">Delivered</option>
                        <option value="CANCELLED">Cancelled</option>
                      </select>
                      <select
                        name="paymentStatus"
                        defaultValue={order.paymentStatus}
                        className="text-xs font-mono border border-line rounded px-1.5 py-1 outline-none"
                      >
                        <option value="PENDING">Pay: Pending</option>
                        <option value="PAID">Pay: Paid</option>
                        <option value="FAILED">Pay: Failed</option>
                        <option value="REFUNDED">Pay: Refunded</option>
                      </select>
                      <button type="submit" className="text-xs text-harbor hover:underline">
                        Save
                      </button>
                    </form>
                  </td>
                  <td className="px-4 py-2.5 text-ink/40 text-xs font-mono">
                    {new Date(order.createdAt).toLocaleDateString("en-KE")}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}