"use client";

import { useEffect, useState } from "react";
import type { Order, OrderStatus } from "@/data/types";
import { Reveal } from "@/components/motion/Reveal";
import { Stagger, StaggerItem } from "@/components/motion/Stagger";
import { formatDate, formatPrice } from "@/lib/format";
import { useToast } from "@/context/toast-context";

const statuses: OrderStatus[] = [
  "pending",
  "processing",
  "shipped",
  "delivered",
  "cancelled",
];

export default function AdminOrdersPage() {
  const [list, setList] = useState<Order[]>([]);
  const { toast } = useToast();

  useEffect(() => {
    void fetch("/api/orders?scope=all", { credentials: "include" })
      .then((res) => res.json())
      .then((data: { orders?: Order[] }) => setList(data.orders ?? []));
  }, []);

  const updateStatus = async (id: string, status: OrderStatus) => {
    const res = await fetch("/api/orders", {
      method: "PATCH",
      credentials: "include",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, status }),
    });
    if (!res.ok) {
      toast("Could not update status", "error");
      return;
    }
    setList((current) =>
      current.map((item) => (item.id === id ? { ...item, status } : item)),
    );
    toast(`${id} marked ${status}`);
  };

  return (
    <div>
      <Reveal>
        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
          Orders
        </h1>
        <p className="mt-2 text-sm text-muted">
          Stripe and card checkouts saved to the store database ({list.length}{" "}
          orders).
        </p>
      </Reveal>
      <div className="mt-6 space-y-4">
        {list.length === 0 ? (
          <Reveal>
            <p className="rounded-2xl border border-dashed border-border px-4 py-8 text-center text-sm text-muted">
              No orders yet. Complete a checkout on the storefront to populate
              this table.
            </p>
          </Reveal>
        ) : (
          <Stagger className="space-y-4">
          {list.map((order) => (
            <StaggerItem key={order.id}>
            <article
              className="rounded-2xl border border-border bg-card p-5 shadow-sm transition-colors"
            >
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div>
                  <p className="font-semibold text-foreground">{order.id}</p>
                  <p className="text-sm text-muted">
                    {order.customerName} · {order.email}
                  </p>
                  <p className="mt-1 text-xs text-muted">
                    {formatDate(order.date)} · {order.shippingAddress}
                  </p>
                  <p className="mt-1 text-xs uppercase tracking-wide text-muted">
                    Pay: {order.paymentMethod ?? "—"}
                    {order.paymentId ? ` · ${order.paymentId}` : ""}
                  </p>
                </div>
                <p className="text-lg font-semibold text-foreground">
                  {formatPrice(order.total)}
                </p>
              </div>

              <ul className="mt-4 space-y-1 border-t border-border pt-3 text-sm">
                {order.items.map((item) => (
                  <li
                    key={`${order.id}-${item.productId}-${item.variant}`}
                    className="flex justify-between gap-3 text-muted"
                  >
                    <span>
                      {item.name}
                      {item.variant ? ` · ${item.variant}` : ""} × {item.quantity}
                    </span>
                    <span className="tabular-nums text-foreground">
                      {formatPrice(item.price * item.quantity)}
                    </span>
                  </li>
                ))}
              </ul>

              <div className="mt-4 flex flex-wrap items-center gap-3">
                <label className="text-sm text-muted">Status</label>
                <select
                  value={order.status}
                  onChange={(event) => {
                    void updateStatus(
                      order.id,
                      event.target.value as OrderStatus,
                    );
                  }}
                  className="h-10 rounded-full border border-border bg-background px-3 text-sm"
                >
                  {statuses.map((status) => (
                    <option key={status} value={status}>
                      {status}
                    </option>
                  ))}
                </select>
              </div>
            </article>
            </StaggerItem>
          ))}
          </Stagger>
        )}
      </div>
    </div>
  );
}