import React from 'react';
import { 
  Calendar, 
  ChevronDown, 
  Filter,
  Check
} from 'lucide-react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

const MONTHS = [
  { value: 1, label: 'Janeiro' },
  { value: 2, label: 'Fevereiro' },
  { value: 3, label: 'Março' },
  { value: 4, label: 'Abril' },
  { value: 5, label: 'Maio' },
  { value: 6, label: 'Junho' },
  { value: 7, label: 'Julho' },
  { value: 8, label: 'Agosto' },
  { value: 9, label: 'Setembro' },
  { value: 10, label: 'Outubro' },
  { value: 11, label: 'Novembro' },
  { value: 12, label: 'Dezembro' },
];

const YEARS = Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - 2 + i);

export const GrPeriodSelector = ({ filters, setFilters, loading }) => {
  const { mes, ano, modo } = filters;

  const handleModoChange = (newModo) => {
    setFilters(prev => ({ ...prev, modo: newModo }));
  };

  const handleMesChange = (newMes) => {
    setFilters(prev => ({ ...prev, mes: parseInt(newMes) }));
  };

  const handleAnoChange = (newAno) => {
    setFilters(prev => ({ ...prev, ano: parseInt(newAno) }));
  };

  return (
    <div className="flex flex-wrap items-center gap-3 p-1.5 bg-white dark:bg-[#1c1c1c] border border-slate-200 dark:border-[#2a2a2a] rounded-2xl shadow-sm">
      {/* Modo Selector */}
      <div className="flex bg-slate-100 dark:bg-[#2a2a2a] p-1 rounded-xl">
        <button
          onClick={() => handleModoChange('mensal')}
          disabled={loading}
          className={cn(
            "px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-all",
            modo === 'mensal' 
              ? "bg-white dark:bg-[#3b82f6] text-[var(--gr-primary)] dark:text-white shadow-sm" 
              : "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
          )}
        >
          Mensal
        </button>
        <button
          onClick={() => handleModoChange('anual')}
          disabled={loading}
          className={cn(
            "px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-all",
            modo === 'anual' 
              ? "bg-white dark:bg-[#3b82f6] text-[var(--gr-primary)] dark:text-white shadow-sm" 
              : "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
          )}
        >
          Anual
        </button>
      </div>

      <div className="h-4 w-px bg-slate-200 dark:bg-slate-700 mx-1 hidden md:block" />

      {/* Mes Selector */}
      {modo === 'mensal' && (
        <div className="w-[140px]">
          <Select value={mes.toString()} onValueChange={handleMesChange} disabled={loading}>
            <SelectTrigger className="h-9 border-none bg-transparent hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors focus:ring-0">
              <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                <Calendar size={14} className="text-[var(--gr-primary)]" />
                <SelectValue placeholder="Mês" />
              </div>
            </SelectTrigger>
            <SelectContent>
              {MONTHS.map((m) => (
                <SelectItem key={m.value} value={m.value.toString()} className="text-xs font-medium">
                  {m.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      )}

      {/* Ano Selector */}
      <div className="w-[100px]">
        <Select value={ano.toString()} onValueChange={handleAnoChange} disabled={loading}>
          <SelectTrigger className="h-9 border-none bg-transparent hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors focus:ring-0">
            <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
              <span className="text-[var(--gr-primary)] font-bold text-xs">#</span>
              <SelectValue placeholder="Ano" />
            </div>
          </SelectTrigger>
          <SelectContent>
            {YEARS.map((y) => (
              <SelectItem key={y} value={y.toString()} className="text-xs font-medium">
                {y}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {loading && (
        <div className="px-2">
          <div className="w-4 h-4 border-2 border-[var(--gr-primary)] border-t-transparent rounded-full animate-spin" />
        </div>
      )}
    </div>
  );
};
