import Link from "next/link";
import { BarChart3 } from "lucide-react";
import { COUNTRIES } from "@fetcha/core";
import { getWorkspace } from "@/lib/session";
import { formatMs, formatNumber, formatPercent } from "@/lib/format";
import { cn } from "@/lib/utils";
import { getCountries, getErrorBreakdown, getRequestSeries, getRequestStats, getSuccessByNetwork, getTopDomains, type Scope } from "@/lib/queries/dashboard";
import { PageHeader } from "@/components/ui/page-header";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { ChartFrame } from "@/components/dashboard/charts/chart-frame";
import { RequestsBarChart } from "@/components/dashboard/charts/requests-bar-chart";
import { LatencyLineChart } from "@/components/dashboard/charts/latency-line-chart";
import { HorizontalBarChart } from "@/components/dashboard/charts/horizontal-bar-chart";
import { CHART_COLORS, NETWORK_COLORS } from "@/components/dashboard/charts/chart-theme";

export const dynamic = "force-dynamic";

const RANGES = [
  { key: "24h", label: "24 hours", hours: 24, bucket: "hour" as const },
  { key: "7d", label: "7 days", hours: 24 * 7, bucket: "day" as const },
  { key: "30d", label: "30 days", hours: 24 * 30, bucket: "day" as const },
];

export default async function AnalyticsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const [ws, sp] = await Promise.all([getWorkspace(), searchParams]);
  const scope: Scope = { organizationId: ws.organization.id, projectId: ws.project.id };
  const rangeKey = Array.isArray(sp.range) ? sp.range[0] : sp.range;
  const range = RANGES.find((r) => r.key === rangeKey) ?? RANGES[1]!;
  const now = new Date();
  const from = range.bucket === "hour" ? new Date(now.getTime() - range.hours * 3_600_000) : new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - (range.hours / 24 - 1)));

  const [stats, series, byNetwork, domains, errors, countries] = await Promise.all([
    getRequestStats(scope, from),
    getRequestSeries(scope, from, range.bucket),
    getSuccessByNetwork(scope, from),
    getTopDomains(scope, from, 10),
    getErrorBreakdown(scope, from, 8),
    getCountries(scope, from, 10),
  ]);

  const hasData = stats.total > 0;
  const latencyHasData = series.some((p) => p.p50 !== null);

  return (
    <div className="flex flex-col gap-5">
      <PageHeader
        title="Analytics"
        description={`Routing performance for ${ws.project.name}. Times are UTC; latency is measured end to end from Fetcha's edge.`}
        actions={
          <nav className="inline-flex h-9 items-center gap-0.5 rounded-md bg-bg-muted p-1" aria-label="Range">
            {RANGES.map((r) => (
              <Link
                key={r.key}
                href={r.key === "7d" ? "/dashboard/analytics" : `/dashboard/analytics?range=${r.key}`}
                className={cn("inline-flex h-7 items-center rounded-[5px] px-3 text-[12.5px] font-medium transition-colors", r.key === range.key ? "bg-bg text-fg shadow-xs" : "text-fg-muted hover:text-fg")}
                aria-current={r.key === range.key ? "page" : undefined}
              >
                {r.label}
              </Link>
            ))}
          </nav>
        }
      />

      <StatGrid cols={5}>
        <Stat label="Requests" value={formatNumber(stats.total)} hint={`last ${range.label}`} />
        <Stat label="Success rate" value={stats.successRate === null ? "—" : formatPercent(stats.successRate)} hint={`${formatNumber(stats.failed)} failed`} />
        <Stat label="P50 latency" value={formatMs(stats.p50)} />
        <Stat label="P95 latency" value={formatMs(stats.p95)} />
        <Stat label="Attempts / request" value={stats.avgAttempts === null ? "—" : stats.avgAttempts.toFixed(2)} hint="1.00 = first route worked" />
      </StatGrid>

      {!hasData ? (
        <EmptyState
          icon={BarChart3}
          title={`No requests in the last ${range.label}`}
          description="Analytics fill in as soon as requests flow. Try a wider range, or send a request from the Playground."
          action={
            <>
              <Button asChild size="sm" variant="primary">
                <Link href="/dashboard/playground">Open Playground</Link>
              </Button>
              {range.key !== "30d" ? (
                <Button asChild size="sm" variant="outline">
                  <Link href="/dashboard/analytics?range=30d">Last 30 days</Link>
                </Button>
              ) : null}
            </>
          }
        />
      ) : null}

      <div className="grid gap-4 lg:grid-cols-2">
        <ChartFrame
          title="Requests over time"
          description={range.bucket === "hour" ? "Per hour, successful vs failed." : "Per day, successful vs failed."}
          empty={!hasData}
          table={{ columns: [range.bucket === "hour" ? "Hour (UTC)" : "Day", "Successful", "Failed"], rows: series.filter((p) => p.success + p.failed > 0).map((p) => [range.bucket === "hour" ? p.t.slice(0, 16).replace("T", " ") : p.t.slice(0, 10), p.success, p.failed]) }}
        >
          <RequestsBarChart data={series} bucket={range.bucket} height={220} />
        </ChartFrame>
        <ChartFrame
          title="Latency percentiles"
          description="P50 and P95 per bucket. Gaps mean no requests in that bucket."
          empty={!latencyHasData}
          table={{ columns: [range.bucket === "hour" ? "Hour (UTC)" : "Day", "P50", "P95"], rows: series.filter((p) => p.p50 !== null).map((p) => [range.bucket === "hour" ? p.t.slice(0, 16).replace("T", " ") : p.t.slice(0, 10), formatMs(p.p50), formatMs(p.p95)]) }}
        >
          <LatencyLineChart data={series} bucket={range.bucket} height={220} />
        </ChartFrame>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <ChartFrame
          title="Success rate by network class"
          description="Share of completed requests that succeeded, per resolved network. Only residential is live today."
          empty={!byNetwork.some((n) => n.requests > 0)}
          table={{ columns: ["Network", "Requests", "Success rate"], rows: byNetwork.map((n) => [n.network, n.requests, n.successRate === null ? "—" : formatPercent(n.successRate)]) }}
        >
          <HorizontalBarChart
            data={byNetwork.map((n) => ({ label: n.network === "isp" ? "ISP" : n.network[0]!.toUpperCase() + n.network.slice(1), value: n.successRate ?? 0, color: NETWORK_COLORS[n.network] ?? CHART_COLORS.accent, hint: `${formatNumber(n.requests)} requests` }))}
            max={100}
            format="percent"
            labelWidth={100}
          />
        </ChartFrame>
        <ChartFrame
          title="Failures by error code"
          description="Failed requests grouped by the error code returned to you."
          empty={errors.length === 0}
          emptyMessage={hasData ? "No failed requests in this period." : "No data for this period yet."}
          table={{ columns: ["Code", "Requests", "Share"], rows: errors.map((e) => [e.code, e.requests, formatPercent(e.percent, 1)]) }}
        >
          <HorizontalBarChart data={errors.map((e) => ({ label: e.code, value: e.requests, hint: `${formatPercent(e.percent, 1)} of failures` }))} color={CHART_COLORS.danger} format="number" labelWidth={168} />
        </ChartFrame>
      </div>

      <div className="grid gap-4 lg:grid-cols-5">
        <Card className="overflow-hidden lg:col-span-3">
          <div className="border-b border-border px-5 py-3">
            <h3 className="text-[14px] font-semibold tracking-tight">Top domains</h3>
            <p className="text-[12.5px] text-fg-muted">Most requested targets and how they behaved.</p>
          </div>
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Domain</TableHead>
                <TableHead className="text-right">Requests</TableHead>
                <TableHead className="text-right">Success</TableHead>
                <TableHead className="text-right">Avg latency</TableHead>
                <TableHead className="text-right">Blocked</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {domains.length === 0 ? (
                <TableEmpty colSpan={5}>No domains in this period.</TableEmpty>
              ) : (
                domains.map((d) => (
                  <TableRow key={d.domain}>
                    <TableCell className="max-w-[260px] truncate">
                      <Link href={`/dashboard/requests?range=${range.key}&domain=${encodeURIComponent(d.domain)}`} className="underline-offset-4 hover:underline" title={d.domain}>
                        {d.domain}
                      </Link>
                    </TableCell>
                    <TableCell className="text-right font-mono tabular">{formatNumber(d.requests)}</TableCell>
                    <TableCell className={cn("text-right font-mono tabular", d.successRate !== null && d.successRate < 80 && "text-warning")}>{d.successRate === null ? "—" : formatPercent(d.successRate, 1)}</TableCell>
                    <TableCell className="text-right font-mono tabular">{formatMs(d.avgLatencyMs)}</TableCell>
                    <TableCell className={cn("text-right font-mono tabular", d.blocked > 0 && "text-danger")}>{d.blocked || "—"}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Card>
        <Card className="overflow-hidden lg:col-span-2">
          <div className="border-b border-border px-5 py-3">
            <h3 className="text-[14px] font-semibold tracking-tight">Countries</h3>
            <p className="text-[12.5px] text-fg-muted">Requested exit country.</p>
          </div>
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Country</TableHead>
                <TableHead className="text-right">Requests</TableHead>
                <TableHead className="text-right">Success</TableHead>
                <TableHead className="text-right">Latency</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {countries.length === 0 ? (
                <TableEmpty colSpan={4}>No requests in this period.</TableEmpty>
              ) : (
                countries.map((c) => (
                  <TableRow key={c.country ?? "any"}>
                    <TableCell>
                      {c.country ? (
                        <span>
                          <span className="font-mono text-[12.5px] text-fg-subtle">{c.country}</span> {COUNTRIES[c.country] ?? ""}
                        </span>
                      ) : (
                        <span className="text-fg-muted">Any (not specified)</span>
                      )}
                    </TableCell>
                    <TableCell className="text-right font-mono tabular">{formatNumber(c.requests)}</TableCell>
                    <TableCell className="text-right font-mono tabular">{c.successRate === null ? "—" : formatPercent(c.successRate, 1)}</TableCell>
                    <TableCell className="text-right font-mono tabular">{formatMs(c.avgLatencyMs)}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Card>
      </div>
    </div>
  );
}