"use client";
import * as React from "react";
import { Map as MapIcon, Search } from "lucide-react";
import type { MapResult } from "@/lib/api";
import { runMap } from "@/actions/crawls";
import { Alert } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { CopyButton } from "@/components/ui/copy-button";
import { Input } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { formatNumber } from "@/lib/format";

/** Mini tool: discover the URLs of a site (sitemap + links) with POST /v1/map, synchronously. */
export function MapTool() {
  const [url, setUrl] = React.useState("");
  const [search, setSearch] = React.useState("");
  const [limit, setLimit] = React.useState(200);
  const [pending, startTransition] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);
  const [result, setResult] = React.useState<MapResult | null>(null);

  function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    startTransition(async () => {
      const res = await runMap({ url: url.trim(), search: search.trim() || undefined, limit: Math.min(10_000, Math.max(1, Math.round(limit || 1))) });
      if (!res.ok) {
        setResult(null);
        setError(res.error.message);
        return;
      }
      setResult(res.data);
    });
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MapIcon className="size-4 text-fg-subtle" aria-hidden /> Map a site
        </CardTitle>
        <CardDescription>
          List the URLs of a site from its sitemap and the links on the seed page, without fetching every page. Same as <code className="font-mono">POST /v1/map</code>; runs synchronously (up to 60 s).
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <form onSubmit={submit} className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,14rem)_6rem_auto] sm:items-end">
          <Field>
            <Label htmlFor="map-url">URL</Label>
            <Input id="map-url" type="url" inputMode="url" required value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com" autoComplete="off" autoCapitalize="off" spellCheck={false} className="font-mono text-[13px]" />
          </Field>
          <Field>
            <Label htmlFor="map-search">Filter (optional)</Label>
            <Input id="map-search" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="blog, /docs/*, /regex/" maxLength={256} autoComplete="off" spellCheck={false} className="font-mono text-[12.5px]" />
          </Field>
          <Field>
            <Label htmlFor="map-limit">Limit</Label>
            <Input id="map-limit" type="number" inputMode="numeric" min={1} max={10_000} value={limit} onChange={(e) => setLimit(Number(e.target.value))} className="font-mono tabular" />
          </Field>
          <Button type="submit" variant="primary" loading={pending} className="sm:mb-px">
            {!pending ? <Search className="size-3.5" /> : null} Map
          </Button>
        </form>
        {error ? <Alert variant="danger">{error}</Alert> : null}
        {result ? (
          <div className="grid gap-2">
            <div className="flex flex-wrap items-center gap-2 text-[12.5px] text-fg-muted">
              <span className="font-mono tabular text-fg">{formatNumber(result.count)}</span> URL{result.count === 1 ? "" : "s"}
              <Badge variant="outline">sitemap {formatNumber(result.sources?.sitemap ?? 0)}</Badge>
              <Badge variant="outline">links {formatNumber(result.sources?.links ?? 0)}</Badge>
              {result.truncated ? <Badge variant="warning">truncated at {formatNumber(limit)}</Badge> : null}
              <span className="ml-auto">
                <CopyButton value={result.urls.join("\n")} label="Copy list" />
              </span>
            </div>
            {result.urls.length ? (
              <ol className="max-h-[360px] overflow-auto rounded-lg border border-border bg-bg-subtle p-3 font-mono text-[12px] leading-relaxed scrollbar-thin">
                {result.urls.map((u, i) => (
                  <li key={`${u}-${i}`} className="flex gap-3">
                    <span className="w-8 shrink-0 select-none text-right text-fg-subtle/70">{i + 1}</span>
                    <a href={u} target="_blank" rel="noreferrer noopener nofollow" className="min-w-0 truncate text-fg hover:text-accent hover:underline" title={u}>
                      {u}
                    </a>
                  </li>
                ))}
              </ol>
            ) : (
              <Hint>No URLs found. The site may have no sitemap and the seed page no links, or the filter matched nothing.</Hint>
            )}
          </div>
        ) : (
          <Hint>Use the result to pick include/exclude patterns before starting a crawl.</Hint>
        )}
      </CardContent>
    </Card>
  );
}