'use client';
import { useState } from 'react';
import { rollbackAction } from '@/lib/admin/actions';
import { ActionButton } from './ui';

/**
 * Rollback with confirmation: the operator must repeat the run id (works without JS through the same form; with JS the
 * field appears inline). The server action refuses when the confirmation does not match.
 */
export function RollbackButton({ runId, connector, returnTo, disabled }: { runId: string; connector: string; returnTo: string; disabled?: boolean }) {
  const [open, setOpen] = useState(false);
  const [typed, setTyped] = useState('');
  if (!open)
    return (
      <button type="button" onClick={() => setOpen(true)} disabled={disabled} className="inline-flex h-8 items-center border border-danger/60 px-2 text-xs font-medium text-danger hover:bg-danger-soft disabled:cursor-not-allowed disabled:opacity-40" title="Retract this run's claims, close its rows, flag its events (deletes nothing)" data-rollback>
        Rollback
      </button>
    );
  return (
    <form action={rollbackAction} className="flex flex-wrap items-center gap-1.5" data-rollback-form>
      <input type="hidden" name="run_id" value={runId} />
      <input type="hidden" name="return" value={returnTo} />
      <label className="flex items-center gap-1 text-[11px] text-ink-2">
        <span className="whitespace-nowrap">
          Type the run id to confirm ({connector}):
        </span>
        <input name="confirm" value={typed} onChange={(e) => setTyped(e.target.value)} placeholder={runId} className="mono h-8 w-64 border border-rule bg-surface px-2 text-[11px] text-ink focus:border-danger focus:outline-none" autoFocus />
      </label>
      <ActionButton tone="danger" disabled={typed !== runId} title="Confirmed rollback">
        Confirm rollback
      </ActionButton>
      <button type="button" onClick={() => setOpen(false)} className="h-8 px-2 text-xs text-ink-3 hover:text-ink">
        Cancel
      </button>
    </form>
  );
}