/**
 * EmptyState Component
 * Estado vazio consistente com ícone, mensagem e ação principal
 * @version 1.0
 */

import { LucideIcon } from "lucide-react";

const TRANSITIONS = {
  base: "transition-all duration-200 ease-in-out",
} as const;

// ============================================================================
// TIPOS
// ============================================================================

export interface EmptyStateProps {
  /**
   * Ícone do lucide-react
   */
  icon: LucideIcon;

  /**
   * Título principal
   */
  title: string;

  /**
   * Descrição detalhada
   */
  description: string;

  /**
   * Texto do botão de ação (opcional)
   */
  actionLabel?: string;

  /**
   * Callback ao clicar no botão
   */
  onAction?: () => void;

  /**
   * Variante visual
   */
  variant?: "default" | "info" | "warning";

  /**
   * Classes adicionais
   */
  className?: string;
}

// ============================================================================
// COMPONENTE
// ============================================================================

export function EmptyState({
  icon: Icon,
  title,
  description,
  actionLabel,
  onAction,
  variant = "default",
  className = "",
}: EmptyStateProps) {
  const variantStyles = {
    default: {
      iconBg: "bg-gray-100 dark:bg-gray-800",
      iconColor: "text-gray-400 dark:text-gray-500",
      titleColor: "text-gray-900 dark:text-gray-100",
      descColor: "text-gray-600 dark:text-gray-400",
    },
    info: {
      iconBg: "bg-blue-50 dark:bg-blue-950",
      iconColor: "text-blue-500 dark:text-blue-400",
      titleColor: "text-blue-900 dark:text-blue-100",
      descColor: "text-blue-700 dark:text-blue-300",
    },
    warning: {
      iconBg: "bg-yellow-50 dark:bg-yellow-950",
      iconColor: "text-yellow-500 dark:text-yellow-400",
      titleColor: "text-yellow-900 dark:text-yellow-100",
      descColor: "text-yellow-700 dark:text-yellow-300",
    },
  };

  const styles = variantStyles[variant];

  return (
    <div
      className={`flex flex-col items-center justify-center py-12 px-4 text-center ${className}`}
      role="status"
      aria-live="polite"
    >
      {/* Ícone */}
      <div
        className={`inline-flex items-center justify-center w-16 h-16 mb-4 ${styles.iconBg} rounded-full ${TRANSITIONS.base}`}
      >
        <Icon className={`w-8 h-8 ${styles.iconColor}`} aria-hidden="true" />
      </div>

      {/* Título */}
      <h3 className={`text-lg font-semibold mb-2 ${styles.titleColor}`}>
        {title}
      </h3>

      {/* Descrição */}
      <p className={`text-sm max-w-md mb-6 ${styles.descColor}`}>
        {description}
      </p>

      {/* Botão de Ação (opcional) */}
      {actionLabel && onAction && (
        <button
          onClick={onAction}
          className={`
            inline-flex items-center justify-center
            px-4 py-2
            bg-blue-600 hover:bg-blue-700
            text-white font-semibold
            rounded-md
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
            dark:focus:ring-offset-gray-900
            ${TRANSITIONS.base}
          `}
          type="button"
        >
          {actionLabel}
        </button>
      )}
    </div>
  );
}

// ============================================================================
// ESTADOS VAZIOS PRÉ-CONFIGURADOS
// ============================================================================

import {
  Calendar,
  FileText,
  Users,
  Clock,
  Inbox,
  AlertCircle,
  Search,
  Settings,
} from "lucide-react";

/**
 * Estado vazio para calendário sem consultas
 */
export function EmptyCalendar({
  onAddAppointment,
}: {
  onAddAppointment?: () => void;
}) {
  return (
    <EmptyState
      icon={Calendar}
      title="Nenhuma consulta agendada"
      description="Não há consultas marcadas para este dia. Que tal agendar uma nova consulta?"
      actionLabel={onAddAppointment ? "Agendar Consulta" : undefined}
      onAction={onAddAppointment}
      variant="default"
    />
  );
}

/**
 * Estado vazio para paciente sem histórico
 */
export function EmptyPatientHistory({
  onViewProfile,
}: {
  onViewProfile?: () => void;
}) {
  return (
    <EmptyState
      icon={FileText}
      title="Nenhum histórico encontrado"
      description="Este paciente ainda não possui consultas anteriores ou relatórios cadastrados."
      actionLabel={onViewProfile ? "Ver Perfil Completo" : undefined}
      onAction={onViewProfile}
      variant="info"
    />
  );
}

/**
 * Estado vazio para nenhum relatório
 */
export function EmptyReports({
  onCreateReport,
}: {
  onCreateReport?: () => void;
}) {
  return (
    <EmptyState
      icon={FileText}
      title="Nenhum relatório cadastrado"
      description="Comece criando seu primeiro relatório para acompanhar métricas e análises."
      actionLabel={onCreateReport ? "Criar Relatório" : undefined}
      onAction={onCreateReport}
      variant="default"
    />
  );
}

/**
 * Estado vazio para disponibilidade não configurada
 */
export function EmptyAvailability({
  onConfigureAvailability,
}: {
  onConfigureAvailability?: () => void;
}) {
  return (
    <EmptyState
      icon={Clock}
      title="Disponibilidade não configurada"
      description="Configure seus horários disponíveis para que pacientes possam agendar consultas."
      actionLabel={onConfigureAvailability ? "Configurar Horários" : undefined}
      onAction={onConfigureAvailability}
      variant="warning"
    />
  );
}

/**
 * Estado vazio para sala de espera
 */
export function EmptyWaitingRoom() {
  return (
    <EmptyState
      icon={Inbox}
      title="Sala de espera vazia"
      description="Nenhum paciente fez check-in ainda. Eles aparecerão aqui assim que chegarem."
      variant="default"
    />
  );
}

/**
 * Estado vazio para nenhum paciente encontrado
 */
export function EmptyPatientList({
  onAddPatient,
}: {
  onAddPatient?: () => void;
}) {
  return (
    <EmptyState
      icon={Users}
      title="Nenhum paciente encontrado"
      description="Não há pacientes cadastrados ou sua busca não retornou resultados."
      actionLabel={onAddPatient ? "Cadastrar Paciente" : undefined}
      onAction={onAddPatient}
      variant="default"
    />
  );
}

/**
 * Estado vazio para slots indisponíveis
 */
export function EmptyAvailableSlots() {
  return (
    <EmptyState
      icon={AlertCircle}
      title="Nenhum horário disponível"
      description="Não há horários livres para a data selecionada. Tente outra data ou entre em contato."
      variant="warning"
    />
  );
}

/**
 * Estado vazio para busca sem resultados
 */
export function EmptySearchResults({ query }: { query?: string }) {
  return (
    <EmptyState
      icon={Search}
      title="Nenhum resultado encontrado"
      description={
        query
          ? `Não encontramos resultados para "${query}". Tente ajustar sua busca.`
          : "Sua busca não retornou resultados. Tente usar termos diferentes."
      }
      variant="default"
    />
  );
}

/**
 * Estado vazio para configurações pendentes
 */
export function EmptySettings({
  onOpenSettings,
}: {
  onOpenSettings?: () => void;
}) {
  return (
    <EmptyState
      icon={Settings}
      title="Configurações pendentes"
      description="Complete as configurações iniciais para começar a usar o sistema."
      actionLabel={onOpenSettings ? "Abrir Configurações" : undefined}
      onAction={onOpenSettings}
      variant="info"
    />
  );
}
