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";
import { Button } from "@/components/ui/button";
import { ArrowUpDown, Download } from "lucide-react";

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

function ListingsPage() {
  return (
    <PageShell title="Listings" subtitle="Manage eBay listings">
      <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">Listings across the selected account(s)</span>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <Button variant="outline" size="sm">
              <ArrowUpDown className="mr-2 h-4 w-4" /> Sort
            </Button>
            <Button size="sm">
              <Download className="mr-2 h-4 w-4" /> Export
            </Button>
          </div>
        </div>

        <div className="overflow-auto rounded-lg border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Account</TableHead>
                <TableHead>Title</TableHead>
                <TableHead>SKU</TableHead>
                <TableHead>Quantity</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Marketplace</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell colSpan={7} className="p-0">
                  <EmptyTable
                    title="No listings are available."
                    description="Connect your first eBay account to begin synchronizing listings."
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </Card>
    </PageShell>
  );
}