Table

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cronus-ui/ui";
import { Download, MoreHorizontal } from "lucide-react";
import { ORDERS } from "../lib/demo-store.js";

type OrderStatus = "Delivered" | "In transit" | "Processing" | "Refunded";

interface StoreOrder {
  id: string;
  date: string;
  items: string;
  total: string;
  status: OrderStatus;
}

// Item count is a derived label ("4 items" / "1 item"), summed from the shared
// demo-store ORDERS line quantities.
function itemsLabel(items: { qty: number }[]): string {
  const count = items.reduce((sum, item) => sum + item.qty, 0);
  return `${count} ${count === 1 ? "item" : "items"}`;
}

// Derive the orders table from the shared demo-store ORDERS — the same ids,
// dates, totals and statuses the cards, tracking and invoice surfaces show.
const storeOrders: StoreOrder[] = ORDERS.map((order) => ({
  id: order.id,
  date: order.date,
  items: itemsLabel(order.items),
  total: order.total,
  status: order.status,
}));

function orderStatusVariant(status: OrderStatus) {
  if (status === "Delivered") return "success" as const;
  if (status === "In transit") return "info" as const;
  if (status === "Processing") return "warning" as const;
  return "secondary" as const;
}

export function OrderHistoryTableBlock() {
  return (
    <Card
      role="region"
      aria-label="Order history"
      className="mx-auto w-full max-w-4xl gap-0 pb-0 shadow-md"
    >
      <CardHeader>
        <CardTitle className="font-display text-lg">Order history</CardTitle>
        <p className="col-span-full text-sm text-fg-secondary">
          Your purchases from the last 90 days.
        </p>
      </CardHeader>
      <CardContent className="px-0 pt-2">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="ps-4 sm:ps-6">Order</TableHead>
              <TableHead>Date</TableHead>
              <TableHead className="hidden sm:table-cell">Items</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-end">Total</TableHead>
              <TableHead className="pe-4 text-end sm:pe-6">
                <span className="sr-only">Actions</span>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {storeOrders.map((order) => (
              <TableRow key={order.id}>
                <TableCell className="ps-4 font-medium text-fg sm:ps-6">{order.id}</TableCell>
                <TableCell className="text-fg-secondary">{order.date}</TableCell>
                <TableCell className="hidden text-fg-secondary sm:table-cell">
                  {order.items}
                </TableCell>
                <TableCell>
                  <Badge variant={orderStatusVariant(order.status)}>{order.status}</Badge>
                </TableCell>
                <TableCell className="text-end font-medium text-fg">{order.total}</TableCell>
                <TableCell className="pe-4 text-end sm:pe-6">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon-sm">
                        <MoreHorizontal className="size-4" aria-hidden="true" />
                        <span className="sr-only">Actions for order {order.id}</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem>View order</DropdownMenuItem>
                      <DropdownMenuItem>Track shipment</DropdownMenuItem>
                      <DropdownMenuItem>
                        <Download className="size-4" aria-hidden="true" />
                        Download invoice
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>Request a return</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}