import { createFileRoute, Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { EmptyTable } from "@/components/ui/empty-state";
import { PageShell } from "@/components/app-shell/PageShell";
import {
  Loader2,
  Search,
  FileDown,
  ArrowUpDown,
  Download,
  Trash2,
} from "lucide-react";

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

function OrdersPage() {
  return (
    <PageShell
      title="Orders"
      subtitle="Manage imported eBay orders"
      right={
        <div className="flex flex-wrap items-center gap-2">
          <Button variant="outline">Search</Button>
          <Button>
            <Download className="mr-2 h-4 w-4" /> Export
          </Button>
        </div>
      }
    >
      <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">Orders imported for 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 variant="outline" size="sm">
              <Trash2 className="mr-2 h-4 w-4" /> Clear
            </Button>
          </div>
        </div>

        <div className="overflow-auto rounded-lg border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Account</TableHead>
                <TableHead>Order</TableHead>
                <TableHead>Buyer</TableHead>
                <TableHead>Items</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Total</TableHead>
                <TableHead>Date</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell colSpan={7} className="p-0">
                  <EmptyTable
                    title="No orders have been imported yet."
                    description="Connect your eBay account to begin synchronizing orders."
                    action={
                      <Link
                        to="/dashboard"
                        className="inline-flex h-9 items-center justify-center rounded-md border bg-background px-4 text-sm font-medium hover:bg-accent"
                      >
                        Go to Dashboard
                      </Link>
                    }
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>

        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="text-sm text-muted-foreground">Pagination & bulk actions will be wired in Phase 2.</div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm">Previous</Button>
            <Button variant="outline" size="sm">Next</Button>
          </div>
        </div>
      </Card>
    </PageShell>
  );
}