"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Switch } from "@/components/ui/switch";
import { updateMinefield } from "@/app/(frontend)/minigames/eod/custom/actions";

export function ExposureRuleToggle({
  minefieldId,
  exposeEdgeMines,
}: {
  minefieldId: number;
  exposeEdgeMines: boolean;
}) {
  const router = useRouter();
  const [checked, setChecked] = useState(exposeEdgeMines);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const onCheckedChange = async (next: boolean) => {
    setError(null);
    setPending(true);
    const result = await updateMinefield({ id: minefieldId, exposeEdgeMines: next });
    setPending(false);
    if (result.success) {
      setChecked(next);
      router.refresh();
    } else {
      setError(result.error ?? "Could not update the exposure rule.");
    }
  };

  return (
    <div className="flex w-full max-w-5xl flex-col gap-1 rounded-lg border border-border bg-card p-3">
      <div className="flex items-center justify-between gap-3">
        <label htmlFor="exposure-rule" className="text-sm font-medium">
          Reveal bordering charges on failed runs
        </label>
        <Switch
          id="exposure-rule"
          checked={checked}
          disabled={pending}
          onCheckedChange={onCheckedChange}
        />
      </div>
      <p className="text-xs text-muted-foreground">
        {checked
          ? "Failed runs show mines touching the swept area; everything else stays hidden."
          : "Failed runs reveal no remaining charges; swept cells turn gray with a question mark."}
      </p>
      {error && <p className="text-xs text-destructive">{error}</p>}
    </div>
  );
}