import Link from "next/link";
import { ListTree } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { CONCRETE_NETWORKS, PROVIDER_IDS, getRequestFilterOptions, listRequests, requestFiltersFromParams, str } from "@/lib/queries/admin";
import { formatBytes, formatMs, formatNumber, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input, NativeSelect } from "@/components/ui/input";
import { Field, Label } from "@/components/ui/label";
import { EmptyState } from "@/components/ui/empty-state";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DateCell, Mono, NetworkBadge, Pagination, Panel, ProviderBadge, numCell } from "@/components/admin/primitives";

export const dynamic = "force-dynamic";

export default async function AdminRequestsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const f = requestFiltersFromParams(sp);
  const [data, opts] = await Promise.all([listRequests(f), getRequestFilterOptions()]);
  const params: Record<string, string | undefined> = {
    org: f.org,
    project: f.project,
    domain: f.domain,
    status: f.status,
    provider: f.provider,
    network: f.network,
    country: f.country,
    source: f.source,
    errorCode: f.errorCode,
    from: f.from,
    to: f.to,
    id: f.id,
  };
  const active = Object.values(params).filter(Boolean).length;

  return (
    <>
      <PageHeader eyebrow="Explorer" title="Requests" description={`${formatNumber(data.total)} matching requests. Provider chain is shown per request (admin-only).`} />

      <Panel className="mb-4" title="Filters" right={active ? <Button asChild variant="ghost" size="xs"><Link href="/admin/requests">Clear {active}</Link></Button> : null}>
        <form method="get" action="/admin/requests" className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
          <Field>
            <Label htmlFor="f-id">Request id</Label>
            <Input id="f-id" name="id" defaultValue={f.id} placeholder="req_…" className="h-8 font-mono text-[12.5px]" />
          </Field>
          <Field>
            <Label htmlFor="f-org">Organization</Label>
            <NativeSelect id="f-org" name="org" defaultValue={f.org ?? ""} className="h-8 text-[13px]">
              <option value="">Any</option>
              {opts.orgs.map((o) => (
                <option key={o.id} value={o.id}>
                  {o.name}
                </option>
              ))}
            </NativeSelect>
          </Field>
          <Field>
            <Label htmlFor="f-project">Project id</Label>
            <Input id="f-project" name="project" defaultValue={f.project} placeholder="proj_…" className="h-8 font-mono text-[12.5px]" />
          </Field>
          <Field>
            <Label htmlFor="f-domain">Domain</Label>
            <Input id="f-domain" name="domain" defaultValue={f.domain} placeholder="contains…" className="h-8 text-[13px]" />
          </Field>
          <Field>
            <Label htmlFor="f-status">Status</Label>
            <NativeSelect id="f-status" name="status" defaultValue={f.status ?? ""} className="h-8 text-[13px]">
              <option value="">Any</option>
              <option value="success">success</option>
              <option value="failed">failed</option>
              <option value="pending">pending</option>
            </NativeSelect>
          </Field>
          <Field>
            <Label htmlFor="f-provider">Provider</Label>
            <NativeSelect id="f-provider" name="provider" defaultValue={f.provider ?? ""} className="h-8 font-mono text-[12.5px]">
              <option value="">Any</option>
              {PROVIDER_IDS.map((p) => (
                <option key={p} value={p}>
                  {p}
                </option>
              ))}
            </NativeSelect>
          </Field>
          <Field>
            <Label htmlFor="f-network">Network</Label>
            <NativeSelect id="f-network" name="network" defaultValue={f.network ?? ""} className="h-8 text-[13px]">
              <option value="">Any</option>
              {CONCRETE_NETWORKS.map((n) => (
                <option key={n} value={n}>
                  {n}
                </option>
              ))}
              <option value="direct">direct</option>
            </NativeSelect>
          </Field>
          <Field>
            <Label htmlFor="f-country">Country</Label>
            <Input id="f-country" name="country" defaultValue={f.country} placeholder="CA" maxLength={2} className="h-8 font-mono uppercase text-[12.5px]" />
          </Field>
          <Field>
            <Label htmlFor="f-source">Source</Label>
            <NativeSelect id="f-source" name="source" defaultValue={f.source ?? ""} className="h-8 text-[13px]">
              <option value="">Any</option>
              <option value="api">api</option>
              <option value="playground">playground</option>
              <option value="sdk">sdk</option>
            </NativeSelect>
          </Field>
          <Field>
            <Label htmlFor="f-error">Error code</Label>
            <NativeSelect id="f-error" name="errorCode" defaultValue={f.errorCode ?? ""} className="h-8 font-mono text-[12.5px]">
              <option value="">Any</option>
              {opts.errorCodes.map((c) => (
                <option key={c} value={c}>
                  {c}
                </option>
              ))}
            </NativeSelect>
          </Field>
          <Field>
            <Label htmlFor="f-from">From</Label>
            <Input id="f-from" name="from" type="datetime-local" defaultValue={f.from} className="h-8 text-[12.5px]" />
          </Field>
          <Field>
            <Label htmlFor="f-to">To</Label>
            <Input id="f-to" name="to" type="datetime-local" defaultValue={f.to} className="h-8 text-[12.5px]" />
          </Field>
          <div className="flex items-end gap-2 sm:col-span-2 lg:col-span-4 xl:col-span-6">
            <Button type="submit" size="sm">
              Apply filters
            </Button>
            <span className="text-[12px] text-fg-subtle">Times are interpreted in the server timezone.</span>
          </div>
        </form>
      </Panel>

      <Panel flush>
        {data.total === 0 ? (
          <div className="p-4">
            <EmptyState icon={ListTree} title="No requests match" description="Loosen a filter or widen the date range." compact />
          </div>
        ) : (
          <>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Request</TableHead>
                  <TableHead>Org / project</TableHead>
                  <TableHead>Domain</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Network</TableHead>
                  <TableHead>Providers</TableHead>
                  <TableHead>Geo</TableHead>
                  <TableHead className="text-right">Att.</TableHead>
                  <TableHead className="text-right">Latency</TableHead>
                  <TableHead className="text-right">Bytes</TableHead>
                  <TableHead className="text-right">Cost</TableHead>
                  <TableHead className="text-right">Price</TableHead>
                  <TableHead className="text-right">When</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.rows.map((r) => (
                  <TableRow key={r.id}>
                    <TableCell>
                      <Link href={`/admin/requests/${r.id}`} className="hover:underline">
                        <Mono>{r.id}</Mono>
                      </Link>
                      <div className="text-[11.5px] text-fg-subtle">{r.source}</div>
                    </TableCell>
                    <TableCell className="max-w-[180px]">
                      <Link href={`/admin/organizations/${r.organizationId}`} className="block truncate hover:underline">
                        {r.orgName ?? r.organizationId}
                      </Link>
                      <div className="truncate text-[11.5px] text-fg-subtle">{r.projectName ?? r.projectId}</div>
                    </TableCell>
                    <TableCell className="max-w-[220px] truncate" title={r.domain}>
                      <Link href={`/admin/domains/${encodeURIComponent(r.domain)}`} className="hover:underline">
                        {r.domain}
                      </Link>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1.5">
                        <StatusBadge status={r.status} />
                        {r.httpStatus ? <Mono className="text-fg-muted">{r.httpStatus}</Mono> : null}
                      </div>
                      {r.errorCode ? <div className="font-mono text-[11px] text-danger">{r.errorCode}</div> : null}
                    </TableCell>
                    <TableCell>
                      <NetworkBadge network={r.network} />
                      {r.requestedNetwork !== r.network ? <div className="text-[11px] text-fg-subtle">asked {r.requestedNetwork}</div> : null}
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        {r.providers ? r.providers.split(",").map((p, i) => <ProviderBadge key={i} id={p} />) : <span className="text-fg-subtle">—</span>}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Mono>{r.country ?? "—"}</Mono>
                    </TableCell>
                    <TableCell className={numCell}>{r.attempts}</TableCell>
                    <TableCell className={numCell}>{formatMs(r.latencyMs)}</TableCell>
                    <TableCell className={numCell}>{formatBytes(r.bytesIn)}</TableCell>
                    <TableCell className={numCell}>{formatUsd(r.costUsd, true)}</TableCell>
                    <TableCell className={numCell}>{formatUsd(r.priceUsd, true)}</TableCell>
                    <TableCell className="text-right">
                      <DateCell value={r.createdAt} />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Pagination page={data.page} pages={data.pages} total={data.total} pageSize={data.pageSize} basePath="/admin/requests" params={params} />
          </>
        )}
      </Panel>
      {str(sp.page) && data.rows.length === 0 && data.total > 0 ? <p className="mt-2 text-[12px] text-fg-subtle">This page is empty — go back to page 1.</p> : null}
    </>
  );
}