"use client";

import { useRouter } from "next/navigation";
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  Eye,
  Ellipsis,
  Pencil,
  Ban,
} from "lucide-react";
import {
  OrderStatusBadge,
  PaymentStatusBadge,
  FulfillmentStatusBadge,
} from "./order-status-badge";
import { formatCurrency, formatDateTime } from "../lib/format-utils";
import type { Order } from "../types";

interface OrdersTableProps {
  orders: Order[];
  page: number;
  pageSize: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  onPageSizeChange: (pageSize: number) => void;
  onUpdateStatus: (order: Order) => void;
  onCancelOrder: (order: Order) => void;
}



export default function OrdersTable({
  orders,
  page,
  pageSize,
  totalPages,
  onPageChange,
  onPageSizeChange,
}: OrdersTableProps) {
  const router = useRouter();

  if (orders.length === 0) {
    return null; // Empty state is handled by the parent so it can offer reset.
  }

  const paginatedOrders = orders.slice((page - 1) * pageSize, page * pageSize);

  return (
    <div className="space-y-4">
      <div className="rounded-lg border bg-card">
        <Table className="w-full min-w-[880px]">
          <TableHeader>
            <TableRow>
              <TableHead className="w-[120px]">Order</TableHead>
              <TableHead className="min-w-[200px]">Customer</TableHead>
              <TableHead className="min-w-[220px]">Products</TableHead>
              <TableHead className="text-right">Total</TableHead>
              <TableHead>Payment</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="hidden xl:table-cell">Created</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {paginatedOrders.map((order) => (
              <TableRow
                key={order.id}
                className="cursor-pointer group/row"
                onClick={() =>
                  router.push(`/admin/dashboard/orders/${order.id}`)
                }
                data-href={`/admin/dashboard/orders/${order.id}`}
              >
                <TableCell>
                  <span className="text-sm font-medium text-primary">
                    {order.orderNumber}
                  </span>
                  <span className="block text-xs text-muted-foreground xl:hidden">
                    {formatDateTime(order.date)}
                  </span>
                </TableCell>

                <TableCell>
                  <span className="font-medium text-foreground">
                    {order.customer.name}
                  </span>
                  <span className="block max-w-52 truncate text-xs text-muted-foreground">
                    {order.customer.email}
                  </span>
                </TableCell>

                <TableCell>
                  <div className="flex min-w-0 items-center gap-3">
                    <img
                      src={order.items[0]?.image}
                      alt=""
                      className="size-9 shrink-0 rounded-md border bg-muted object-cover"
                    />
                    <div className="min-w-0">
                      <p className="truncate text-sm font-medium">
                        {order.items[0]?.name}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {order.items[0]?.variant}
                        {order.items.length > 1 && (
                          <span className="ml-1.5 rounded bg-muted px-1.5 py-px font-medium">
                            +{order.items.length - 1} more
                          </span>
                        )}
                      </p>
                    </div>
                  </div>
                </TableCell>

                <TableCell className="text-right font-mono font-medium">
                  {formatCurrency(order.grandTotal)}
                </TableCell>

                <TableCell>
                  <PaymentStatusBadge status={order.payment.status} />
                </TableCell>

                <TableCell>
                  <div className="flex flex-col items-start gap-1">
                    <OrderStatusBadge status={order.status} />
                    <FulfillmentStatusBadge
                      status={order.fulfillmentStatus}
                      className="opacity-80"
                    />
                  </div>
                </TableCell>

                <TableCell className="hidden whitespace-nowrap xl:table-cell">
                  <span className="text-sm">{formatDateTime(order.date)}</span>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
        <span className="text-sm text-muted-foreground">
          Showing{" "}
          <span className="font-medium">
            {orders.length === 0 ? 0 : (page - 1) * pageSize + 1}–
            {Math.min(page * pageSize, orders.length)}
          </span>{" "}
          of <span className="font-medium">{orders.length}</span> orders
        </span>

        <div className="flex flex-wrap items-center gap-2">
          <Select
            items={[10, 25, 50, 100].map((size) => ({
              value: size.toString(),
              label: `${size} per page`,
            }))}
            value={pageSize.toString()}
            onValueChange={(val) => onPageSizeChange(Number(val))}
          >
            <SelectTrigger className="h-8 w-[7.5rem]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {[10, 25, 50, 100].map((size) => (
                <SelectItem key={size} value={size.toString()}>
                  {size} per page
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          <div className="flex items-center gap-1">
            <Button
              variant="outline"
              size="icon"
              onClick={() => onPageChange(1)}
              disabled={page === 1}
              aria-label="First page"
            >
              <ChevronsLeft />
            </Button>
            <Button
              variant="outline"
              size="icon"
              onClick={() => onPageChange(page - 1)}
              disabled={page === 1}
              aria-label="Previous page"
            >
              <ChevronLeft />
            </Button>
            <span className="flex items-center px-3 text-sm font-medium">
              Page {page} of {totalPages}
            </span>
            <Button
              variant="outline"
              size="icon"
              onClick={() => onPageChange(page + 1)}
              disabled={page === totalPages}
              aria-label="Next page"
            >
              <ChevronRight />
            </Button>
            <Button
              variant="outline"
              size="icon"
              onClick={() => onPageChange(totalPages)}
              disabled={page === totalPages}
              aria-label="Last page"
            >
              <ChevronsRight />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}