'use client';

import { useState } from 'react';
import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';

interface HealthResponse {
  ok: boolean;
  status?: number;
  error?: string;
}

export function DocumensoTestButton() {
  const [pending, setPending] = useState(false);
  const [result, setResult] = useState<HealthResponse | null>(null);

  async function runTest() {
    setPending(true);
    setResult(null);
    try {
      const res = await apiFetch<{ data: HealthResponse }>('/api/v1/admin/documenso/health', {
        method: 'POST',
      });
      setResult(res.data);
      if (res.data.ok) {
        toast.success(`Documenso reachable (HTTP ${res.data.status ?? 200})`);
      } else {
        toast.error(
          res.data.error ?? `Documenso responded with HTTP ${res.data.status ?? 'unknown'}`,
        );
      }
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Test failed';
      setResult({ ok: false, error: message });
      toastError(err);
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="flex items-center gap-3">
      {result &&
        (result.ok ? (
          <span className="flex items-center text-xs text-green-600">
            <CheckCircle2 className="mr-1 h-3.5 w-3.5" aria-hidden />
            HTTP {result.status}
          </span>
        ) : (
          <span className="flex items-center text-xs text-destructive">
            <XCircle className="mr-1 h-3.5 w-3.5" aria-hidden />
            {result.error ?? `HTTP ${result.status}`}
          </span>
        ))}
      <Button variant="outline" onClick={runTest} disabled={pending}>
        {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />}
        Test connection
      </Button>
    </div>
  );
}