"use client";

import { useCallback, useEffect, useState } from "react";
import {
  PageHeader,
  StatCard,
  Panel,
  AdminButton,
  StatusBadge,
  FilterBar,
  SearchInput,
  SelectFilter,
  EmptyState,
} from "@/components/admin/ui";
import { formatCurrency } from "@/components/admin/adminNav";
import { useAuth } from "@/context/AuthContext";
import { api, ApiError, type OrderListItem } from "@/lib/api";
import { toast } from "sonner";

const STATUS_OPTIONS = [
  { value: "all", label: "All statuses" },
  { value: "checkout", label: "Checkout" },
  { value: "pending", label: "Pending" },
  { value: "paid", label: "Paid" },
  { value: "processing", label: "Processing" },
  { value: "shipped", label: "Shipped" },
  { value: "delivered", label: "Delivered" },
  { value: "cancelled", label: "Cancelled" },
];

export default function AdminOrdersPage() {
  const { token } = useAuth();
  const [orders, setOrders] = useState<OrderListItem[]>([]);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [page, setPage] = useState(1);
  const [meta, setMeta] = useState({ page: 1, limit: 20, total: 0, total_pages: 1 });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const loadOrders = useCallback(async () => {
    if (!token) {
      setLoading(false);
      setError("Please login as admin to view orders.");
      return;
    }
    setLoading(true);
    setError("");
    try {
      const result = await api.checkout.listOrders(
        {
          page,
          limit: 20,
          status: statusFilter === "all" ? undefined : statusFilter,
          q: search.trim() || undefined,
        },
        token,
      );
      setOrders(result.data || []);
      setMeta(result.meta);
    } catch (err) {
      const message = err instanceof ApiError ? err.message : "Failed to load orders.";
      setError(message);
      toast.error(message);
      setOrders([]);
    } finally {
      setLoading(false);
    }
  }, [token, page, statusFilter, search]);

  useEffect(() => {
    const t = window.setTimeout(() => {
      void loadOrders();
    }, 250);
    return () => window.clearTimeout(t);
  }, [loadOrders]);

  const stats = {
    total: meta.total,
    pending: orders.filter((o) => ["pending", "checkout"].includes(o.status.toLowerCase())).length,
    paid: orders.filter((o) => o.status.toLowerCase() === "paid").length,
    pageCount: orders.length,
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Orders"
        description="Manage customer orders, payments, and shipping."
        actions={<AdminButton onClick={() => void loadOrders()} variant="secondary">Refresh</AdminButton>}
      />

      {error ? (
        <div className="rounded-xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
          {error}
        </div>
      ) : null}

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Total Orders" value={stats.total} />
        <StatCard label="On This Page" value={stats.pageCount} tone="info" />
        <StatCard label="Pending / Checkout" value={stats.pending} tone="warning" />
        <StatCard label="Paid (page)" value={stats.paid} tone="success" />
      </div>

      <Panel title="Order List">
        <FilterBar>
          <SearchInput
            value={search}
            onChange={(value) => {
              setPage(1);
              setSearch(value);
            }}
            placeholder="Search email, order id, payment…"
          />
          <SelectFilter
            value={statusFilter}
            onChange={(value) => {
              setPage(1);
              setStatusFilter(value);
            }}
            options={STATUS_OPTIONS}
          />
        </FilterBar>

        {loading ? (
          <p className="py-10 text-center text-sm text-muted-foreground">Loading orders…</p>
        ) : orders.length === 0 ? (
          <EmptyState title="No orders found" description="Try a different search or status filter." />
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full min-w-[980px] text-left text-sm">
                <thead>
                  <tr className="border-b border-border text-xs uppercase tracking-wide text-muted-foreground">
                    <th className="pb-2 font-semibold">Order</th>
                    <th className="pb-2 font-semibold">Customer</th>
                    <th className="pb-2 font-semibold">Contact</th>
                    <th className="pb-2 font-semibold">Payment</th>
                    <th className="pb-2 font-semibold">Status</th>
                    <th className="pb-2 font-semibold">Items</th>
                    <th className="pb-2 font-semibold">Total</th>
                    <th className="pb-2 font-semibold">Date</th>
                    <th className="pb-2 font-semibold">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {orders.map((order) => (
                    <tr key={order.id} className="border-b border-border/60 align-top">
                      <td className="py-3 font-semibold">#{order.id}</td>
                      <td className="py-3">
                        <p className="font-medium">{order.customer_name || "—"}</p>
                        <p className="text-xs text-muted-foreground">{order.city || "—"}</p>
                      </td>
                      <td className="py-3">
                        <p>{order.contact_email}</p>
                        <p className="text-xs text-muted-foreground">{order.phone || "—"}</p>
                      </td>
                      <td className="py-3 uppercase">{order.payment_method}</td>
                      <td className="py-3">
                        <StatusBadge status={order.status} />
                      </td>
                      <td className="py-3">{order.items_count}</td>
                      <td className="py-3 font-semibold">
                        {formatCurrency(order.summary?.total || 0)}
                      </td>
                      <td className="py-3 text-muted-foreground">
                        {order.created_at ? new Date(order.created_at).toLocaleString() : "—"}
                      </td>
                      <td className="py-3">
                        <AdminButton href={`/admin/orders/${order.id}`} variant="secondary">
                          View
                        </AdminButton>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
              <p className="text-xs text-muted-foreground">
                Page {meta.page} of {meta.total_pages} · {meta.total} orders
              </p>
              <div className="flex gap-2">
                <AdminButton
                  variant="secondary"
                  disabled={page <= 1}
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                >
                  Previous
                </AdminButton>
                <AdminButton
                  variant="secondary"
                  disabled={page >= meta.total_pages}
                  onClick={() => setPage((p) => p + 1)}
                >
                  Next
                </AdminButton>
              </div>
            </div>
          </>
        )}
      </Panel>
    </div>
  );
}