"use client";

import { useRouter } from "next/navigation";
import { useId, useState, useTransition } from "react";
import { Button, inputClass } from "@/components/ui";
import { checkUptimeNowAction } from "@/lib/actions/reports";

export function UptimeControls({ siteId, base, from, to, canCheck }: { siteId: string; base: string; from: string; to: string; canCheck: boolean }) {
  const uid = useId();
  const router = useRouter();
  const [f, setF] = useState(from);
  const [t, setT] = useState(to);
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [pending, start] = useTransition();
  return (
    <div className="mb-4">
      <form className="flex flex-wrap items-end gap-3" onSubmit={(e) => { e.preventDefault(); router.push(`${base}?from=${encodeURIComponent(f)}&to=${encodeURIComponent(t)}`); }}>
        <div><label htmlFor={`${uid}-f`} className="mb-1 block text-xs font-medium">Start date</label><input id={`${uid}-f`} type="date" required className={inputClass} value={f} max={t} onChange={(e) => setF(e.target.value)} /></div>
        <div><label htmlFor={`${uid}-t`} className="mb-1 block text-xs font-medium">End date</label><input id={`${uid}-t`} type="date" required className={inputClass} value={t} min={f} onChange={(e) => setT(e.target.value)} /></div>
        <Button type="submit">Apply Filters</Button>
        {canCheck ? <Button variant="secondary" disabled={pending} onClick={() => start(async () => { const r = await checkUptimeNowAction(siteId); setMsg({ ok: r.ok, text: r.ok ? (r.message ?? "Check recorded") : r.error }); if (r.ok) router.refresh(); })}>{pending ? "Checking…" : "Refresh Data"}</Button> : null}
      </form>
      <p role="status" aria-live="polite" className={msg ? (msg.ok ? "mt-2 text-sm text-success" : "mt-2 text-sm text-danger") : "sr-only"}>{msg?.text}</p>
    </div>
  );
}