'use client';

import { useRouter } from 'next/navigation';
import { useState, useTransition } from 'react';
import { cn } from '@/lib/cn';
import type { ReviewDecision } from './types';

/**
 * Admin mutations. Each button POSTs to a Next route handler (same origin, session cookie) which forwards to FastAPI with the
 * server-side token, then refreshes the server components. Errors are shown inline — never swallowed.
 */
async function post(path: string, body?: unknown): Promise<{ ok: true; data: Record<string, unknown> } | { ok: false; error: string }> {
  try {
    const res = await fetch(path, { method: 'POST', headers: body !== undefined ? { 'content-type': 'application/json' } : undefined, body: body !== undefined ? JSON.stringify(body) : undefined });
    const json = (await res.json().catch(() => ({}))) as Record<string, unknown> & { error?: { detail?: string; title?: string } };
    if (!res.ok) return { ok: false, error: json.error?.detail || json.error?.title || `HTTP ${res.status}` };
    return { ok: true, data: json };
  } catch (e) {
    return { ok: false, error: (e as Error).message };
  }
}

const btn = 'inline-flex min-h-9 items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50';
const btnNeutral = 'border-rule text-ink-2 hover:bg-plane-2 hover:text-ink';
const btnAccent = 'border-accent/40 bg-accent-soft text-accent hover:bg-accent/20';
const btnDanger = 'border-danger/40 bg-danger-soft text-danger hover:bg-danger/20';

export function RunNowButton({ name, className }: { name: string; className?: string }) {
  const router = useRouter();
  const [pending, start] = useTransition();
  const [msg, setMsg] = useState<{ tone: 'ok' | 'err'; text: string } | null>(null);
  return (
    <span className={cn('inline-flex flex-wrap items-center gap-2', className)}>
      <button
        type="button"
        disabled={pending}
        className={cn(btn, btnAccent)}
        onClick={() =>
          start(async () => {
            setMsg(null);
            const r = await post(`/api/admin/connectors/${encodeURIComponent(name)}/run`);
            if (r.ok) {
              const queued = r.data.queued === true;
              setMsg({ tone: queued ? 'ok' : 'err', text: queued ? 'queued' : String(r.data.note ?? 'not queued') });
              router.refresh();
            } else setMsg({ tone: 'err', text: r.error });
          })
        }
      >
        {pending ? 'Queuing…' : 'Run now'}
      </button>
      {msg && <span className={cn('text-xs', msg.tone === 'ok' ? 'text-active' : 'text-danger')}>{msg.text}</span>}
    </span>
  );
}

export function EnabledToggle({ name, enabled, className }: { name: string; enabled: boolean; className?: string }) {
  const router = useRouter();
  const [pending, start] = useTransition();
  const [err, setErr] = useState<string | null>(null);
  return (
    <span className={cn('inline-flex flex-wrap items-center gap-2', className)}>
      <button
        type="button"
        role="switch"
        aria-checked={enabled}
        disabled={pending}
        className={cn(btn, enabled ? btnNeutral : btnAccent)}
        onClick={() =>
          start(async () => {
            setErr(null);
            const r = await post(`/api/admin/connectors/${encodeURIComponent(name)}/enabled`, { enabled: !enabled });
            if (r.ok) router.refresh();
            else setErr(r.error);
          })
        }
      >
        {pending ? '…' : enabled ? 'Disable' : 'Enable'}
      </button>
      {err && <span className="text-xs text-danger">{err}</span>}
    </span>
  );
}

const DECISION_LABELS: Record<ReviewDecision, string> = { merged: 'Merge B into A', kept_separate: 'Keep separate', dismissed: 'Dismiss' };

export function ReviewDecisionButtons({ id, canMerge, className }: { id: number; canMerge: boolean; className?: string }) {
  const router = useRouter();
  const [pending, start] = useTransition();
  const [msg, setMsg] = useState<{ tone: 'ok' | 'err'; text: string } | null>(null);
  const [confirmMerge, setConfirmMerge] = useState(false);
  const decide = (decision: ReviewDecision) =>
    start(async () => {
      setMsg(null);
      const r = await post(`/api/admin/review/${id}`, { decision });
      if (r.ok) {
        setMsg({ tone: 'ok', text: `recorded: ${decision.replace('_', ' ')}` });
        setConfirmMerge(false);
        router.refresh();
      } else setMsg({ tone: 'err', text: r.error });
    });
  return (
    <div className={cn('flex flex-wrap items-center gap-2', className)}>
      {canMerge &&
        (confirmMerge ? (
          <>
            <button type="button" disabled={pending} className={cn(btn, btnDanger)} onClick={() => decide('merged')}>
              Confirm merge (audited)
            </button>
            <button type="button" disabled={pending} className={cn(btn, btnNeutral)} onClick={() => setConfirmMerge(false)}>
              Cancel
            </button>
          </>
        ) : (
          <button type="button" disabled={pending} className={cn(btn, btnAccent)} onClick={() => setConfirmMerge(true)}>
            {DECISION_LABELS.merged}
          </button>
        ))}
      <button type="button" disabled={pending} className={cn(btn, btnNeutral)} onClick={() => decide('kept_separate')}>
        {DECISION_LABELS.kept_separate}
      </button>
      <button type="button" disabled={pending} className={cn(btn, btnNeutral)} onClick={() => decide('dismissed')}>
        {DECISION_LABELS.dismissed}
      </button>
      {pending && <span className="text-xs text-ink-3">Saving…</span>}
      {msg && <span className={cn('text-xs', msg.tone === 'ok' ? 'text-active' : 'text-danger')}>{msg.text}</span>}
    </div>
  );
}