"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Plus } from "lucide-react";
import { COUNTRIES } from "@fetcha/core/client";
import { createCrawl } from "@/actions/crawls";
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input, Textarea } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";

const ANY = "__any__";
const FORMATS = ["markdown", "text", "html"] as const;

function splitPatterns(s: string): string[] | undefined {
  const list = s
    .split(/[\n,]+/)
    .map((x) => x.trim())
    .filter(Boolean)
    .slice(0, 50);
  return list.length ? list : undefined;
}

export function CreateCrawlDialog({ defaultCountry, maxPages, variant = "primary" }: { defaultCountry?: string | null; maxPages: number; variant?: "primary" | "outline" }) {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const [pending, startTransition] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);

  const [url, setUrl] = React.useState("");
  const [label, setLabel] = React.useState("");
  const [maxPagesValue, setMaxPagesValue] = React.useState(25);
  const [maxDepth, setMaxDepth] = React.useState(2);
  const [format, setFormat] = React.useState<(typeof FORMATS)[number]>("markdown");
  const [sameDomain, setSameDomain] = React.useState(true);
  const [respectRobots, setRespectRobots] = React.useState(true);
  const [browser, setBrowser] = React.useState(false);
  const [country, setCountry] = React.useState<string>(defaultCountry && defaultCountry in COUNTRIES ? defaultCountry : ANY);
  const [include, setInclude] = React.useState("");
  const [exclude, setExclude] = React.useState("");

  function reset() {
    setError(null);
    setUrl("");
    setLabel("");
    setMaxPagesValue(25);
    setMaxDepth(2);
    setFormat("markdown");
    setSameDomain(true);
    setRespectRobots(true);
    setBrowser(false);
    setInclude("");
    setExclude("");
  }

  function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    startTransition(async () => {
      const res = await createCrawl({
        url: url.trim(),
        label: label.trim() || undefined,
        max_pages: Math.min(maxPages, Math.max(1, Math.round(maxPagesValue || 1))),
        max_depth: Math.min(10, Math.max(0, Math.round(maxDepth || 0))),
        format,
        same_domain: sameDomain,
        respect_robots: respectRobots,
        browser,
        country: country === ANY ? undefined : country,
        include_patterns: splitPatterns(include),
        exclude_patterns: splitPatterns(exclude),
      });
      if (!res.ok) {
        setError(res.error.message);
        return;
      }
      setOpen(false);
      reset();
      router.push(`/dashboard/crawls/${res.data.id}`);
      router.refresh();
    });
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (!o) setError(null);
      }}
    >
      <DialogTrigger asChild>
        <Button variant={variant} size="sm">
          <Plus /> New crawl
        </Button>
      </DialogTrigger>
      <DialogContent size="lg">
        <form onSubmit={submit} className="contents">
          <DialogHeader>
            <DialogTitle>Start a crawl</DialogTitle>
            <DialogDescription>
              Fetcha follows links from the seed URL, fetches each page through the routing engine and stores the content. Every page is a normal request in the log with source <code className="font-mono">crawl</code>.
            </DialogDescription>
          </DialogHeader>
          {error ? <Alert variant="danger">{error}</Alert> : null}
          <div className="grid gap-4 sm:grid-cols-2">
            <Field className="sm:col-span-2">
              <Label htmlFor="c-url">Seed URL</Label>
              <Input id="c-url" type="url" inputMode="url" required value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://docs.example.com/" autoComplete="off" autoCapitalize="off" spellCheck={false} className="font-mono text-[13px]" />
            </Field>
            <Field>
              <Label htmlFor="c-max-pages">Max pages</Label>
              <Input id="c-max-pages" type="number" inputMode="numeric" min={1} max={maxPages} value={maxPagesValue} onChange={(e) => setMaxPagesValue(Number(e.target.value))} className="font-mono tabular" />
              <Hint>1–{maxPages.toLocaleString("en-US")}. The seed counts as one.</Hint>
            </Field>
            <Field>
              <Label htmlFor="c-max-depth">Max depth</Label>
              <Input id="c-max-depth" type="number" inputMode="numeric" min={0} max={10} value={maxDepth} onChange={(e) => setMaxDepth(Number(e.target.value))} className="font-mono tabular" />
              <Hint>0 = seed only, up to 10 link hops.</Hint>
            </Field>
            <Field>
              <Label htmlFor="c-format">Content format</Label>
              <Select value={format} onValueChange={(v) => setFormat(v as (typeof FORMATS)[number])}>
                <SelectTrigger id="c-format">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {FORMATS.map((f) => (
                    <SelectItem key={f} value={f} className="font-mono text-[13px]">
                      {f}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <Label htmlFor="c-country">Country</Label>
              <Select value={country} onValueChange={setCountry}>
                <SelectTrigger id="c-country">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value={ANY}>Any country</SelectItem>
                  {Object.entries(COUNTRIES).map(([code, name]) => (
                    <SelectItem key={code} value={code}>
                      <span className="font-mono text-[12px] text-fg-subtle">{code}</span> {name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <Label htmlFor="c-include">Include patterns</Label>
              <Textarea id="c-include" value={include} onChange={(e) => setInclude(e.target.value)} placeholder={"/docs/*\n/regex/"} rows={3} spellCheck={false} className="font-mono text-[12.5px]" />
              <Hint>One per line. Glob with <span className="font-mono">*</span> or <span className="font-mono">/regex/</span>. Empty = everything.</Hint>
            </Field>
            <Field>
              <Label htmlFor="c-exclude">Exclude patterns</Label>
              <Textarea id="c-exclude" value={exclude} onChange={(e) => setExclude(e.target.value)} placeholder={"*/login*\n*.pdf"} rows={3} spellCheck={false} className="font-mono text-[12.5px]" />
              <Hint>URLs matching any pattern are never crawled.</Hint>
            </Field>
            <div className="grid gap-3 rounded-md border border-border bg-bg-subtle/50 p-3 sm:col-span-2">
              <ToggleRow id="c-same-domain" label="Stay on the seed domain" hint="Only follow links on the same registrable host." checked={sameDomain} onChange={setSameDomain} />
              <ToggleRow id="c-robots" label="Respect robots.txt" hint="Skip paths disallowed for the seed host." checked={respectRobots} onChange={setRespectRobots} />
              <ToggleRow id="c-browser" label="Browser rendering" hint="Render every page in the managed browser. Slower; use for JavaScript-only sites. Blocked pages escalate automatically either way." checked={browser} onChange={setBrowser} />
            </div>
            <Field className="sm:col-span-2">
              <Label htmlFor="c-label">Label (optional)</Label>
              <Input id="c-label" value={label} onChange={(e) => setLabel(e.target.value)} placeholder="docs-site-weekly" maxLength={128} autoComplete="off" />
            </Field>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button type="button" variant="ghost">
                Cancel
              </Button>
            </DialogClose>
            <Button type="submit" variant="primary" loading={pending}>
              Start crawl
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

function ToggleRow({ id, label, hint, checked, onChange }: { id: string; label: string; hint?: string; checked: boolean; onChange: (v: boolean) => void }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <div className="min-w-0">
        <Label htmlFor={id}>{label}</Label>
        {hint ? <Hint className="mt-1">{hint}</Hint> : null}
      </div>
      <Switch id={id} checked={checked} onCheckedChange={onChange} aria-label={label} />
    </div>
  );
}