"use client";

import { useOptimistic, useState, useTransition } from "react";
import { setMonitoringAction } from "@/app/(dashboard)/apps/actions";
import { cn } from "@/lib/cn";

export function MonitoringToggle({ id, name, enabled }: { id: string; name: string; enabled: boolean }) {
  const [optimistic, setOptimistic] = useOptimistic(enabled);
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  function toggle() {
    startTransition(async () => {
      setError(null);
      setOptimistic(!optimistic);
      const result = await setMonitoringAction(id, !optimistic);
      if (!result.ok) setError(result.error);
    });
  }

  return (
    <div className="flex items-center gap-2">
      <button
        type="button"
        role="switch"
        aria-checked={optimistic}
        aria-label={`Monitoring for ${name}`}
        disabled={pending}
        onClick={toggle}
        className={cn(
          "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900",
          "disabled:opacity-60",
          optimistic ? "bg-emerald-600" : "bg-slate-300",
        )}
      >
        <span
          className={cn(
            "inline-block size-4 rounded-full bg-white shadow-sm transition-transform",
            optimistic ? "translate-x-4.5" : "translate-x-0.5",
          )}
        />
      </button>
      <span className={cn("text-xs font-medium", optimistic ? "text-emerald-700" : "text-slate-500")}>
        {optimistic ? "Enabled" : "Disabled"}
      </span>
      {error && (
        <span role="alert" className="text-xs text-red-600">
          {error}
        </span>
      )}
    </div>
  );
}