"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { PageShell } from "@/components/layout/PageShell";
import { Reveal } from "@/components/motion/Reveal";
import { useAuth } from "@/context/auth-context";
import type { Order } from "@/data/types";
import { formatDate, formatPrice } from "@/lib/format";

export default function OrderHistoryPage() {
  const { user, loading } = useAuth();
  const router = useRouter();
  const [orders, setOrders] = useState<Order[]>([]);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    if (!loading && !user) router.replace("/login");
  }, [user, loading, router]);

  useEffect(() => {
    if (!user) return;
    void fetch("/api/orders", { credentials: "include" })
      .then((res) => res.json())
      .then((data: { orders?: Order[] }) => setOrders(data.orders ?? []))
      .finally(() => setReady(true));
  }, [user]);

  if (loading || !user || !ready) {
    return (
      <div className="flex min-h-[40vh] items-center justify-center text-sm text-muted">
        Loading orders…
      </div>
    );
  }

  return (
    <PageShell
      crumbs={[
        { label: "Home", href: "/" },
        { label: "Account", href: "/account" },
        { label: "Orders" },
      ]}
      eyebrow="Orders"
      title="Order history"
      description="Purchases saved in MariaDB for your account."
    >
      {orders.length === 0 ? (
        <p className="rounded-2xl border border-dashed border-border bg-card px-4 py-10 text-center text-sm text-muted">
          You have not placed any orders yet.
        </p>
      ) : (
        <ul className="space-y-4">
          {orders.map((order, index) => (
            <Reveal key={order.id} delay={index * 0.04}>
              <li className="rounded-[1.25rem] border border-border bg-card p-5">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="font-semibold tracking-tight">{order.id}</p>
                    <p className="text-sm capitalize text-muted">
                      {formatDate(order.date)} · {order.status}
                    </p>
                  </div>
                  <p className="font-semibold tabular-nums">
                    {formatPrice(order.total)}
                  </p>
                </div>
                <ul className="mt-4 space-y-2 border-t border-border pt-4 text-sm">
                  {order.items.map((item) => (
                    <li
                      key={`${order.id}-${item.productId}-${item.variant}`}
                      className="flex justify-between gap-3"
                    >
                      <span className="text-muted">
                        {item.name}
                        {item.variant ? ` · ${item.variant}` : ""} ×{" "}
                        {item.quantity}
                      </span>
                      <span className="tabular-nums">
                        {formatPrice(item.price * item.quantity)}
                      </span>
                    </li>
                  ))}
                </ul>
                <p className="mt-3 text-xs text-muted">{order.shippingAddress}</p>
              </li>
            </Reveal>
          ))}
        </ul>
      )}
    </PageShell>
  );
}