"use client";
import * as React from "react";
import { ChevronRight, History, MonitorSmartphone, Play, RotateCcw, Trash2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
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";
import type { UrlCheck } from "@/lib/playground-url";
import { cn } from "@/lib/utils";
import { CountrySelect } from "./country-select";
import { KvRows } from "./kv-rows";
import { DEVICES, FORMATS, HTTP_METHODS, NETWORKS, NETWORK_LABELS, WAIT_UNTIL, inspectBody, methodHasBody, type BuilderState, type CountryOption, type HttpMethod, type NetworkClass, type OutputFormat, type PlanSummary, type RefererMode, type WaitUntil } from "./types";

const FORMAT_HINTS: Record<OutputFormat, string> = {
  html: "Body as returned by the target",
  text: "Readable text, tags removed",
  markdown: "Main content converted to Markdown",
  json: "Body plus parsed JSON",
  raw: "Untouched body (base64 for binary)",
};

const WAIT_UNTIL_LABELS: Record<WaitUntil, string> = { domcontentloaded: "DOM content loaded (default)", load: "Load event", networkidle: "Network idle" };

export interface RequestBuilderProps {
  state: BuilderState;
  onChange: (patch: Partial<BuilderState>) => void;
  plan: PlanSummary;
  availableNetworks: string[];
  countries: CountryOption[];
  urlCheck: UrlCheck;
  urlTouched: boolean;
  onUrlBlur: () => void;
  onRun: () => void;
  onReset: () => void;
  pending: boolean;
  recent: string[];
  onPickRecent: (url: string) => void;
  onClearRecent: () => void;
  isMac: boolean;
}

function Section({ title, count, open, onToggle, children, hint }: { title: string; count?: number; open: boolean; onToggle: () => void; children: React.ReactNode; hint?: string }) {
  const id = React.useId();
  return (
    <div className="border-t border-border">
      <button type="button" onClick={onToggle} aria-expanded={open} aria-controls={id} className="flex w-full items-center gap-2 py-2.5 text-left text-[13px] font-medium text-fg hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/30 rounded-sm">
        <ChevronRight className={cn("size-3.5 text-fg-subtle transition-transform", open && "rotate-90")} aria-hidden />
        <span>{title}</span>
        {count ? (
          <Badge variant="default" className="px-1.5 py-0 text-[10.5px] leading-4">
            {count}
          </Badge>
        ) : null}
        {hint ? <span className="ml-auto text-xs font-normal text-fg-subtle">{hint}</span> : null}
      </button>
      {open ? (
        <div id={id} className="pb-4 pl-5.5">
          {children}
        </div>
      ) : null}
    </div>
  );
}

export function RequestBuilder(p: RequestBuilderProps) {
  const { state: s, onChange, plan, availableNetworks, countries, urlCheck, urlTouched, onUrlBlur, onRun, onReset, pending, recent, onPickRecent, onClearRecent, isMac } = p;
  const [open, setOpen] = React.useState({ headers: s.headers.length > 0, query: s.query.length > 0, body: s.body.length > 0, cookies: s.cookies.length > 0, options: true, browser: s.browser });
  const toggle = (k: keyof typeof open) => setOpen((o) => ({ ...o, [k]: !o[k] }));
  const bodyState = inspectBody(s.body);
  const showUrlMessage = urlTouched && urlCheck.level !== "ok";
  const maxTimeoutS = Math.round(plan.max_timeout_ms / 1000);
  const filledHeaders = s.headers.filter((r) => r.key.trim()).length;
  const filledQuery = s.query.filter((r) => r.key.trim()).length;
  const filledCookies = s.cookies.filter((r) => r.key.trim()).length;

  return (
    <form
      className="grid gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        onRun();
      }}
    >
      {/* URL + method */}
      <div className="grid gap-2">
        <div className="flex items-center justify-between">
          <Label htmlFor="pg-url">URL</Label>
          {recent.length ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button type="button" variant="ghost" size="xs" className="-mr-1 text-fg-muted">
                  <History className="size-3.5" /> Recent
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="max-w-[min(90vw,28rem)]">
                <DropdownMenuLabel>Recent URLs</DropdownMenuLabel>
                {recent.map((u) => (
                  <DropdownMenuItem key={u} onSelect={() => onPickRecent(u)} className="font-mono text-[12px]">
                    <span className="truncate">{u}</span>
                  </DropdownMenuItem>
                ))}
                <DropdownMenuSeparator />
                <DropdownMenuItem onSelect={onClearRecent} destructive>
                  <Trash2 /> Clear recent
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : null}
        </div>
        <div className="grid grid-cols-[6.5rem_minmax(0,1fr)] gap-2">
          <Select value={s.method} onValueChange={(v) => onChange({ method: v as HttpMethod })}>
            <SelectTrigger className="h-11 font-mono text-[13px]" aria-label="HTTP method">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {HTTP_METHODS.map((m) => (
                <SelectItem key={m} value={m} className="font-mono text-[13px]">
                  {m}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Input
            id="pg-url"
            type="url"
            inputMode="url"
            autoFocus
            autoComplete="off"
            autoCapitalize="off"
            autoCorrect="off"
            spellCheck={false}
            placeholder="https://example.com/page"
            value={s.url}
            onChange={(e) => onChange({ url: e.target.value })}
            onBlur={onUrlBlur}
            aria-invalid={showUrlMessage && urlCheck.level === "error" ? true : undefined}
            aria-describedby={showUrlMessage ? "pg-url-msg" : undefined}
            className="h-11 font-mono text-[14px]"
          />
        </div>
        {showUrlMessage ? (
          <p id="pg-url-msg" className={cn("text-xs leading-relaxed", urlCheck.level === "error" ? "text-danger" : "text-warning")} role={urlCheck.level === "error" ? "alert" : "status"}>
            {urlCheck.message}
          </p>
        ) : null}
      </div>

      {/* Sections */}
      <div>
        <Section title="Headers" count={filledHeaders} open={open.headers} onToggle={() => toggle("headers")}>
          <KvRows rows={s.headers} onChange={(headers) => onChange({ headers })} label="Header" keyPlaceholder="Header-Name" valuePlaceholder="value" addLabel="Add header" />
          <Hint className="mt-2">Sent to the target as-is. A realistic User-Agent is applied automatically when you don&apos;t set one.</Hint>
        </Section>
        <Section title="Query params" count={filledQuery} open={open.query} onToggle={() => toggle("query")}>
          <KvRows rows={s.query} onChange={(query) => onChange({ query })} label="Query parameter" keyPlaceholder="param" valuePlaceholder="value" addLabel="Add parameter" />
          <Hint className="mt-2">Merged into the URL when the request runs.</Hint>
        </Section>
        {methodHasBody(s.method) ? (
          <Section title="Body" open={open.body} onToggle={() => toggle("body")} hint={bodyState === "json" ? "Valid JSON" : bodyState === "text" ? "Plain text" : undefined}>
            <Textarea
              value={s.body}
              onChange={(e) => onChange({ body: e.target.value })}
              placeholder='{"query": "…"}'
              aria-label="Request body"
              spellCheck={false}
              className="min-h-[120px] font-mono text-[12.5px]"
            />
            <div className="mt-1.5 flex items-center gap-2">
              {bodyState === "json" ? (
                <Badge variant="success" dot>
                  Valid JSON
                </Badge>
              ) : bodyState === "text" ? (
                <Badge variant="outline">Not JSON — sent as text</Badge>
              ) : null}
              <Hint>Set a Content-Type header to match your body.</Hint>
            </div>
          </Section>
        ) : null}
        <Section title="Cookies" count={filledCookies} open={open.cookies} onToggle={() => toggle("cookies")}>
          <KvRows rows={s.cookies} onChange={(cookies) => onChange({ cookies })} label="Cookie" keyPlaceholder="name" valuePlaceholder="value" addLabel="Add cookie" />
        </Section>

        <Section title="Options" open={open.options} onToggle={() => toggle("options")}>
          <div className="grid gap-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <Field>
                <Label htmlFor="pg-country">Country</Label>
                <CountrySelect id="pg-country" value={s.country} onChange={(country) => onChange({ country })} countries={countries} />
              </Field>
              <Field>
                <Label htmlFor="pg-network">Network</Label>
                <Select value={s.network} onValueChange={(v) => onChange({ network: v as NetworkClass })}>
                  <SelectTrigger id="pg-network" aria-label="Network class">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {NETWORKS.map((n) => {
                      const live = n === "auto" || availableNetworks.includes(n);
                      const onPlan = n === "auto" || plan.networks.includes(n);
                      const disabled = !live || !onPlan;
                      const reason = !live ? "Not yet available" : !onPlan ? `Not on the ${plan.label} plan` : null;
                      return (
                        <SelectItem key={n} value={n} disabled={disabled} title={reason ?? undefined}>
                          {NETWORK_LABELS[n]}
                          {reason ? <span className="ml-1.5 text-xs text-fg-subtle">— {reason}</span> : null}
                        </SelectItem>
                      );
                    })}
                  </SelectContent>
                </Select>
              </Field>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <Field>
                <Label htmlFor="pg-region">Region</Label>
                <Input id="pg-region" value={s.region} onChange={(e) => onChange({ region: e.target.value })} placeholder="e.g. quebec" maxLength={64} autoCapitalize="off" />
              </Field>
              <Field>
                <Label htmlFor="pg-city">City</Label>
                <Input id="pg-city" value={s.city} onChange={(e) => onChange({ city: e.target.value })} placeholder="e.g. montreal" maxLength={128} autoCapitalize="off" />
              </Field>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <Field>
                <Label htmlFor="pg-session">Session</Label>
                <Input id="pg-session" value={s.session} onChange={(e) => onChange({ session: e.target.value })} placeholder="Auto (fresh IP)" className="font-mono text-[12.5px]" maxLength={64} autoCapitalize="off" spellCheck={false} />
                <Hint>Paste a <span className="font-mono">sess_…</span> id to reuse a sticky IP.</Hint>
              </Field>
              <Field>
                <Label htmlFor="pg-timeout">Timeout (ms)</Label>
                <Input
                  id="pg-timeout"
                  type="number"
                  inputMode="numeric"
                  min={1000}
                  max={plan.max_timeout_ms}
                  step={1000}
                  value={s.timeout}
                  onChange={(e) => onChange({ timeout: Number(e.target.value) })}
                  onBlur={() => onChange({ timeout: Math.min(Math.max(1000, Math.round(s.timeout || 30_000)), plan.max_timeout_ms) })}
                  className="font-mono tabular text-[12.5px]"
                />
                <Hint>
                  Up to {maxTimeoutS} s on the {plan.label} plan.
                </Hint>
              </Field>
            </div>
            <div className="grid gap-4 sm:grid-cols-3">
              <Field>
                <Label htmlFor="pg-format">Output format</Label>
                <Select value={s.format} onValueChange={(v) => onChange({ format: v as OutputFormat })}>
                  <SelectTrigger id="pg-format" aria-label="Output format">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {FORMATS.map((f) => (
                      <SelectItem key={f} value={f} className="font-mono text-[13px]">
                        {f}
                        <span className="ml-1.5 font-sans text-xs text-fg-subtle">— {FORMAT_HINTS[f]}</span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </Field>
              <Field>
                <Label htmlFor="pg-device">Device</Label>
                <Select value={s.device || "default"} onValueChange={(v) => onChange({ device: v === "default" ? "" : (v as BuilderState["device"]) })}>
                  <SelectTrigger id="pg-device" aria-label="Device">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="default">Default</SelectItem>
                    {DEVICES.map((d) => (
                      <SelectItem key={d} value={d}>
                        {d.charAt(0).toUpperCase() + d.slice(1)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </Field>
              <Field>
                <Label htmlFor="pg-locale">Locale</Label>
                <Input id="pg-locale" value={s.locale} onChange={(e) => onChange({ locale: e.target.value })} placeholder="en-CA" maxLength={16} autoCapitalize="off" spellCheck={false} className="font-mono text-[12.5px]" />
              </Field>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <Field>
                <Label htmlFor="pg-referer">Referer</Label>
                <Select value={s.refererMode} onValueChange={(v) => onChange({ refererMode: v as RefererMode })}>
                  <SelectTrigger id="pg-referer" aria-label="Referer strategy">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="auto">Auto (search-engine referer on retries)</SelectItem>
                    <SelectItem value="none">None</SelectItem>
                    <SelectItem value="custom">Custom URL</SelectItem>
                  </SelectContent>
                </Select>
              </Field>
              {s.refererMode === "custom" ? (
                <Field>
                  <Label htmlFor="pg-referer-url">Referer URL</Label>
                  <Input id="pg-referer-url" type="url" inputMode="url" value={s.refererUrl} onChange={(e) => onChange({ refererUrl: e.target.value })} placeholder="https://www.google.com/" maxLength={2048} autoCapitalize="off" spellCheck={false} className="font-mono text-[12.5px]" />
                </Field>
              ) : null}
            </div>
            <div className="grid gap-3 rounded-md border border-border bg-bg-subtle/50 p-3">
              <ToggleRow id="pg-follow" label="Follow redirects" hint="Each hop is validated against the URL policy." checked={s.followRedirects} onChange={(v) => onChange({ followRedirects: v })} />
              <ToggleRow id="pg-links" label="Include links" hint="Return every hyperlink of the page as absolute URLs in links[]." checked={s.links} onChange={(v) => onChange({ links: v })} />
              <ToggleRow id="pg-debug" label="Debug" hint="Include per-attempt routing details in the response." checked={s.debug} onChange={(v) => onChange({ debug: v })} />
            </div>
          </div>
        </Section>

        <Section title="Browser rendering" open={open.browser} onToggle={() => toggle("browser")} hint={s.browser ? "on" : s.browserFallback ? "fallback" : "off"}>
          <div className="grid gap-4">
            <div className="grid gap-3 rounded-md border border-border bg-bg-subtle/50 p-3">
              <ToggleRow
                id="pg-browser"
                label={
                  <span className="inline-flex items-center gap-1.5">
                    <MonitorSmartphone className="size-3.5 text-fg-subtle" aria-hidden /> Render in a managed browser
                  </span>
                }
                hint="Real Chromium routed through the same network, geography and session. Returns the DOM after the page settles."
                checked={s.browser}
                onChange={(v) => onChange({ browser: v })}
              />
              <ToggleRow id="pg-browser-fallback" label="Escalate on JavaScript challenges" hint="When an HTTP attempt is blocked by a JS challenge or anti-bot page, retry automatically in the browser." checked={s.browserFallback} onChange={(v) => onChange({ browserFallback: v })} />
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <Field>
                <Label htmlFor="pg-wait-for">Wait for selector</Label>
                <Input id="pg-wait-for" value={s.waitFor} onChange={(e) => onChange({ waitFor: e.target.value })} placeholder="e.g. table.results" maxLength={512} autoCapitalize="off" spellCheck={false} className="font-mono text-[12.5px]" />
                <Hint>CSS selector that must be present before capture.</Hint>
              </Field>
              <Field>
                <Label htmlFor="pg-wait-ms">Extra settle time (ms)</Label>
                <Input
                  id="pg-wait-ms"
                  type="number"
                  inputMode="numeric"
                  min={0}
                  max={30_000}
                  step={100}
                  value={s.waitMs}
                  onChange={(e) => onChange({ waitMs: Number(e.target.value) })}
                  onBlur={() => onChange({ waitMs: Math.min(30_000, Math.max(0, Math.round(s.waitMs || 0))) })}
                  className="font-mono tabular text-[12.5px]"
                />
                <Hint>0–30,000 ms after load or after the selector appears.</Hint>
              </Field>
            </div>
            <Field>
              <Label htmlFor="pg-wait-until">Navigation wait condition</Label>
              <Select value={s.waitUntil} onValueChange={(v) => onChange({ waitUntil: v as WaitUntil })}>
                <SelectTrigger id="pg-wait-until" aria-label="Navigation wait condition">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {WAIT_UNTIL.map((w) => (
                    <SelectItem key={w} value={w}>
                      {WAIT_UNTIL_LABELS[w]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </Field>
            <div className="grid gap-3 rounded-md border border-border bg-bg-subtle/50 p-3">
              <ToggleRow id="pg-block-resources" label="Block images, fonts and media" hint="Saves bandwidth and time; page scripts still run." checked={s.blockResources} onChange={(v) => onChange({ blockResources: v })} />
              <ToggleRow id="pg-screenshot" label="Screenshot" hint="Return a PNG of the viewport (base64) in screenshot." checked={s.screenshot} onChange={(v) => onChange({ screenshot: v })} />
            </div>
            <Hint>
              Up to {plan.browser_concurrency} concurrent renders. A page that does not settle within the timeout returns <span className="font-mono">BROWSER_TIMEOUT</span>.
            </Hint>
          </div>
        </Section>
      </div>

      {/* Actions (desktop) */}
      <div className="hidden items-center gap-2 border-t border-border pt-4 lg:flex">
        <Button type="submit" variant="primary" loading={pending} disabled={urlCheck.level === "error"} className="min-w-[10rem]">
          {!pending ? <Play className="size-3.5" /> : null}
          {pending ? "Running…" : "Run request"}
          {!pending ? <kbd className="ml-1 rounded-[4px] border border-white/25 bg-white/10 px-1.5 font-mono text-[10.5px] font-normal">{isMac ? "⌘" : "Ctrl"}↵</kbd> : null}
        </Button>
        <Button type="button" variant="ghost" onClick={onReset} disabled={pending}>
          <RotateCcw className="size-3.5" /> Reset
        </Button>
        <p className="ml-auto text-right text-[11.5px] leading-tight text-fg-subtle">
          {plan.label} plan · {plan.concurrency} concurrent · {maxTimeoutS} s max
        </p>
      </div>
    </form>
  );
}

function ToggleRow({ id, label, hint, checked, onChange, disabled, badge }: { id: string; label: React.ReactNode; hint?: string; checked: boolean; onChange: (v: boolean) => void; disabled?: boolean; badge?: string }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <div className="min-w-0">
        <Label htmlFor={id} className={cn("flex items-center gap-2", disabled && "opacity-70")}>
          {label}
          {badge ? <Badge variant="outline">{badge}</Badge> : null}
        </Label>
        {hint ? <Hint className="mt-1">{hint}</Hint> : null}
      </div>
      <Switch id={id} checked={checked} onCheckedChange={onChange} disabled={disabled} aria-label={typeof label === "string" ? label : undefined} />
    </div>
  );
}