import type { Metadata } from "next";
import Link from "next/link";
import { BookOpen, Network } from "lucide-react";
import { PLAN_LIMITS, normalizePlan } from "@fetcha/core";
import { getWorkspace } from "@/lib/session";
import { internalApi, InternalApiError, type CrawlJob } from "@/lib/api";
import { formatBytes, formatDate, formatNumber, timeAgo } from "@/lib/format";
import { API_PUBLIC_URL } from "@/lib/utils";
import { PageHeader } from "@/components/ui/page-header";
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { CodeBlock } from "@/components/ui/code-block";
import { EmptyState } from "@/components/ui/empty-state";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { CrawlStatusBadge } from "@/components/dashboard/crawls/crawl-status-badge";
import { CreateCrawlDialog } from "@/components/dashboard/crawls/create-crawl-dialog";
import { CancelCrawlButton } from "@/components/dashboard/crawls/cancel-crawl-button";
import { MapTool } from "@/components/dashboard/crawls/map-tool";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Crawls" };

const API_SNIPPET = `# 1. Start a crawl (returns 202 with the job)
curl -X POST ${API_PUBLIC_URL}/v1/crawl \\
  -H "Authorization: Bearer fch_live_YOUR_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{ "url": "https://docs.example.com/", "max_pages": 100, "max_depth": 3, "format": "markdown" }'
# → { "id": "crawl_…", "status": "queued", … }

# 2. Poll the job, then page through the results
curl ${API_PUBLIC_URL}/v1/crawl/crawl_… -H "Authorization: Bearer fch_live_YOUR_KEY"
curl "${API_PUBLIC_URL}/v1/crawl/crawl_…/pages?limit=100" -H "Authorization: Bearer fch_live_YOUR_KEY"`;

function seedLabel(job: CrawlJob): string {
  try {
    const u = new URL(job.seed_url);
    return u.host + (u.pathname !== "/" ? u.pathname : "");
  } catch {
    return job.seed_url;
  }
}

export default async function CrawlsPage() {
  const ws = await getWorkspace();
  const limits = PLAN_LIMITS[normalizePlan(ws.organization.plan)];

  let jobs: CrawlJob[] = [];
  let loadError: string | null = null;
  try {
    const res = await internalApi.listCrawls(ws.project.id, ws.user.id, 50);
    jobs = Array.isArray(res?.data) ? res.data : [];
  } catch (e) {
    loadError = e instanceof InternalApiError ? e.message : "The Fetcha API service is unreachable.";
  }

  const active = jobs.filter((j) => j.status === "queued" || j.status === "running");
  const pagesFetched = jobs.reduce((a, j) => a + (j.stats?.fetched ?? 0), 0);
  const bytes = jobs.reduce((a, j) => a + (j.stats?.bytes ?? 0), 0);
  const createButton = <CreateCrawlDialog defaultCountry={ws.project.defaultCountry} maxPages={limits.crawl_max_pages} />;

  return (
    <div className="flex flex-col gap-5">
      <PageHeader
        eyebrow={ws.project.name}
        title="Crawls"
        description={`Crawl jobs for ${ws.project.name}. A crawl follows links from a seed URL, fetches each page through the routing engine and stores the content as Markdown, text or HTML.`}
        actions={
          <>
            <Button variant="outline" size="sm" asChild>
              <Link href="/docs/crawl">
                <BookOpen className="size-3.5" /> Crawl API
              </Link>
            </Button>
            {createButton}
          </>
        }
      />

      <StatGrid cols={4}>
        <Stat label="Active jobs" value={formatNumber(active.length)} hint={`up to ${limits.crawl_concurrent_jobs} concurrent`} />
        <Stat label="Jobs" value={formatNumber(jobs.length)} hint="most recent 50" />
        <Stat label="Pages fetched" value={formatNumber(pagesFetched)} hint={`max ${formatNumber(limits.crawl_max_pages)} per job`} />
        <Stat label="Bytes transferred" value={formatBytes(bytes)} hint="all listed jobs" />
      </StatGrid>

      {loadError ? (
        <Alert variant="danger" title="Could not load crawl jobs">
          {loadError}
        </Alert>
      ) : null}

      {jobs.length ? (
        <Card className="overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Crawl</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Fetched</TableHead>
                <TableHead className="text-right">OK</TableHead>
                <TableHead className="text-right">Blocked</TableHead>
                <TableHead className="text-right">Failed</TableHead>
                <TableHead className="text-right">Bytes</TableHead>
                <TableHead>Created</TableHead>
                <TableHead className="text-right"> </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {jobs.map((j) => (
                <TableRow key={j.id}>
                  <TableCell className="max-w-[320px]">
                    <Link href={`/dashboard/crawls/${j.id}`} className="block min-w-0">
                      <span className="block truncate text-[13.5px] font-medium text-fg underline-offset-4 hover:underline" title={j.label ?? j.seed_url}>
                        {j.label ?? seedLabel(j)}
                      </span>
                      <span className="block truncate font-mono text-[11.5px] text-fg-subtle" title={j.seed_url}>
                        {j.label ? j.seed_url : j.id}
                      </span>
                    </Link>
                  </TableCell>
                  <TableCell>
                    <CrawlStatusBadge status={j.status} />
                  </TableCell>
                  <TableCell className="text-right font-mono tabular">
                    {formatNumber(j.stats?.fetched ?? 0)}
                    <span className="text-fg-subtle"> / {formatNumber(j.stats?.discovered ?? 0)}</span>
                  </TableCell>
                  <TableCell className="text-right font-mono tabular text-success">{formatNumber(j.stats?.ok ?? 0)}</TableCell>
                  <TableCell className="text-right font-mono tabular">{j.stats?.blocked ? <span className="text-warning">{formatNumber(j.stats.blocked)}</span> : <span className="text-fg-subtle">0</span>}</TableCell>
                  <TableCell className="text-right font-mono tabular">{j.stats?.failed ? <span className="text-danger">{formatNumber(j.stats.failed)}</span> : <span className="text-fg-subtle">0</span>}</TableCell>
                  <TableCell className="text-right font-mono tabular text-fg-muted">{formatBytes(j.stats?.bytes ?? 0)}</TableCell>
                  <TableCell className="whitespace-nowrap text-fg-muted" title={formatDate(j.created_at, { timeStyle: "medium" })}>
                    {timeAgo(j.created_at)}
                  </TableCell>
                  <TableCell className="text-right">{j.status === "queued" || j.status === "running" ? <CancelCrawlButton id={j.id} size="xs" /> : null}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Card>
      ) : !loadError ? (
        <EmptyState
          icon={Network}
          title="No crawls yet"
          description="Start one here to try it, or from your code with POST /v1/crawl. Each crawled page is a normal fetch request: quotas, retries, escalation and routing intelligence apply."
          action={createButton}
        />
      ) : null}

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>How crawls work</CardTitle>
            <CardDescription>Scope, politeness and what you get back.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-[13px] leading-relaxed text-fg-muted">
            <p>
              <strong className="text-fg">Frontier.</strong> The seed is fetched first; links are extracted, normalised and filtered by <code className="font-mono">same_domain</code>, <code className="font-mono">include_patterns</code> / <code className="font-mono">exclude_patterns</code> and <code className="font-mono">max_depth</code>, then fetched with up to <code className="font-mono">concurrency</code> workers until <code className="font-mono">max_pages</code> is reached.
            </p>
            <p>
              <strong className="text-fg">Politeness.</strong> <code className="font-mono">robots.txt</code> is honoured by default and <code className="font-mono">delay_ms</code> adds a pause between fetches per worker. Sitemaps can seed the frontier with <code className="font-mono">use_sitemap</code>.
            </p>
            <p>
              <strong className="text-fg">Content.</strong> Each page is stored as Markdown (main content, boilerplate removed), text or HTML, with title, description, status, mode (HTTP or browser), bytes and duration. Blocked pages escalate to the managed browser automatically.
            </p>
            <p className="text-fg-subtle">
              Every page also appears in <Link href="/dashboard/requests" className="underline-offset-4 hover:underline">Requests</Link> with source <code className="font-mono">crawl</code>. Jobs are limited to {formatNumber(limits.crawl_max_pages)} pages and {limits.crawl_concurrent_jobs} concurrent jobs per organization.
            </p>
          </CardContent>
        </Card>
        <CodeBlock code={API_SNIPPET} lang="bash" title="Crawls from the API" className="self-start" />
      </div>

      <MapTool />
    </div>
  );
}