"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { ArrowDown, ArrowUp, Eraser, Plus, Save, X } from "lucide-react";
import { resetDomainStats, updateDomainPolicy, type AdminActionResult } from "@/actions/admin";
import { Button } from "@/components/ui/button";
import { NativeSelect } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { ActionButton, ResultMessage } from "./action-button";

const NETWORKS = ["datacenter", "residential", "isp", "mobile"] as const;

export function DomainPolicyEditor({ domain, policy, availableKeys }: { domain: string; policy: { order?: string[]; force_network?: string } | null; availableKeys: string[] }) {
  const router = useRouter();
  const [pending, start] = React.useTransition();
  const [force, setForce] = React.useState(policy?.force_network ?? "");
  const [order, setOrder] = React.useState<string[]>(policy?.order ?? []);
  const [pick, setPick] = React.useState("");
  const [result, setResult] = React.useState<AdminActionResult | null>(null);
  const candidates = availableKeys.filter((k) => !order.includes(k));

  const move = (i: number, d: -1 | 1) =>
    setOrder((cur) => {
      const next = [...cur];
      const j = i + d;
      if (j < 0 || j >= next.length) return cur;
      [next[i], next[j]] = [next[j]!, next[i]!];
      return next;
    });

  return (
    <form
      className="grid gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        start(async () => {
          const r = await updateDomainPolicy(domain, { force_network: force || null, order });
          setResult(r);
          if (r.ok) router.refresh();
        });
      }}
    >
      <Field>
        <Label htmlFor="force-network">Force network</Label>
        <NativeSelect id="force-network" value={force} onChange={(e) => setForce(e.target.value)} className="w-[220px]">
          <option value="">None (auto escalation)</option>
          {NETWORKS.map((n) => (
            <option key={n} value={n}>
              {n}
            </option>
          ))}
        </NativeSelect>
        <Hint>Applies only when the customer asks for `network: &quot;auto&quot;`. Explicit network requests are never overridden.</Hint>
      </Field>

      <div className="grid gap-1.5">
        <Label>Pinned route order</Label>
        <Hint>Ordered list of `provider:network` keys. Pinned routes are tried first (in this order); unpinned candidates follow by score.</Hint>
        {order.length ? (
          <ol className="divide-y divide-border rounded-md border border-border">
            {order.map((k, i) => (
              <li key={k} className="flex items-center gap-2 px-2.5 py-1.5 text-[13px]">
                <span className="w-5 text-right tabular font-mono text-fg-subtle">{i + 1}.</span>
                <span className="font-mono">{k}</span>
                <span className="ml-auto flex items-center gap-0.5">
                  <Button type="button" variant="ghost" size="icon-sm" onClick={() => move(i, -1)} disabled={i === 0} aria-label="Move up">
                    <ArrowUp className="size-3.5" />
                  </Button>
                  <Button type="button" variant="ghost" size="icon-sm" onClick={() => move(i, 1)} disabled={i === order.length - 1} aria-label="Move down">
                    <ArrowDown className="size-3.5" />
                  </Button>
                  <Button type="button" variant="ghost" size="icon-sm" onClick={() => setOrder((cur) => cur.filter((x) => x !== k))} aria-label={`Remove ${k}`}>
                    <X className="size-3.5" />
                  </Button>
                </span>
              </li>
            ))}
          </ol>
        ) : (
          <p className="rounded-md border border-dashed border-border px-3 py-2 text-[12.5px] text-fg-muted">No pinned routes — the engine orders candidates by score.</p>
        )}
        <div className="flex items-center gap-2">
          <NativeSelect value={pick} onChange={(e) => setPick(e.target.value)} className="w-[260px]" aria-label="Route to pin">
            <option value="">Add a route…</option>
            {candidates.map((k) => (
              <option key={k} value={k}>
                {k}
              </option>
            ))}
          </NativeSelect>
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={!pick}
            onClick={() => {
              if (pick) setOrder((cur) => [...cur, pick]);
              setPick("");
            }}
          >
            <Plus className="size-3.5" /> Pin
          </Button>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button type="submit" size="sm" loading={pending}>
          <Save className="size-3.5" /> Save policy
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => {
            setForce("");
            setOrder([]);
          }}
        >
          Clear
        </Button>
        <ResultMessage result={result} />
      </div>
    </form>
  );
}

export function ResetDomainStatsButton({ domain }: { domain: string }) {
  return (
    <ActionButton
      variant="outline"
      size="sm"
      action={() => resetDomainStats(domain)}
      confirm={{ title: `Reset learned stats for ${domain}?`, description: "Route statistics, block/captcha counters and the preferred route are cleared. The policy is kept. The router falls back to network priors until new data accumulates.", confirmLabel: "Reset stats" }}
    >
      <Eraser className="size-3.5" /> Reset stats
    </ActionButton>
  );
}