"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

/**
 * Runs a network scan. The scan writes the server-side registry, so afterwards the
 * page is refreshed and the server re-renders the camera list.
 */
export default function CameraScanner() {
  const router = useRouter();
  const [scanning, setScanning] = useState(false);
  const [result, setResult] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [timeout, setTimeoutSecs] = useState(5);
  const [unicastSweep, setUnicastSweep] = useState(true);

  async function scan() {
    setScanning(true);
    setError(null);
    setResult(null);
    try {
      const res = await fetch("/api/discover", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        // The server rejects timeouts outside 1–30 s; keep a half-typed value in range.
        body: JSON.stringify({
          timeout: Math.min(Math.max(Math.round(timeout) || 5, 1), 30) * 1000,
          unicastSweep,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
      const found = data.cameras.length;
      setResult(`Scan found ${found} camera${found === 1 ? "" : "s"}`);
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setScanning(false);
    }
  }

  return (
    <>
      <button
        onClick={scan}
        disabled={scanning}
        className="rounded-md bg-black px-4 py-2 text-sm font-medium text-white disabled:opacity-50 dark:bg-white dark:text-black"
      >
        {scanning ? "Scanning…" : "Scan network"}
      </button>
      <label className="flex items-center gap-2 text-sm">
        Timeout
        <input
          type="number"
          min={1}
          max={30}
          value={timeout}
          onChange={(e) => setTimeoutSecs(Number(e.target.value))}
          className="w-16 rounded border border-zinc-300 bg-transparent px-2 py-1 dark:border-zinc-700"
        />
        s
      </label>
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          checked={unicastSweep}
          onChange={(e) => setUnicastSweep(e.target.checked)}
        />
        Unicast sweep of local subnet
      </label>
      {result && <p className="w-full text-sm text-zinc-600 dark:text-zinc-400">{result}</p>}
      {error && <p className="w-full text-sm text-red-600">Error: {error}</p>}
    </>
  );
}