'use client';

import { useRouter } from 'next/navigation';
import { useState, useTransition } from 'react';

export function GroupOptOutButton({ groupId, groupName }: { groupId: string; groupName: string }) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  function handleClick() {
    if (!window.confirm(`Revoke consent for "${groupName}"? Your messages will no longer be archived from this group.`)) {
      return;
    }
    setError(null);
    startTransition(async () => {
      const res = await fetch('/api/my/opt-out', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ groupId }),
      });
      if (!res.ok) {
        const body = (await res.json().catch(() => ({}))) as { message?: string };
        setError(body.message ?? 'Opt-out failed');
        return;
      }
      router.refresh();
    });
  }

  return (
    <div className="flex flex-col items-end gap-1">
      <button
        type="button"
        onClick={handleClick}
        disabled={pending}
        className="rounded border border-red-200 px-3 py-1 text-xs text-red-700 hover:bg-red-50 disabled:opacity-50"
      >
        {pending ? 'Revoking…' : 'Revoke consent'}
      </button>
      {error && <span className="text-xs text-red-600">{error}</span>}
    </div>
  );
}