/**
 * CheckInButton Component
 * Botão para realizar check-in de paciente
 * @version 1.0
 */

import { CheckCircle } from "lucide-react";
import { useCheckInAppointment } from "../../hooks/useAppointments";

// ============================================================================
// TYPES
// ============================================================================

interface CheckInButtonProps {
  appointmentId: string;
  patientName: string;
  disabled?: boolean;
  className?: string;
}

// ============================================================================
// COMPONENT
// ============================================================================

export function CheckInButton({
  appointmentId,
  patientName,
  disabled = false,
  className = "",
}: CheckInButtonProps) {
  const checkInMutation = useCheckInAppointment();

  const handleCheckIn = () => {
    if (disabled) return;

    // Confirmação
    const confirmed = window.confirm(`Confirmar check-in de ${patientName}?`);

    if (confirmed) {
      checkInMutation.mutate(appointmentId);
    }
  };

  const isLoading = checkInMutation.isPending;

  return (
    <button
      onClick={handleCheckIn}
      disabled={disabled || isLoading}
      className={`
        inline-flex items-center justify-center gap-2
        px-4 py-2
        text-sm font-medium
        rounded-md
        transition-all duration-200
        focus:outline-none focus:ring-2 focus:ring-offset-2
        ${
          disabled || isLoading
            ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800"
            : "bg-purple-600 text-white hover:bg-purple-700 focus:ring-purple-500 dark:focus:ring-offset-gray-900"
        }
        ${className}
      `}
      type="button"
      aria-label={`Fazer check-in de ${patientName}`}
    >
      <CheckCircle
        className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
        aria-hidden="true"
      />
      {isLoading ? "Processando..." : "Check-in"}
    </button>
  );
}

// ============================================================================
// USAGE EXAMPLE
// ============================================================================

/*
// Em SecretaryAppointmentList.tsx ou similar:

import { CheckInButton } from '@/components/consultas/CheckInButton';

function AppointmentRow({ appointment }) {
  const showCheckIn = 
    appointment.status === 'confirmed' && 
    isToday(appointment.scheduled_at);

  return (
    <tr>
      <td>{appointment.patient_name}</td>
      <td>{appointment.scheduled_at}</td>
      <td>
        {showCheckIn && (
          <CheckInButton
            appointmentId={appointment.id}
            patientName={appointment.patient_name}
          />
        )}
      </td>
    </tr>
  );
}
*/
