"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Package, ArrowRight } from "lucide-react";
import { toast } from "sonner";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useAuth } from "@/context/AuthContext";
import { api, ApiError, type OrderListItem } from "@/lib/api";

const formatPkr = (amount: number) =>
  `Rs ${amount.toLocaleString("en-PK", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

export default function ClientOrdersPage() {
  const router = useRouter();
  const { user, token, isLoading: authLoading } = useAuth();
  const [orders, setOrders] = useState<OrderListItem[]>([]);
  const [page, setPage] = useState(1);
  const [meta, setMeta] = useState({ page: 1, limit: 20, total: 0, total_pages: 1 });
  const [loading, setLoading] = useState(true);

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

  const loadOrders = useCallback(async () => {
    if (!token || !user) {
      setLoading(false);
      return;
    }
    setLoading(true);
    try {
      const result = await api.checkout.listOrders({ page, limit: 20 }, token);
      setOrders(result.data || []);
      setMeta(result.meta);
    } catch (err) {
      toast.error(err instanceof ApiError ? err.message : "Failed to load your orders.");
      setOrders([]);
    } finally {
      setLoading(false);
    }
  }, [token, user, page]);

  useEffect(() => {
    void loadOrders();
  }, [loadOrders]);

  if (authLoading || !user) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <p className="p-10 text-center text-sm text-muted-foreground">Checking login…</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="container mx-auto px-4 py-10 lg:px-8">
        <div className="mb-8 flex flex-wrap items-end justify-between gap-3">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Account</p>
            <h1 className="mt-2 text-3xl font-bold">My Orders</h1>
            <p className="mt-2 text-sm text-muted-foreground">
              Track and review orders placed with your account.
            </p>
          </div>
          <Link
            href="/products"
            className="inline-flex items-center gap-2 rounded-xl bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground"
          >
            Continue shopping <ArrowRight className="h-4 w-4" />
          </Link>
        </div>

        {loading ? (
          <p className="py-16 text-center text-sm text-muted-foreground">Loading your orders…</p>
        ) : orders.length === 0 ? (
          <div className="flex flex-col items-center justify-center rounded-3xl border border-border bg-card px-6 py-20 text-center shadow-card">
            <Package className="h-10 w-10 text-muted-foreground/40" />
            <h2 className="mt-4 text-xl font-bold">No orders yet</h2>
            <p className="mt-2 text-sm text-muted-foreground">When you place an order, it will show up here.</p>
            <Link
              href="/products"
              className="mt-6 rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground"
            >
              Browse products
            </Link>
          </div>
        ) : (
          <div className="space-y-4">
            {orders.map((order) => (
              <Link
                key={order.id}
                href={`/orders/${order.id}`}
                className="block rounded-2xl border border-border bg-card p-5 shadow-card transition-all hover:border-primary/30 hover:shadow-card-hover"
              >
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="text-sm font-bold">Order #{order.id}</p>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {order.created_at ? new Date(order.created_at).toLocaleString() : "—"}
                    </p>
                    <p className="mt-2 text-sm text-muted-foreground">
                      {order.items_count} item{order.items_count === 1 ? "" : "s"} ·{" "}
                      {String(order.payment_method || "").toUpperCase()} · {order.city || "—"}
                    </p>
                  </div>
                  <div className="text-right">
                    <span className="inline-flex rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold capitalize text-primary">
                      {order.status}
                    </span>
                    <p className="mt-2 text-base font-bold">
                      {formatPkr(Number(order.summary?.total || 0))}
                    </p>
                  </div>
                </div>
              </Link>
            ))}

            <div className="flex items-center justify-between pt-2">
              <p className="text-xs text-muted-foreground">
                Page {meta.page} of {meta.total_pages}
              </p>
              <div className="flex gap-2">
                <button
                  type="button"
                  disabled={page <= 1}
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                  className="rounded-lg border border-border px-3 py-2 text-xs font-semibold disabled:opacity-50"
                >
                  Previous
                </button>
                <button
                  type="button"
                  disabled={page >= meta.total_pages}
                  onClick={() => setPage((p) => p + 1)}
                  className="rounded-lg border border-border px-3 py-2 text-xs font-semibold disabled:opacity-50"
                >
                  Next
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
}