"use client";

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

export function CompareForm({ snapshots }: { snapshots: { id: string; label: string }[] }) {
  const router = useRouter();
  const [a, setA] = useState(snapshots[1]?.id ?? "");
  const [b, setB] = useState(snapshots[0]?.id ?? "");
  if (snapshots.length < 2) return <p className="text-[12.5px] text-fg-subtle">At least two snapshots are needed to compare.</p>;
  const sel = "h-8 w-full rounded-md border border-line bg-panel px-2 font-mono text-[12px]";
  return (
    <form
      className="grid gap-2 sm:grid-cols-[1fr_1fr_auto]"
      onSubmit={(e) => {
        e.preventDefault();
        if (a && b && a !== b) router.push(`/compare?a=${a}&b=${b}`);
      }}
    >
      <label className="text-[11px] text-fg-subtle">
        Before
        <select value={a} onChange={(e) => setA(e.target.value)} className={sel}>
          {snapshots.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}
        </select>
      </label>
      <label className="text-[11px] text-fg-subtle">
        After
        <select value={b} onChange={(e) => setB(e.target.value)} className={sel}>
          {snapshots.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}
        </select>
      </label>
      <button type="submit" className="self-end rounded-md border border-line bg-panel-2 px-3 py-1.5 text-[12.5px] hover:border-line-strong">Compare</button>
    </form>
  );
}