"use client";

import { useCallback, useEffect, useState } from "react";
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 ReturnRow = {
  _id: string;
  reason: string;
  status: string;
  adminNote?: string;
  createdAt?: string;
  user?: { firstName?: string; lastName?: string; email?: string; username?: string };
  order?: { orderNumber?: string; grandTotal?: number; _id?: string } | null;
};

const STATUSES = ["requested", "approved", "rejected", "refunded"] as const;

export default function ShopReturnsAdmin() {
  const ready = useRequireSuperAdmin();
  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState<ReturnRow[]>([]);
  const [busyId, setBusyId] = useState<string | null>(null);

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

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

  const setStatus = async (id: string, status: string) => {
    try {
      setBusyId(id);
      await DataService.patch(`/admin/shop-returns/${id}`, { status });
      toast.success("Return updated");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not update"));
    } 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 returns & refunds" />
        <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>Reason</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Date</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center text-gray-400">
                  No return requests.
                </TableCell>
              </TableRow>
            ) : (
              rows.map((r) => (
                <TableRow key={r._id}>
                  <TableCell className="font-mono text-sm">
                    {r.order?.orderNumber || "—"}
                    {r.order?.grandTotal != null ? (
                      <span className="block text-xs text-gray-500">
                        {Number(r.order.grandTotal).toFixed(2)}
                      </span>
                    ) : null}
                  </TableCell>
                  <TableCell>
                    {[r.user?.firstName, r.user?.lastName].filter(Boolean).join(" ") ||
                      r.user?.username ||
                      r.user?.email ||
                      "—"}
                  </TableCell>
                  <TableCell className="max-w-xs truncate text-sm">{r.reason}</TableCell>
                  <TableCell>
                    <Select
                      value={r.status}
                      disabled={busyId === r._id}
                      onValueChange={(v) => setStatus(r._id, v)}
                    >
                      <SelectTrigger className="w-[150px]">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {STATUSES.map((s) => (
                          <SelectItem key={s} value={s}>
                            {s}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">
                    {r.createdAt ? new Date(r.createdAt).toLocaleString() : "—"}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
      <p className="text-sm text-gray-500">
        Setting status to <strong>refunded</strong> marks the order payment as refunded and emails the
        customer.
      </p>
    </div>
  );
}