'use client';

import { useState, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui';
import { Modal, ModalFooter } from '@/components/ui';

interface DeleteTeamButtonProps {
  teamId: string;
  teamName: string;
}

export function DeleteTeamButton({ teamId, teamName }: DeleteTeamButtonProps) {
  const router = useRouter();
  const [showModal, setShowModal] = useState(false);
  const [isPending, startTransition] = useTransition();

  const handleDelete = () => {
    startTransition(async () => {
      try {
        const response = await fetch(`/api/teams/${teamId}`, {
          method: 'DELETE',
        });

        if (!response.ok) {
          const error = await response.json();
          alert(error.error || "Erreur lors de la suppression de l'équipe");
          return;
        }

        router.push('/teams');
        router.refresh();
      } catch (error) {
        console.error('Error deleting team:', error);
        alert("Erreur lors de la suppression de l'équipe");
      }
    });
  };

  return (
    <>
      <Button
        onClick={() => setShowModal(true)}
        variant="outline"
        className="text-destructive border-destructive hover:bg-destructive/10"
      >
        Supprimer l&apos;équipe
      </Button>

      <Modal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        title="Supprimer l'équipe"
        size="sm"
      >
        <div className="space-y-4">
          <p className="text-muted">
            Êtes-vous sûr de vouloir supprimer l&apos;équipe{' '}
            <strong className="text-foreground">&quot;{teamName}&quot;</strong> ?
          </p>
          <p className="text-sm text-destructive">
            Cette action est irréversible. Tous les membres, OKRs et données associées seront
            supprimés.
          </p>
          <ModalFooter>
            <Button variant="ghost" onClick={() => setShowModal(false)} disabled={isPending}>
              Annuler
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={isPending}>
              {isPending ? 'Suppression...' : 'Supprimer'}
            </Button>
          </ModalFooter>
        </div>
      </Modal>
    </>
  );
}