import { createFileRoute } from "@tanstack/react-router";
import { PageShell } from "@/components/app-shell/PageShell";
import { Card } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { EmptyTable } from "@/components/ui/empty-state";
import { Badge } from "@/components/ui/badge";

export const Route = createFileRoute("/_authenticated/inventory")({
  head: () => ({ meta: [{ title: "Inventory — eBay BOS" }] }),
  component: InventoryPage,
});

function InventoryPage() {
  return (
    <PageShell title="Inventory" subtitle="Stock levels and availability">
      <Card className="rounded-xl border bg-card p-4">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-2">
            <Badge variant="secondary">Viewing</Badge>
            <span className="text-sm text-muted-foreground">Inventory across selected account(s)</span>
          </div>
        </div>

        <div className="overflow-auto rounded-lg border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Account</TableHead>
                <TableHead>SKU</TableHead>
                <TableHead>Stock</TableHead>
                <TableHead>Reserved</TableHead>
                <TableHead>Available</TableHead>
                <TableHead>Location</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell colSpan={7} className="p-0">
                  <EmptyTable
                    title="No inventory data available."
                    description="Connect your eBay accounts to begin receiving inventory updates."
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </Card>
    </PageShell>
  );
}