/**
 * ConfirmAppointmentButton Component
 * Botão para confirmação 1-clique de consultas
 * @version 1.0
 */

import { CheckCircle, Loader2 } from "lucide-react";
import { useConfirmAppointment } from "../../hooks/useAppointments";

interface ConfirmAppointmentButtonProps {
  appointmentId: string;
  currentStatus: string;
  patientName?: string;
  patientPhone?: string;
  scheduledAt?: string;
  className?: string;
}

export function ConfirmAppointmentButton({
  appointmentId,
  currentStatus,
  patientName,
  patientPhone,
  scheduledAt,
  className = "",
}: ConfirmAppointmentButtonProps) {
  const confirmMutation = useConfirmAppointment();

  // Só mostrar para consultas requested (aguardando confirmação)
  if (currentStatus !== "requested") {
    return null;
  }

  const handleConfirm = async () => {
    try {
      await confirmMutation.mutateAsync({
        appointmentId,
        patientPhone,
        patientName,
        scheduledAt,
      });
    } catch (error) {
      console.error("Erro ao confirmar consulta:", error);
    }
  };

  return (
    <button
      onClick={handleConfirm}
      disabled={confirmMutation.isPending}
      className={`
        inline-flex items-center gap-2 px-3 py-1.5 rounded-lg font-medium text-sm
        bg-green-600 hover:bg-green-700 text-white
        disabled:opacity-50 disabled:cursor-not-allowed
        transition-all duration-200 hover:shadow-md
        ${className}
      `}
      title="Confirmar consulta e enviar notificação"
    >
      {confirmMutation.isPending ? (
        <>
          <Loader2 className="w-4 h-4 animate-spin" />
          Confirmando...
        </>
      ) : (
        <>
          <CheckCircle className="w-4 h-4" />
          Confirmar
        </>
      )}
    </button>
  );
}

// Skeleton para loading state
export function ConfirmAppointmentButtonSkeleton() {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse">
      <div className="w-4 h-4 bg-gray-300 dark:bg-gray-600 rounded" />
      <div className="w-20 h-4 bg-gray-300 dark:bg-gray-600 rounded" />
    </div>
  );
}
