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/returns")({
  head: () => ({ meta: [{ title: "Returns — eBay BOS" }] }),
  component: ReturnsPage,
});

function ReturnsPage() {
  return (
    <PageShell title="Returns" subtitle="Track return status and updates">
      <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">Returns across selected account(s)</span>
          </div>
        </div>

        <div className="overflow-auto rounded-lg border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Account</TableHead>
                <TableHead>Buyer</TableHead>
                <TableHead>Reason</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Opened</TableHead>
                <TableHead>Updated</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell colSpan={6} className="p-0">
                  <EmptyTable
                    title="No returns have been opened yet."
                    description="Returns will appear here once imported from your connected eBay accounts."
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </Card>
    </PageShell>
  );
}