import React, { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer, ReferenceLine, Tooltip } from 'recharts';
import { HelpCircle, Download, Share2, AlertCircle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';

const atores = ["TODOS", "EMPRESÁRIO", "POLÍTICO", "DIPLOMATA"];
const categorias = ["Todas", "ECONOMIA", "POLÍTICA", "CULTURA", "TECNOLOGIA", "MEIO-AMBIENTE"];
const paises = ["MUNDO", "ARGENTINA", "BRASIL", "ESTADOS UNIDOS", "CHINA", "JAPÃO"];

const DashboardBrasil = () => {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [graphData, setGraphData] = useState([]);
  const [periodoSelecionado, setPeriodoSelecionado] = useState('24h');
  const [paisSelecionado, setPaisSelecionado] = useState('ARGENTINA');
  const [categoriaSelecionada, setCategoriaSelecionada] = useState('TODAS');
  const [atorSelecionado, setAtorSelecionado] = useState('TODOS');
  const [showPaisDropdown, setShowPaisDropdown] = useState(false);
  const [showCategoriaDropdown, setShowCategoriaDropdown] = useState(false);
  const [showAtorDropdown, setShowAtorDropdown] = useState(false);
  const [loading, setLoading] = useState(false);
  const [currentValue, setCurrentValue] = useState(77);
  const [eventCount, setEventCount] = useState(1635);

  const getInitialData = () => {
    const data = [];
    let currentValue = 77;
    
    // Gerar 97 pontos (24 horas = 96 períodos de 15min + AGORA)
    for (let i = 96; i >= 0; i--) {
      const hora = i === 0 ? 'AGORA' : `-${i * 0.25}h`;
      data.push({
        dia: hora,
        valor: currentValue,
        showLabel: hora === '-24h' || hora === '-20h' || hora === '-16h' || 
                  hora === '-8h' || hora === '-4h' || hora === 'AGORA'
      });
    }
    return data;
  };

  const [lastBigVariationTime, setLastBigVariationTime] = useState(null);
  const [historicalData, setHistoricalData] = useState(getInitialData());

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setGraphData(historicalData);
      setLoading(false);
    }, 100);

    const clockTimer = setInterval(() => {
      const now = new Date();
      setCurrentTime(now);
      
      // Atualizar valores nos segundos 00, 15, 30 e 45
      if (now.getSeconds() % 15 === 0) {
        // Atualizar contador de eventos
        const randomCount = Math.floor(Math.random() * (3100 - 1200 + 1)) + 1200;
        setEventCount(randomCount);
        
        // Calcular se pode ter variação grande (10%)
        const canHaveBigVariation = lastBigVariationTime === null || 
          (now.getTime() - lastBigVariationTime.getTime()) >= 3 * 60 * 1000;
        
        // Decidir se terá variação grande (10% de chance quando permitido)
        const willHaveBigVariation = canHaveBigVariation && Math.random() < 0.1;
        
        // Calcular nova variação
        const maxVariationPercent = willHaveBigVariation ? 10 : 5;
        const maxVariation = (currentValue * maxVariationPercent) / 100;
        const variation = (Math.random() * 2 - 1) * maxVariation; // Variação entre -max e +max
        
        // Calcular novo valor mantendo entre 60 e 110
        let newValue = currentValue + variation;
        newValue = Math.min(110, Math.max(60, newValue));
        
        // Atualizar timestamp da última variação grande se necessário
        if (willHaveBigVariation && Math.abs(variation) > (currentValue * 0.05)) {
          setLastBigVariationTime(now);
        }
        
        setCurrentValue(Math.round(newValue));
        
        // Atualizar dados históricos
        // Atualizar dados históricos com deslocamento
        setHistoricalData(prevData => {
          // Remover o primeiro ponto e deslocar todos os outros
          const shiftedData = prevData.slice(1).map((item, index) => {
            const horaNum = index * 0.25;
            const hora = `-${horaNum}h`;
            return {
              ...item,
              dia: hora,
              showLabel: hora === '-24h' || hora === '-20h' || hora === '-16h' || 
                        hora === '-8h' || hora === '-4h'
            };
          });
          
          // Adicionar o novo ponto como 'AGORA'
          shiftedData.push({
            dia: 'AGORA',
            valor: Math.round(newValue),
            showLabel: true
          });
          
          return shiftedData;
        });
      }
    }, 1000);

    return () => clearInterval(clockTimer);
  }, [periodoSelecionado]);

  const formatDate = (date) => {
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const year = date.getFullYear();
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${day}/${month}/${year}  ${hours}:${minutes}:${seconds}`;
  };

  const CustomTooltip = ({ active, payload }) => {
    if (active && payload && payload.length) {
      const data = payload[0].payload;
      return (
        <div className="bg-white p-4 rounded-lg shadow-lg border border-[#8BA3D4]">
          <p className="text-[#003A79] font-bold">{data.dia}</p>
          <p className="text-[#003A79]">Valor: {data.valor}</p>
        </div>
      );
    }
    return null;
  };

  const Dropdown = ({ title, items, selected, onSelect, show, onToggle }) => (
    <div className="relative">
      <h2 className="text-[#003A79] font-bold mb-3">{title}</h2>
      <button 
        onClick={onToggle}
        className="w-full bg-[#8BA3D4] text-[#003A79] px-6 py-3 rounded-full font-bold flex justify-between items-center hover:bg-[#4A75BC] transition-colors"
      >
        {selected}
        <span className="text-xl">{show ? '−' : '+'}</span>
      </button>
      
      {show && (
        <div className="absolute z-50 mt-1 w-full bg-white rounded-lg shadow-lg border border-[#8BA3D4] max-h-60 overflow-y-auto">
          {items.map((item, index) => (
            <button
              key={index}
              className="w-full px-4 py-2 text-left hover:bg-[#F5F6FA] text-[#003A79]"
              onClick={() => {
                onSelect(item);
                onToggle();
              }}
            >
              {item}
            </button>
          ))}
        </div>
      )}
    </div>
  );

  return (
    <div className="min-h-screen p-8 bg-white">
      {/* Header */}
      <div className="mb-8">
        <div className="flex flex-col items-end mb-8">
          <div className="w-full">
            <h1 className="text-[#003A79] text-5xl font-bold">
              INDICADOR FGV DA<br />
              <div className="flex justify-between items-baseline">
                <span>IMAGEM DO BRASIL NO EXTERIOR</span>
                <div className="text-right">
                  <div className="text-[#003A79] text-8xl font-bold tracking-tighter">{currentValue}</div>
                  <div className="text-[#003A79] text-base">{formatDate(currentTime)}</div>
                </div>
              </div>
            </h1>
          </div>
        </div>
        <div className="flex gap-2">
          <button className="flex items-center gap-2 px-4 py-2 bg-[#8BA3D4] text-[#003A79] rounded-full hover:bg-[#4A75BC] transition-colors">
            <Download size={16} /> Exportar
          </button>
          <button className="flex items-center gap-2 px-4 py-2 bg-[#8BA3D4] text-[#003A79] rounded-full hover:bg-[#4A75BC] transition-colors">
            <Share2 size={16} /> Compartilhar
          </button>
        </div>
      </div>

      {/* Periods */}
      <div className="flex gap-2 mb-8">
        {[
          { value: '24h', label: '24h' },
          { value: '7d', label: '7 DIAS' },
          { value: '30d', label: '30 DIAS' },
          { value: '1a', label: '1 ANO' },
          { value: '2020', label: 'DESDE 2020' }
        ].map((periodo) => (
          <button
            key={periodo.value}
            onClick={() => setPeriodoSelecionado(periodo.value)}
            className={`px-6 py-2 rounded-full font-bold text-sm min-w-[120px]
              ${periodo.value === periodoSelecionado
                ? 'bg-[#003A79] text-white'
                : 'bg-[#8BA3D4] text-[#003A79] hover:bg-[#4A75BC]'}`}
          >
            {periodo.label}
          </button>
        ))}
      </div>

      {/* Graph */}
      <div className="bg-[#F5F6FA] rounded-lg p-6 mb-6 h-96">
        {loading ? (
          <div className="flex items-center justify-center h-full">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#003A79]" />
          </div>
        ) : (
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={graphData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
              <CartesianGrid stroke="#E5E7F0" horizontal={true} vertical={false} />
              <XAxis 
                dataKey="dia" 
                stroke="#003A79"
                tick={{ fill: '#003A79', fontSize: 12 }}
                interval={0}
                ticks={['-24h', '-20h', '-16h', '-8h', '-4h', 'AGORA']}
                tickFormatter={(value) => {
                  if (['-24h', '-20h', '-16h', '-8h', '-4h', 'AGORA'].includes(value)) {
                    return value;
                  }
                  return '';
                }}
              />
              <YAxis 
                stroke="#003A79"
                tick={{ fill: '#003A79', fontSize: 12 }}
                domain={[0, 200]}
              />
              <Tooltip content={<CustomTooltip />} />
              <ReferenceLine y={100} stroke="#003A79" strokeDasharray="3 3" />
              <Bar 
                dataKey="valor" 
                fill="#003A79"
                isAnimationActive={false}
                minPointSize={2}
                maxBarSize={8}
              />
            </BarChart>
          </ResponsiveContainer>
        )}
      </div>

      {/* Filters Grid */}
      <div className="grid grid-cols-3 gap-6 mb-8">
        <Dropdown 
          title="PAÍS"
          items={paises}
          selected={paisSelecionado}
          onSelect={setPaisSelecionado}
          show={showPaisDropdown}
          onToggle={() => setShowPaisDropdown(!showPaisDropdown)}
        />
        
        <Dropdown 
          title="ATOR"
          items={atores}
          selected={atorSelecionado}
          onSelect={setAtorSelecionado}
          show={showAtorDropdown}
          onToggle={() => setShowAtorDropdown(!showAtorDropdown)}
        />
        
        <Dropdown 
          title="CATEGORIA"
          items={atores}
          selected={atorSelecionado}
          onSelect={setAtorSelecionado}
          show={showAtorDropdown}
          onToggle={() => setShowAtorDropdown(!showAtorDropdown)}
        />
      </div>

      {/* Events Counter */}
      <div className="bg-[#F5F6FA] p-6 rounded-lg">
        <div className="flex justify-between items-center">
          <div>
            <span className="text-[#003A79] font-bold">Eventos analisados na última hora: {eventCount.toLocaleString()}</span>
          </div>
          <div className="flex gap-1">
            {[...Array(6)].map((_, i) => (
              <div
                key={i}
                className={`w-3 h-12 rounded-sm ${i < 4 ? 'bg-[#003A79]' : 'bg-[#8BA3D4]'}`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default DashboardBrasil;