'use client';

import * as React from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';

import { updateTenantStatus, type TenantStatusTransition } from '@/lib/api/tenants';
import { ApiError } from '@/lib/api/client';
import { toast } from '@/lib/toast';
import { STATUS_PILL_MAP } from '@/components/ui/status-pill';

import { Button } from '@/components/ui/button';
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

const TRANSITIONS: TenantStatusTransition[] = ['ativo', 'inadimplente', 'suspenso', 'cancelado'];

interface TenantStatusDialogProps {
  tenant: { id: string; razao_social: string; status: string } | null;
  onOpenChange: (open: boolean) => void;
  onSuccess?: () => void;
}

/**
 * Mudança de status de tenant com confirmação explícita (critério de
 * aceite da Etapa 15) — reaproveitado pela listagem e pelo detalhe de
 * tenant, já que a mesma ação aparece nos dois lugares.
 */
export function TenantStatusDialog({ tenant, onOpenChange, onSuccess }: TenantStatusDialogProps) {
  const queryClient = useQueryClient();
  const [target, setTarget] = React.useState<TenantStatusTransition | ''>('');

  React.useEffect(() => {
    setTarget('');
  }, [tenant?.id]);

  const mutation = useMutation({
    mutationFn: (status: TenantStatusTransition) => updateTenantStatus(tenant!.id, status),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['master', 'tenants'] });
      toast.success('Status do tenant atualizado.');
      onOpenChange(false);
      onSuccess?.();
    },
    onError: (err) => {
      toast.error(err instanceof ApiError ? err.message : 'Não foi possível atualizar o status.');
    },
  });

  return (
    <ResponsiveDialog
      open={tenant !== null}
      onOpenChange={onOpenChange}
      title={`Mudar status — ${tenant?.razao_social ?? ''}`}
      description="Suspender ou cancelar bloqueia imediatamente o login de todos os usuários deste tenant, mesmo com sessões já abertas."
      footer={
        <>
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={mutation.isPending}>
            Cancelar
          </Button>
          <Button
            variant={target === 'suspenso' || target === 'cancelado' ? 'destructive' : 'primary'}
            disabled={!target}
            loading={mutation.isPending}
            onClick={() => target && mutation.mutate(target)}
          >
            Confirmar
          </Button>
        </>
      }
    >
      <div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
        <p className="text-sm text-muted-foreground">
          Status atual: <span className="font-medium text-foreground">{STATUS_PILL_MAP[tenant?.status as keyof typeof STATUS_PILL_MAP]?.label ?? tenant?.status}</span>
        </p>
        <Select value={target} onValueChange={(v) => setTarget(v as TenantStatusTransition)}>
          <SelectTrigger className="w-full" aria-label="Novo status">
            <SelectValue placeholder="Selecione o novo status" />
          </SelectTrigger>
          <SelectContent>
            {TRANSITIONS.filter((status) => status !== tenant?.status).map((status) => (
              <SelectItem key={status} value={status}>
                {STATUS_PILL_MAP[status].label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </ResponsiveDialog>
  );
}