"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

type OrderRow = {
  _id: string;
  orderNumber: string;
  status: string;
  grandTotal: number;
  createdAt?: string;
  user?: { firstName?: string; lastName?: string; username?: string };
};

const STATUSES = ["pending", "processing", "shipped", "delivered", "cancelled"] as const;

export default function ShopOrdersAdmin() {
  const ready = useRequireSuperAdmin();
  const params = useParams();
  const app = params.app as string;

  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState<OrderRow[]>([]);
  const [busyId, setBusyId] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      const res = await DataService.get("/admin/shop-orders");
      setRows(res.data?.data || []);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load orders"));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (ready) load();
  }, [ready, load]);

  const setStatus = async (id: string, status: string) => {
    try {
      setBusyId(id);
      await DataService.patch(`/admin/shop-orders/${id}`, { status });
      toast.success("Order updated");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not update order"));
    } finally {
      setBusyId(null);
    }
  };

  if (!ready || loading) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Loading…</div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <MainTitle title="Shop orders" />
        <Button type="button" variant="outline" size="sm" onClick={() => load()}>
          Refresh
        </Button>
      </div>
      <div className="rounded-md border bg-white">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Order</TableHead>
              <TableHead>Customer</TableHead>
              <TableHead>Total</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Date</TableHead>
              <TableHead className="w-[90px]" />
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center text-gray-400">
                  No orders yet.
                </TableCell>
              </TableRow>
            ) : (
              rows.map((o) => (
                <TableRow key={o._id}>
                  <TableCell className="font-mono text-sm">{o.orderNumber}</TableCell>
                  <TableCell>
                    {o.user
                      ? [o.user.firstName, o.user.lastName].filter(Boolean).join(" ") ||
                        o.user.username ||
                        "—"
                      : "—"}
                  </TableCell>
                  <TableCell>{Number(o.grandTotal).toFixed(2)}</TableCell>
                  <TableCell>
                    <Select
                      value={o.status}
                      disabled={busyId === o._id}
                      onValueChange={(v) => setStatus(o._id, v)}
                    >
                      <SelectTrigger className="w-[140px]">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {STATUSES.map((s) => (
                          <SelectItem key={s} value={s}>
                            {s}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">
                    {o.createdAt ? new Date(o.createdAt).toLocaleString() : "—"}
                  </TableCell>
                  <TableCell>
                    <Button asChild size="sm" variant="outline">
                      <Link href={`/${app}/admin/shop-orders/${o._id}`}>View</Link>
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
      <p className="text-sm text-gray-500">
        Setting status to <strong>cancelled</strong> returns ordered quantities to product stock
        automatically.
      </p>
    </div>
  );
}