import { requirePageAccess } from "@/lib/access";
import { listCameras } from "@/lib/camera-registry";
import CameraCard from "./camera-card";
import CameraScanner from "./camera-scanner";
import RefreshRateSelect from "./refresh-rate-select";
import { refreshMsSchema } from "./refresh-rate";

export default async function Home({ searchParams }: PageProps<"/">) {
  await requirePageAccess();
  const [cameras, { refresh }] = await Promise.all([listCameras(), searchParams]);
  const intervalMs = refreshMsSchema.parse(refresh);

  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-12 font-sans">
      <h1 className="text-3xl font-semibold tracking-tight">ONVIF Cameras</h1>
      <p className="mt-2 text-zinc-600 dark:text-zinc-400">
        Discover ONVIF cameras on the local network using WS-Discovery.
      </p>

      <section className="mt-8">
        <div className="flex flex-wrap items-center gap-4">
          <CameraScanner />
          <RefreshRateSelect value={intervalMs} />
        </div>

        <div className="mt-6">
          <p className="text-sm text-zinc-600 dark:text-zinc-400">
            {cameras.length === 0
              ? "No cameras known yet. Scan the network to find them."
              : `${cameras.length} camera${cameras.length === 1 ? "" : "s"}`}
          </p>
          <ul className="mt-3 grid gap-3 sm:grid-cols-2">
            {cameras.map((cam) => (
              <CameraCard key={cam.id} cam={cam} intervalMs={intervalMs} />
            ))}
          </ul>
        </div>
      </section>
    </main>
  );
}