"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { BarChart3, Download, Info, Menu, RefreshCw } from "lucide-react";
import { PageHeader, EmptyState, Skeleton } from "@/components/ui/misc";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { useApp } from "@/components/app/store";
import { useApi } from "@/lib/client/api";
import { providerName } from "@/lib/client/providers";
import { formatUsd, formatNumber, cn } from "@/lib/utils";
import { errorMessage } from "@/lib/client/humanize";
import { isProviderId } from "@/lib/ai/core/types";
import type { ProviderId } from "@/lib/client/types";
import { ChartCard, Legend, providerColor, type ModelRow } from "./charts";
import { CostOverTime, RequestsOverTime, TokensOverTime, ProviderDonut, ModelBars, LatencyByModel } from "./lazy-charts";
import { KpiGrid, KpiSkeleton } from "./kpi-tiles";
import { RangePicker, FilterChips, ActiveFilters, DEFAULT_QUERY, rangeLabel, type UsageQueryState } from "./usage-filters";
import { ProjectionCard, SavingsCard } from "./insight-cards";
import { RecentActivity } from "./recent-activity";
import type { UsageSummary, UsageRangeKey } from "./types";

const RANGE_KEYS: UsageRangeKey[] = ["today", "7d", "30d", "90d", "custom", "all"];

function readQuery(sp: URLSearchParams | null): UsageQueryState {
  if (!sp) return DEFAULT_QUERY;
  const r = sp.get("range");
  const provider = sp.get("provider") ?? "";
  return {
    range: r && (RANGE_KEYS as string[]).includes(r) ? (r as UsageRangeKey) : DEFAULT_QUERY.range,
    from: sp.get("from") ?? "",
    to: sp.get("to") ?? "",
    provider: isProviderId(provider) ? provider : "",
    modelKey: sp.get("modelKey") ?? "",
    projectId: sp.get("projectId") ?? "",
  };
}

function toSearch(q: UsageQueryState, tz: string): string {
  const sp = new URLSearchParams();
  sp.set("range", q.range);
  if (q.range === "custom") {
    if (q.from) sp.set("from", q.from);
    if (q.to) sp.set("to", q.to);
  }
  if (q.provider) sp.set("provider", q.provider);
  if (q.modelKey) sp.set("modelKey", q.modelKey);
  if (q.projectId) sp.set("projectId", q.projectId);
  sp.set("tz", tz);
  return sp.toString();
}

export function UsageDashboard() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { modelsByKey, labels, setSidebarOpen } = useApp();
  const tz = React.useMemo(() => Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC", []);
  const [query, setQueryState] = React.useState<UsageQueryState>(() => readQuery(searchParams));

  const setQuery = React.useCallback(
    (patch: Partial<UsageQueryState>) => {
      const next = { ...query, ...patch };
      setQueryState(next);
      // Keep the URL shareable (deep links from model pages / palette); tz is derived client-side.
      const sp = new URLSearchParams(toSearch(next, tz));
      sp.delete("tz");
      router.replace(`/app/usage?${sp.toString()}`, { scroll: false });
    },
    [query, router, tz],
  );

  const search = toSearch(query, tz);
  const q = useApi<UsageSummary>(`/api/usage?${search}`, { keepPreviousData: true, revalidateOnFocus: true });
  const data = q.data;
  const hourly = data?.range.bucket === "hour";

  const modelLabel = React.useCallback(
    (key: string) => {
      const m = modelsByKey.get(key);
      return labels[key] ?? m?.displayName ?? (key.startsWith("custom/") ? key.split(":").slice(1).join(":") : key.split("/").slice(1).join("/") || key);
    },
    [modelsByKey, labels],
  );

  const modelRows = React.useMemo<ModelRow[]>(
    () =>
      (data?.byModel ?? []).map((m) => ({
        modelKey: m.modelKey,
        provider: m.provider,
        label: modelLabel(m.modelKey),
        requests: m.requests,
        costUsd: m.costUsd,
        inputTokens: m.inputTokens,
        outputTokens: m.outputTokens,
        tokensPerSec: m.tokensPerSec,
        avgLatencyMs: m.avgLatencyMs,
        avgTtftMs: m.avgTtftMs,
        failures: m.failures,
      })),
    [data?.byModel, modelLabel],
  );

  const providersUsed = React.useMemo(() => (data?.byProvider ?? []).filter((p) => p.requests > 0).map((p) => p.provider), [data?.byProvider]);
  const empty = data ? data.kpis.requests === 0 : false;
  const hasFilters = Boolean(query.provider || query.modelKey || query.projectId);
  const exportHref = `/api/usage/export.csv?${search}`;

  const header = (
    <>
      {/* Phone: compact 48 px bar */}
      <div className="sticky top-0 z-20 -mx-4 flex h-12 items-center gap-1 border-b border-hairline bg-bg/90 px-2 backdrop-blur md:hidden">
        <Button variant="ghost" size="icon-lg" aria-label="Open menu" onClick={() => setSidebarOpen(true)}>
          <Menu />
        </Button>
        <h1 className="flex-1 truncate text-[16px] font-semibold tracking-tight">Usage</h1>
        <Button variant="ghost" size="icon-lg" aria-label="Refresh" onClick={() => void q.mutate()} disabled={q.isValidating}>
          <RefreshCw className={cn(q.isValidating && "animate-spin")} />
        </Button>
        <Button variant="ghost" size="icon-lg" aria-label="Export CSV" asChild>
          <a href={exportHref} download>
            <Download />
          </a>
        </Button>
      </div>
      {/* Desktop */}
      <div className="hidden md:block">
        <PageHeader
          title="Usage"
          description={
            <span className="inline-flex flex-wrap items-center gap-1.5">
              Requests, tokens, latency and estimated spend across your providers.
              <Tooltip content="Costs are estimates computed from public list prices at request time. Your provider's invoice is the source of truth; cached and batch discounts may differ.">
                <span className="inline-flex cursor-help items-center gap-1 text-fg-subtle underline decoration-dotted underline-offset-2">
                  <Info className="size-3.5" /> Costs are estimates
                </span>
              </Tooltip>
            </span>
          }
          actions={
            <>
              <Button variant="ghost" size="sm" onClick={() => void q.mutate()} loading={q.isValidating && Boolean(data)}>
                <RefreshCw /> Refresh
              </Button>
              <Button variant="outline" size="sm" asChild>
                <a href={exportHref} download>
                  <Download /> Export CSV
                </a>
              </Button>
            </>
          }
        />
      </div>
    </>
  );

  return (
    <main className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
      <div className="mx-auto w-full max-w-7xl px-4 pb-8 md:py-6 md:px-6 lg:px-8">
        {header}

        {/* One filter row scopes every chart below it */}
        <div className="mt-3 space-y-3 md:mt-5">
          <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
            <div className="-mx-4 overflow-x-auto px-4 scrollbar-none md:mx-0 md:overflow-visible md:px-0">
              <RangePicker value={query} onChange={setQuery} compact />
            </div>
            {data ? (
              <p className="text-[11px] text-fg-subtle md:text-right">
                {rangeLabel(query)} · {hourly ? "hourly" : "daily"} · {data.range.tz}
              </p>
            ) : null}
          </div>
          <FilterChips value={query} onChange={setQuery} facets={data?.facets ?? null} modelLabel={modelLabel} />
          <ActiveFilters value={query} onChange={setQuery} modelLabel={modelLabel} projects={data?.facets.projects ?? []} />
        </div>

        {q.error ? (
          <div className="mt-6">
            <EmptyState title="Could not load usage" description={errorMessage(q.error)} action={<Button size="sm" variant="outline" onClick={() => void q.mutate()}>Retry</Button>} />
          </div>
        ) : !data ? (
          <div className="mt-5 space-y-4" aria-busy="true" aria-label="Loading usage">
            <KpiSkeleton />
            <div className="grid gap-3 lg:grid-cols-2">
              <Skeleton className="h-[260px] rounded-xl" />
              <Skeleton className="h-[260px] rounded-xl" />
            </div>
            <div className="grid gap-3 lg:grid-cols-3">
              <Skeleton className="h-[220px] rounded-xl" />
              <Skeleton className="h-[220px] rounded-xl" />
              <Skeleton className="h-[220px] rounded-xl" />
            </div>
          </div>
        ) : empty ? (
          <div className="mt-6">
            <EmptyState
              icon={<BarChart3 />}
              title={hasFilters ? "No requests match these filters" : query.range === "all" ? "No usage yet" : `No usage in ${rangeLabel(query).toLowerCase()}`}
              description={hasFilters ? "Try clearing a filter or widening the time range." : "Every chat and Arena request is recorded here with tokens, latency and an estimated cost."}
              action={
                <div className="flex flex-wrap justify-center gap-2">
                  {hasFilters ? (
                    <Button variant="outline" size="sm" onClick={() => setQuery({ provider: "", modelKey: "", projectId: "" })}>
                      Clear filters
                    </Button>
                  ) : null}
                  {query.range !== "all" ? (
                    <Button variant="outline" size="sm" onClick={() => setQuery({ range: "all", from: "", to: "" })}>
                      Show all time
                    </Button>
                  ) : null}
                  <Button size="sm" asChild>
                    <Link href="/app/chat">Start a chat</Link>
                  </Button>
                </div>
              }
            />
          </div>
        ) : (
          <div className={cn("mt-4 space-y-4 transition-opacity duration-200 md:mt-5", q.isValidating && "opacity-70")}>
            <KpiGrid kpis={data.kpis} projection={data.projection} series={data.series} />

            {/* Time series */}
            <div className="grid gap-3 lg:grid-cols-2">
              <ChartCard title="Estimated cost over time" hint={hourly ? "Per hour" : "Per day"}>
                <CostOverTime data={data.series} hourly={Boolean(hourly)} />
              </ChartCard>
              <ChartCard
                title="Requests over time"
                hint={hourly ? "Per hour" : "Per day"}
                legend={
                  data.kpis.failures ? (
                    <Legend
                      items={[
                        { label: "Succeeded", color: "var(--accent)" },
                        { label: "Failed", color: "var(--danger)" },
                      ]}
                    />
                  ) : undefined
                }
              >
                <RequestsOverTime data={data.series} hourly={Boolean(hourly)} />
              </ChartCard>
            </div>

            <div className="grid gap-3 lg:grid-cols-5">
              <ChartCard
                title="Tokens in / out"
                hint="Stacked per period"
                className="lg:col-span-3"
                legend={
                  <Legend
                    items={[
                      { label: "Input", color: "var(--accent)", opacity: 0.55 },
                      { label: "Output", color: "var(--fg)", opacity: 0.85 },
                    ]}
                  />
                }
              >
                <TokensOverTime data={data.series} hourly={Boolean(hourly)} />
              </ChartCard>
              <ChartCard title="Cost by provider" hint="Share of estimated spend" className="lg:col-span-2" legend={providersUsed.length > 1 ? <Legend items={providersUsed.map((p) => ({ label: providerName(p), color: providerColor(p), icon: <ProviderIcon provider={p as ProviderId} size={11} /> }))} /> : undefined}>
                <ProviderDonut data={data.byProvider} metric="costUsd" />
              </ChartCard>
            </div>

            {/* Insights */}
            <div className="grid gap-3 lg:grid-cols-5">
              <ProjectionCard projection={data.projection} kpis={data.kpis} rangeDays={data.range.days} className="lg:col-span-2" />
              <SavingsCard savings={data.savings} className="lg:col-span-3" />
            </div>

            {/* Per model */}
            <div className="grid gap-3 lg:grid-cols-2">
              <ChartCard title="Cost by model" hint="Estimated, USD">
                <ModelBars data={modelRows} metric="costUsd" format={(v) => formatUsd(v)} emptyText="No priced requests in this period." />
              </ChartCard>
              <ChartCard title="Requests by model" hint="Most used first">
                <ModelBars data={modelRows} metric="requests" format={(v) => formatNumber(v)} />
              </ChartCard>
            </div>
            <ChartCard title="Latency by model" hint="Streaming requests only · averages over the period">
              <LatencyByModel data={modelRows} />
            </ChartCard>

            <RecentActivity rows={data.recent} modelLabel={modelLabel} />

            <p className="text-[11px] leading-4 text-fg-subtle">
              All costs on this page are estimates from public list prices at request time; billing happens on your provider accounts.
              {data.kpis.unpricedRequests ? ` ${formatNumber(data.kpis.unpricedRequests)} request${data.kpis.unpricedRequests === 1 ? "" : "s"} had no known price (custom endpoints or unpriced models) and count as $0.` : ""}
            </p>
          </div>
        )}
      </div>
    </main>
  );
}