import Link from "next/link";
import { ListTree } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { API_PUBLIC_URL } from "@/lib/utils";
import { parseRequestFilters, requestsHref, REQUESTS_PAGE_SIZE, type SearchParams } from "@/lib/requests-filters";
import { listRequests, projectHasRequests, type Scope } from "@/lib/queries/dashboard";
import { PageHeader } from "@/components/ui/page-header";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { CodeBlock } from "@/components/ui/code-block";
import { RequestsTable } from "@/components/dashboard/requests/requests-table";
import { ActiveFilterChips, RequestsFilterForm } from "@/components/dashboard/requests/requests-filters";
import { Pagination } from "@/components/dashboard/requests/pagination";

export const dynamic = "force-dynamic";

const CURL_SNIPPET = `curl -X POST ${API_PUBLIC_URL}/v1/fetch \\
  -H "Authorization: Bearer fch_live_YOUR_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{ "url": "https://example.com", "country": "CA", "format": "text" }'`;

export default async function RequestsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const [ws, sp] = await Promise.all([getWorkspace(), searchParams]);
  const scope: Scope = { organizationId: ws.organization.id, projectId: ws.project.id };
  const filters = parseRequestFilters(sp);
  const [hasAny, result] = await Promise.all([projectHasRequests(scope), listRequests(scope, filters, REQUESTS_PAGE_SIZE)]);

  return (
    <div className="flex flex-col gap-5">
      <PageHeader
        title="Requests"
        description={`Every request routed for ${ws.project.name}, with its resolved network, latency, attempts and billed price. Logs are retained according to your plan.`}
      />

      {!hasAny ? (
        <EmptyState
          icon={ListTree}
          title="No requests yet"
          description="Requests appear here the moment you send one. Start in the Playground, or call the API directly with a key from API Keys."
          action={
            <>
              <Button asChild variant="primary" size="sm">
                <Link href="/dashboard/playground">Open Playground</Link>
              </Button>
              <Button asChild variant="outline" size="sm">
                <Link href="/dashboard/api-keys">Create API key</Link>
              </Button>
            </>
          }
          className="pb-8"
        />
      ) : null}

      {!hasAny ? (
        <div className="mx-auto w-full max-w-2xl">
          <CodeBlock code={CURL_SNIPPET} lang="bash" title="Your first request (replace the key)" />
        </div>
      ) : (
        <>
          <RequestsFilterForm filters={filters} exportCount={result.total} />
          <ActiveFilterChips filters={filters} />
          <Card className="overflow-hidden">
            <RequestsTable rows={result.rows} emptyMessage={<span>No requests match these filters. Widen the date range or <Link href="/dashboard/requests" className="text-accent underline-offset-4 hover:underline">clear the filters</Link>.</span>} />
          </Card>
          <Pagination page={result.page} pageCount={result.pageCount} total={result.total} pageSize={REQUESTS_PAGE_SIZE} hrefFor={(p) => requestsHref(filters, { page: p })} />
        </>
      )}
    </div>
  );
}