import React, { useEffect, useState, useMemo } from 'react';
import { useAniversariantes } from '../hooks/useAniversariantes';
import ExcelTable from '../components/ExcelTable';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  Gift, 
  Search, 
  RefreshCw,
  Calendar,
  Cake,
  Users,
  TrendingUp,
  CalendarDays,
  Sparkles
} from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';

/**
 * View de Gestão Completa de Aniversariantes
 * Integra todas as rotas de aniversariantes da API
 */
export const GestaoAniversariantesView = () => {
  const {
    aniversariantes,
    aniversariantesHoje,
    aniversariantesMesAtual,
    aniversariantesProximosMeses,
    aniversariantesProximosMesesPorMes,
    quantitativo,
    estatisticas,
    loading,
    loadingHoje,
    loadingMesAtual,
    loadingProximosMeses,
    loadingQuantitativo,
    loadingEstatisticas,
    filters,
    fetchAll,
    fetchGestaoAniversariantes,
    fetchAniversariantesHoje,
    fetchAniversariantesMesAtual,
    fetchAniversariantesProximosMeses,
    fetchQuantitativo,
    fetchEstatisticas,
    setFilters
  } = useAniversariantes();

  const [activeTab, setActiveTab] = useState('proximos-meses');
  const [modalMesAberto, setModalMesAberto] = useState(false);
  const [mesSelecionado, setMesSelecionado] = useState(null);

  useEffect(() => {
    // Carregar todos os dados ao montar o componente
    fetchAll();
  }, [fetchAll]);

  // Quando o filtro de mês é aplicado, mudar para a aba 'proximos-meses'
  useEffect(() => {
    if (filters.mes && activeTab !== 'proximos-meses') {
      setActiveTab('proximos-meses');
    }
  }, [filters.mes, activeTab]);

  const columns = [
    { field: 'id', header: 'ID', width: 80 },
    { field: 'nome', header: 'Nome', width: 250 },
    { field: 'cargo', header: 'Cargo', width: 180 },
    { field: 'base', header: 'Base', width: 120 },
    { field: 'empresa', header: 'Empresa', width: 150 },
    { field: 'data_nascimento', header: 'Data de Nascimento', width: 150, render: (row) => {
      if (!row.data_nascimento) return <span className="text-[clamp(1rem,1.2vw,1.125rem)] font-mono">-</span>;
      
      // Se já está no formato DD/MM/YYYY, apenas exibir
      if (typeof row.data_nascimento === 'string' && row.data_nascimento.includes('/')) {
        const parts = row.data_nascimento.split('/');
        if (parts.length === 3) {
          // Validar se é um formato válido DD/MM/YYYY
          const [dia, mes, ano] = parts;
          if (dia.length === 2 && mes.length === 2 && ano.length === 4) {
            return <span className="text-[clamp(1rem,1.2vw,1.125rem)] font-mono">{row.data_nascimento}</span>;
          }
        }
      }
      
      // Tentar converter para Date se não for string com /
      try {
        const date = new Date(row.data_nascimento);
        if (!isNaN(date.getTime())) {
          return <span className="text-[clamp(1rem,1.2vw,1.125rem)] font-mono">{date.toLocaleDateString('pt-BR')}</span>;
        }
      } catch (e) {
        console.warn('Erro ao formatar data:', e);
      }
      
      // Fallback: exibir como está
      return <span className="text-[clamp(1rem,1.2vw,1.125rem)] font-mono">{row.data_nascimento}</span>;
    }},
    { field: 'dia_aniversario', header: 'Dia', width: 80 },
    { field: 'mes_aniversario', header: 'Mês', width: 100, render: (row) => {
      const meses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
      return <span className="text-[clamp(1rem,1.2vw,1.125rem)] font-semibold">{meses[row.mes_aniversario - 1] || row.mes_aniversario}</span>;
    }},
    { field: 'idade', header: 'Idade', width: 80 },
    { field: 'status', header: 'Status', width: 100, render: (row) => {
      const status = row.status || row.status_contrato || 'N/A';
      const isAtivo = status === 'Ativo' || status === 'ATIVO';
      return (
        <span className={`px-2 py-1 rounded-xl text-[clamp(1rem,1.2vw,1.125rem)] font-medium ${
          isAtivo
            ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' 
            : 'bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-300'
        }`}>
          {status}
        </span>
      );
    }}
  ];

  // Colunas simplificadas para o modal (apenas nome, cargo, base, idade)
  const columnsModal = [
    { field: 'nome', header: 'Nome', width: 300 },
    { field: 'cargo', header: 'Cargo', width: 250 },
    { field: 'base', header: 'Base', width: 180 },
    { field: 'idade', header: 'Idade', width: 100, render: (row) => {
      return <span className="text-[clamp(1rem,1.2vw,1.125rem)] font-semibold">{row.idade || '-'}</span>;
    }}
  ];

  // Estatísticas dinâmicas baseadas nos dados da API
  const stats = useMemo(() => {
    const total = aniversariantes.length;
    const ativos = aniversariantes.filter(a => (a.status === 'Ativo' || a.status_contrato === 'Ativo' || a.status_contrato === 'ATIVO')).length;
    const hoje = aniversariantesHoje.length;
    const mesAtual = aniversariantesMesAtual.length;
    const proximosMeses = aniversariantesProximosMeses.length;

    // Usar estatísticas da API se disponível, senão calcular localmente
    const statsFromAPI = estatisticas || {};
    
    return [
      // {
      //   label: 'Total de Aniversariantes',
      //   value: statsFromAPI.total_ativos_com_data_nascimento || statsFromAPI.total || total,
      //   icon: Users,
      //   color: 'bg-pink-500/10 text-pink-500'
      // },
      // {
      //   label: 'Aniversariantes Ativos',
      //   value: ativos,
      //   icon: Cake,
      //   color: 'bg-purple-500/10 text-purple-500'
      // },
      {
        label: 'Aniversariantes Hoje',
        value: statsFromAPI.aniversariantes_hoje !== undefined ? statsFromAPI.aniversariantes_hoje : hoje,
        icon: Sparkles,
        color: 'bg-yellow-500/10 text-yellow-500'
      },
      {
        label: 'Mês Atual',
        value: statsFromAPI.aniversariantes_mes_atual !== undefined ? statsFromAPI.aniversariantes_mes_atual : mesAtual,
        icon: Calendar,
        color: 'bg-blue-500/10 text-blue-500'
      },
      {
        label: 'Próximos Meses',
        value: proximosMeses,
        icon: CalendarDays,
        color: 'bg-green-500/10 text-green-500'
      },
      {
        label: 'Média por Mês',
        value: quantitativo && Array.isArray(quantitativo) && quantitativo.length > 0
          ? Math.round(quantitativo.reduce((sum, item) => sum + (item.quantidade || 0), 0) / quantitativo.length)
          : Math.round(total / 12) || 0,
        icon: TrendingUp,
        color: 'bg-indigo-500/10 text-indigo-500'
      }
    ];
  }, [aniversariantes, aniversariantesHoje, aniversariantesMesAtual, aniversariantesProximosMeses, estatisticas, quantitativo]);

  // Agrupar por mês
  const aniversariantesPorMes = useMemo(() => {
    const grupos = {};
    aniversariantes.forEach(a => {
      const mes = a.mes_aniversario || new Date(a.data_nascimento).getMonth() + 1;
      if (!grupos[mes]) grupos[mes] = [];
      grupos[mes].push(a);
    });
    return grupos;
  }, [aniversariantes]);

  // Dados baseados na aba ativa
  const dadosAtivos = useMemo(() => {
    switch (activeTab) {
      case 'hoje':
        return aniversariantesHoje;
      case 'mes-atual':
        return aniversariantesMesAtual;
      case 'proximos-meses':
        return aniversariantesProximosMeses;
      default:
        return aniversariantes;
    }
  }, [activeTab, aniversariantes, aniversariantesHoje, aniversariantesMesAtual, aniversariantesProximosMeses]);

  const loadingAtivo = useMemo(() => {
    switch (activeTab) {
      case 'hoje':
        return loadingHoje;
      case 'mes-atual':
        return loadingMesAtual;
      case 'proximos-meses':
        return loadingProximosMeses;
      default:
        return loading;
    }
  }, [activeTab, loading, loadingHoje, loadingMesAtual, loadingProximosMeses]);

  const filteredAniversariantes = useMemo(() => {
    let result = [...dadosAtivos];
    
    // Filtro de busca (aplica em todas as abas)
    if (filters.search) {
      const searchLower = filters.search.toLowerCase();
      result = result.filter(a => 
        (a.nome || '').toLowerCase().includes(searchLower) ||
        (a.cargo || '').toLowerCase().includes(searchLower)
      );
    }
    
    // Filtro de mês - aplicar APENAS na aba "Próximos Meses"
    if (filters.mes && activeTab === 'proximos-meses') {
      const mesFiltro = Number(filters.mes); // Garantir que é número
      result = result.filter(a => {
        // Tentar usar mes_aniversario primeiro, depois mes (da API), depois calcular da data_nascimento
        const mesAniversario = a.mes_aniversario || a.mes || null;
        if (mesAniversario !== null && mesAniversario !== undefined) {
          // Garantir comparação numérica
          const match = Number(mesAniversario) === mesFiltro;
          return match;
        }
        // Fallback: calcular da data_nascimento
        if (a.data_nascimento) {
          try {
            let dataNascimento = null;
            if (typeof a.data_nascimento === 'string' && a.data_nascimento.includes('/')) {
              const [dia, mes, ano] = a.data_nascimento.split('/');
              dataNascimento = new Date(parseInt(ano), parseInt(mes) - 1, parseInt(dia));
            } else {
              dataNascimento = new Date(a.data_nascimento);
            }
            if (dataNascimento && !isNaN(dataNascimento.getTime())) {
              return dataNascimento.getMonth() + 1 === mesFiltro;
            }
          } catch (e) {
            console.warn('Erro ao processar data_nascimento para filtro:', e);
          }
        }
        return false;
      });
    }
    
    return result;
  }, [dadosAtivos, filters, activeTab]);

  return (
    <div className="theme-rh flex-1 flex flex-col h-full w-full overflow-hidden bg-slate-50/50 dark:bg-[#0a0a0a] p-4 sm:p-6 md:p-8">
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
        <div className="space-y-1">
          <div className="flex items-center gap-3">
            <div className="p-2 sm:p-3 bg-pink-500/10 rounded-3xl">
              <Gift className="text-pink-500" size={24} />
            </div>
            <h1 className="text-[clamp(1.5rem,3vw,2.25rem)] font-semibold text-slate-800 dark:text-white tracking-tight">
              Gestão de Aniversariantes
            </h1>
          </div>
          <p className="text-slate-500 text-[clamp(1rem,1.4vw,1.25rem)] font-normal ml-1">
            Gestão completa de aniversariantes do ano
          </p>
        </div>
        
        <Button 
          onClick={() => fetchAll()}
          disabled={loading || loadingHoje || loadingMesAtual || loadingProximosMeses || loadingQuantitativo || loadingEstatisticas}
          variant="outline"
          size="sm"
        >
          <RefreshCw size={16} className={(loading || loadingHoje || loadingMesAtual || loadingProximosMeses || loadingQuantitativo || loadingEstatisticas) ? 'animate-spin' : ''} />
        </Button>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {stats.map((stat, idx) => {
          const Icon = stat.icon;
          return (
            <Card key={idx} className="rounded-2xl border-slate-200 dark:border-white/5 overflow-hidden">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-[clamp(1.5rem,2.8vw,2.25rem)] font-semibold text-slate-800 dark:text-white">
                      {stat.value}
                    </p>
                    <p className="text-[clamp(1rem,1.1vw,1.0625rem)] text-slate-500 font-medium uppercase tracking-wider mt-1">
                      {stat.label}
                    </p>
                  </div>
                  <div className={`p-3 rounded-xl ${stat.color}`}>
                    <Icon size={20} />
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Quantitativo Detalhado */}
      {quantitativo && (
        <Card className="mb-6 border-slate-200 dark:border-white/5">
          <CardHeader>
            <CardTitle className="text-[clamp(1.125rem,2vw,1.5rem)] font-semibold">Quantitativo por Mês</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3">
              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(mes => {
                const meses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
                // O quantitativo vem como array: [{ mes: 1, mes_nome: "Janeiro", quantidade: 22 }, ...]
                let count = 0;
                if (Array.isArray(quantitativo)) {
                  const mesData = quantitativo.find(item => item.mes === mes);
                  count = mesData?.quantidade || 0;
                } else if (quantitativo) {
                  // Fallback para estrutura antiga
                  count = quantitativo[`mes_${mes}`] || quantitativo[meses[mes - 1]] || 0;
                }
                if (count === 0) {
                  count = aniversariantesPorMes[mes]?.length || 0;
                }
                const isSelected = filters.mes === mes;
                return (
                  <div 
                    key={mes}
                    className={`group p-3 rounded-xl border text-center transition-all duration-300 cursor-pointer ${
                      isSelected
                        ? 'border-green-500 bg-green-50 dark:bg-green-500/20 shadow-md ring-2 ring-green-500/50 scale-105'
                        : 'border-slate-200 dark:border-white/5 bg-white dark:bg-[#1b1b1b] hover:border-green-400 hover:bg-gradient-to-br hover:from-green-50/80 hover:to-emerald-50/50 dark:hover:from-green-500/20 dark:hover:to-emerald-500/10 hover:shadow-xl hover:shadow-green-500/20 hover:scale-110 hover:-translate-y-1 hover:ring-2 hover:ring-green-400/30'
                    }`}
                    onClick={() => {
                      setMesSelecionado(mes);
                      setModalMesAberto(true);
                    }}
                  >
                    <p className={`text-[clamp(1rem,1.1vw,1.0625rem)] font-medium uppercase transition-colors duration-300 ${
                      isSelected 
                        ? 'text-green-600 dark:text-green-400' 
                        : 'text-slate-500 group-hover:text-green-600 dark:group-hover:text-green-400'
                    }`}>
                      {meses[mes - 1]}
                    </p>
                    <p className={`text-[clamp(1.5rem,2.4vw,1.875rem)] font-semibold mt-1 transition-all duration-300 ${
                      isSelected
                        ? 'text-green-700 dark:text-green-300'
                        : 'text-slate-800 dark:text-white group-hover:text-green-600 dark:group-hover:text-green-400 group-hover:scale-110'
                    }`}>
                      {count}
                    </p>
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Resumo por Mês - Comentado: informação duplicada, já exibida no Quantitativo por Mês */}
      {/* <Card className="mb-6 border-slate-200 dark:border-white/5">
        <CardHeader>
          <CardTitle className="text-[clamp(1.125rem,2vw,1.5rem)] font-semibold">Aniversariantes por Mês</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3">
            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(mes => {
              const meses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
              const count = aniversariantesPorMes[mes]?.length || 0;
              return (
                <div 
                  key={mes}
                  className="p-3 rounded-xl border border-slate-200 dark:border-white/5 bg-white dark:bg-[#1b1b1b] text-center hover:border-pink-300 transition-colors cursor-pointer"
                  onClick={() => setFilters({ mes })}
                >
                  <p className="text-[clamp(1rem,1.1vw,1.0625rem)] font-medium text-slate-500 uppercase">{meses[mes - 1]}</p>
                  <p className="text-[clamp(1.5rem,2.4vw,1.875rem)] font-semibold text-slate-800 dark:text-white mt-1">{count}</p>
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card> */}

      {/* Filtros */}
      <Card className="mb-6 border-slate-200 dark:border-white/5">
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
                <Input
                  placeholder="Buscar por nome ou cargo..."
                  value={filters.search || ''}
                  onChange={(e) => setFilters({ search: e.target.value })}
                  className="pl-10"
                />
              </div>
            </div>
            <Select 
              value={filters.mes ? String(filters.mes) : undefined} 
              onValueChange={(value) => {
                if (value === "all") {
                  setFilters({ mes: null });
                } else {
                  setFilters({ mes: value ? parseInt(value) : null });
                  // Mudar para a aba "Próximos Meses" quando selecionar um mês
                  setActiveTab('proximos-meses');
                }
              }}
            >
              <SelectTrigger className="w-full sm:w-[200px] rounded-xl">
                <SelectValue placeholder={filters.mes ? `Mês ${filters.mes}` : "Filtrar por Mês"} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos os meses</SelectItem>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(mes => {
                  const meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
                  return (
                    <SelectItem key={mes} value={String(mes)}>
                      {meses[mes - 1]}
                    </SelectItem>
                  );
                })}
              </SelectContent>
            </Select>
            {filters.mes && (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => {
                  setFilters({ mes: null });
                  // Não mudar a aba ao limpar o filtro
                }}
                className="text-[clamp(0.875rem,1.2vw,1rem)]"
              >
                Limpar filtro
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Tabs e Tabela */}
      <Card className="flex-1 flex flex-col overflow-hidden rounded-2xl border-slate-200 dark:border-white/5" style={{ minHeight: '500px', maxHeight: 'calc(100vh - 400px)' }}>
        <CardHeader className="border-b border-slate-200 dark:border-white/5 flex-shrink-0">
          <CardTitle className="text-[clamp(1.125rem,2vw,1.5rem)] font-semibold mb-0">
            Aniversariantes ({filteredAniversariantes.length})
          </CardTitle>
        </CardHeader>
        <CardContent className="flex-1 overflow-hidden p-0 min-h-0">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full h-full flex flex-col">
            {/* Tabs comentadas - Próximos Meses como padrão */}
            {/* <div className="px-4 pt-4 border-b border-slate-200 dark:border-white/5">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="todos">Todos ({aniversariantes.length})</TabsTrigger>
                <TabsTrigger value="hoje">Hoje ({aniversariantesHoje.length})</TabsTrigger>
                <TabsTrigger value="mes-atual">Mês Atual ({aniversariantesMesAtual.length})</TabsTrigger>
                <TabsTrigger value="proximos-meses">Próximos Meses ({aniversariantesProximosMeses.length})</TabsTrigger>
              </TabsList>
            </div> */}
            {/* <TabsContent value="todos" className="h-full m-0 flex-1">
              <ExcelTable
                data={filteredAniversariantes}
                columns={columns}
                loading={loading}
                pageSize={50}
                key={`todos-${filters.mes || 'all'}-${filters.search || ''}`}
              />
            </TabsContent>
            <TabsContent value="hoje" className="h-full m-0 flex-1">
              <ExcelTable
                data={filteredAniversariantes}
                columns={columns}
                loading={loadingHoje}
                pageSize={50}
                key={`hoje-${filters.mes || 'all'}-${filters.search || ''}`}
              />
            </TabsContent>
            <TabsContent value="mes-atual" className="h-full m-0 flex-1">
              <ExcelTable
                data={filteredAniversariantes}
                columns={columns}
                loading={loadingMesAtual}
                pageSize={50}
                key={`mes-atual-${filters.mes || 'all'}-${filters.search || ''}`}
              />
            </TabsContent> */}
            <TabsContent value="proximos-meses" className="h-full m-0 flex-1 overflow-hidden">
              <div className="h-full" style={{ height: 'calc(100vh - 400px)', minHeight: '500px', maxHeight: '800px' }}>
                <ExcelTable
                  data={filteredAniversariantes}
                  columns={columns}
                  loading={loadingProximosMeses}
                  pageSize={50}
                  key={`proximos-${filters.mes || 'all'}-${filters.search || ''}`}
                />
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

      {/* Modal de Aniversariantes do Mês */}
      <Dialog open={modalMesAberto} onOpenChange={setModalMesAberto}>
        <DialogContent className="max-w-5xl bg-white dark:bg-[#1b1b1b] border-slate-200 dark:border-white/10 rounded-xl overflow-hidden p-0 max-h-[90vh] flex flex-col">
          <DialogHeader className="p-6 sm:p-8 bg-slate-50 dark:bg-white/[0.02] border-b border-slate-100 dark:border-white/5 flex-shrink-0">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-3xl text-green-500">
                <Calendar size={24} />
              </div>
              <div>
                <DialogTitle className="text-[clamp(1.5rem,3vw,2.25rem)] font-semibold text-slate-800 dark:text-white">
                  {mesSelecionado && aniversariantesProximosMesesPorMes[mesSelecionado] 
                    ? `Aniversariantes de ${aniversariantesProximosMesesPorMes[mesSelecionado].mes_nome}`
                    : 'Aniversariantes do Mês'}
                </DialogTitle>
                <DialogDescription className="text-[clamp(1rem,1.1vw,1.0625rem)] text-slate-500 dark:text-slate-400 mt-1">
                  {mesSelecionado && aniversariantesProximosMesesPorMes[mesSelecionado]
                    ? `Total: ${aniversariantesProximosMesesPorMes[mesSelecionado].total} aniversariantes`
                    : 'Selecione um mês'}
                </DialogDescription>
              </div>
            </div>
          </DialogHeader>
          
          <div className="flex-1 overflow-hidden p-6 min-h-0 flex flex-col">
            {mesSelecionado && aniversariantesProximosMesesPorMes[mesSelecionado] ? (
              <div className="flex-1 min-h-0" style={{ height: 'calc(90vh - 220px)', minHeight: '400px', maxHeight: 'calc(90vh - 220px)', display: 'flex', flexDirection: 'column' }}>
                <ExcelTable
                  data={aniversariantesProximosMesesPorMes[mesSelecionado].aniversariantes || []}
                  columns={columnsModal}
                  loading={loadingProximosMeses}
                  pageSize={1000}
                  key={`modal-mes-${mesSelecionado}`}
                />
              </div>
            ) : (
              <div className="flex items-center justify-center h-64 text-slate-500 dark:text-slate-400">
                <p className="text-[clamp(1rem,1.2vw,1.125rem)]">Nenhum mês selecionado</p>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
};
