"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { RefreshCw, RotateCcw, Save } from "lucide-react";
import { resetCircuit, runProviderProbe, updateProviderConfig, type AdminActionResult, type ProviderConfigInput } from "@/actions/admin";
import { Button } from "@/components/ui/button";
import { Input, Textarea } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { ActionButton, ResultMessage } from "./action-button";

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

export interface ProviderConfigFormProps {
  id: string;
  label: string;
  enabled: boolean;
  networks: string[];
  pricePerGbUsd: Record<string, number>;
  weight: number;
  maxConcurrency: number;
  notes: string | null;
  /** Prices reported live by the API (fallback when no config row exists). */
  livePrices: Record<string, number>;
  liveNetworks: string[];
  hasConfigRow: boolean;
}

export function ProviderConfigForm(p: ProviderConfigFormProps) {
  const router = useRouter();
  const [pending, start] = React.useTransition();
  const [result, setResult] = React.useState<AdminActionResult | null>(null);
  const [enabled, setEnabled] = React.useState(p.enabled);
  const [networks, setNetworks] = React.useState<string[]>(p.networks.length ? p.networks : p.liveNetworks);
  const [prices, setPrices] = React.useState<Record<string, string>>(() => {
    const out: Record<string, string> = {};
    for (const n of ALL_NETWORKS) {
      const v = p.pricePerGbUsd[n] ?? p.livePrices[n];
      if (v !== undefined) out[n] = String(v);
    }
    return out;
  });
  const [weight, setWeight] = React.useState(String(p.weight));
  const [maxConcurrency, setMaxConcurrency] = React.useState(String(p.maxConcurrency));
  const [notes, setNotes] = React.useState(p.notes ?? "");

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    start(async () => {
      const pricePerGbUsd: Record<string, number> = {};
      for (const [k, v] of Object.entries(prices)) if (v.trim() !== "" && networks.includes(k)) pricePerGbUsd[k] = Number(v);
      const input: ProviderConfigInput = {
        label: p.label,
        enabled,
        networks: networks as ProviderConfigInput["networks"],
        pricePerGbUsd,
        weight: Number(weight),
        maxConcurrency: Number(maxConcurrency),
        notes: notes.trim() || null,
      };
      const r = await updateProviderConfig(p.id, input);
      setResult(r);
      if (r.ok) router.refresh();
    });
  };

  return (
    <form onSubmit={submit} className="grid gap-4">
      <div className="flex items-center gap-3">
        <Switch id={`en-${p.id}`} checked={enabled} onCheckedChange={setEnabled} aria-label="Enabled" />
        <Label htmlFor={`en-${p.id}`}>Enabled in routing</Label>
        {!p.hasConfigRow ? <Badge variant="outline">no config row yet — defaults shown</Badge> : null}
      </div>
      <div>
        <div className="mb-1.5 text-[13px] font-medium">Networks and price per GB (USD)</div>
        <div className="grid gap-2 sm:grid-cols-2">
          {ALL_NETWORKS.map((n) => {
            const on = networks.includes(n);
            return (
              <div key={n} className="flex items-center gap-2 rounded-md border border-border px-2.5 py-1.5">
                <input
                  type="checkbox"
                  id={`${p.id}-${n}`}
                  className="size-3.5 accent-[var(--accent)]"
                  checked={on}
                  onChange={(e) => setNetworks((cur) => (e.target.checked ? [...cur, n] : cur.filter((x) => x !== n)))}
                />
                <label htmlFor={`${p.id}-${n}`} className="w-24 text-[13px]">
                  {n}
                </label>
                <span className="text-[12px] text-fg-subtle">$</span>
                <Input
                  aria-label={`${n} price per GB`}
                  type="number"
                  min={0}
                  step="0.01"
                  inputMode="decimal"
                  disabled={!on}
                  value={prices[n] ?? ""}
                  onChange={(e) => setPrices((cur) => ({ ...cur, [n]: e.target.value }))}
                  className="h-7 w-24 font-mono text-[12.5px]"
                  placeholder="—"
                />
                <span className="text-[12px] text-fg-subtle">/GB</span>
              </div>
            );
          })}
        </div>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        <Field>
          <Label htmlFor={`w-${p.id}`}>Weight</Label>
          <Input id={`w-${p.id}`} type="number" min={0} max={10} step="0.1" value={weight} onChange={(e) => setWeight(e.target.value)} className="font-mono" />
          <Hint>Relative preference multiplier (1 = neutral).</Hint>
        </Field>
        <Field>
          <Label htmlFor={`mc-${p.id}`}>Max concurrency</Label>
          <Input id={`mc-${p.id}`} type="number" min={1} step={1} value={maxConcurrency} onChange={(e) => setMaxConcurrency(e.target.value)} className="font-mono" />
          <Hint>Upstream connection ceiling for this provider.</Hint>
        </Field>
      </div>
      <Field>
        <Label htmlFor={`notes-${p.id}`}>Notes</Label>
        <Textarea id={`notes-${p.id}`} value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Contract terms, account manager, quotas…" className="min-h-[64px]" />
      </Field>
      <div className="flex items-center gap-3">
        <Button type="submit" size="sm" loading={pending}>
          <Save className="size-3.5" /> Save &amp; reload providers
        </Button>
        <ResultMessage result={result} />
      </div>
    </form>
  );
}

export function CircuitList({ circuits }: { circuits: Array<{ key: string; state: string; failures: number; successes: number; openedAt: number | null }> }) {
  if (!circuits.length) return <p className="text-[12.5px] text-fg-muted">No circuit entries yet — circuits are created on the first attempt per route.</p>;
  return (
    <ul className="divide-y divide-border">
      {circuits.map((c) => (
        <li key={c.key} className="flex flex-wrap items-center gap-3 py-2 text-[12.5px]">
          <span className="font-mono">{c.key}</span>
          <StatusBadge status={c.state === "closed" ? "healthy" : c.state === "open" ? "down" : c.state} />
          <span className="tabular font-mono text-fg-muted">
            {c.successes} ok / {c.failures} fail
          </span>
          {c.openedAt ? <span className="text-fg-subtle">opened {new Date(c.openedAt).toLocaleTimeString()}</span> : null}
          <span className="ml-auto">
            <ActionButton variant="outline" size="xs" action={() => resetCircuit(c.key)}>
              <RotateCcw className="size-3" /> Reset circuit
            </ActionButton>
          </span>
        </li>
      ))}
    </ul>
  );
}

export function ProbeButton() {
  return (
    <ActionButton variant="primary" size="sm" action={() => runProviderProbe()}>
      <RefreshCw className="size-3.5" /> Run health probe now
    </ActionButton>
  );
}

export function ResetAllCircuitsButton() {
  return (
    <ActionButton variant="outline" size="sm" action={() => resetCircuit()} confirm={{ title: "Reset every circuit breaker?", description: "All routes become eligible again immediately, including ones that were failing.", confirmLabel: "Reset all" }}>
      <RotateCcw className="size-3.5" /> Reset all circuits
    </ActionButton>
  );
}