import { createFileRoute, Link } from "@tanstack/react-router";
import { PageShell } from "@/components/app-shell/PageShell";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import { Activity, LineChart } from "lucide-react";
import { Button } from "@/components/ui/button";

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

function AnalyticsPage() {
  return (
    <PageShell title="Analytics" subtitle="Performance overview">
      <div className="grid gap-4 lg:grid-cols-[1fr,360px]">
        <div className="space-y-4">
          <Card className="rounded-xl border bg-card p-4">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div>
                <h2 className="text-sm font-semibold">Sales graphs container</h2>
                <p className="mt-1 text-xs text-muted-foreground">Revenue and orders over time</p>
              </div>
              <Badge variant="secondary">Combined</Badge>
            </div>
            <div className="mt-4 rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
              No production charts yet. Charts will render once Phase 2 live data is connected.
            </div>
          </Card>

          <Card className="rounded-xl border bg-card p-4">
            <h2 className="text-sm font-semibold">Revenue graphs</h2>
            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
                Revenue graph (Phase 2)
              </div>
              <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
                Orders graph (Phase 2)
              </div>
            </div>
          </Card>
        </div>

        <div className="space-y-4">
          <Card className="rounded-xl border bg-card p-4">
            <h2 className="text-sm font-semibold">Performance cards</h2>
            <div className="mt-4 grid gap-3">
              {["Conversion rate", "AOV", "Return rate"].map((t) => (
                <div key={t} className="rounded-xl border bg-muted/20 p-4">
                  <div className="text-xs text-muted-foreground">{t}</div>
                  <div className="mt-2 text-2xl font-bold">—</div>
                </div>
              ))}
            </div>
          </Card>

          <Card className="rounded-xl border bg-card p-4">
            <EmptyState
              icon={Activity}
              title="Analytics empty state"
              description="Connect eBay accounts to begin syncing analytics data."
              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"
                >
                  Connect eBay Account
                </Link>
              }
            />
          </Card>

          <div className="flex items-center justify-between gap-3">
            <Button variant="outline">Date selector</Button>
            <Button>Export</Button>
          </div>
        </div>
      </div>
    </PageShell>
  );
}