import React, { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { Edit3, Calculator, Zap, TrendingUp, AlertTriangle, CheckCircle, Settings } from 'lucide-react';

const SimuladorPartners = () => {
  // Estados principais
  const [tarifaKwh, setTarifaKwh] = useState(0.72);
  const [qtdUCs, setQtdUCs] = useState(11);
  const [showConfig, setShowConfig] = useState(false);
  
  // Dados iniciais baseados na imagem fornecida (valores em MWh/ano)
  const [ucsData, setUcsData] = useState([
    { id: 1, geracao: 5.06, consumo: 4.8, nome: 'UC 1' },
    { id: 2, geracao: 21.583, consumo: 22.1, nome: 'UC 2' },
    { id: 3, geracao: 51.568, consumo: 49.2, nome: 'UC 3' },
    { id: 4, geracao: 29.381, consumo: 31.5, nome: 'UC 4' },
    { id: 5, geracao: 34.505, consumo: 36.8, nome: 'UC 5' },
    { id: 6, geracao: 0.5, consumo: 2.1, nome: 'UC 6' },
    { id: 7, geracao: 1.152, consumo: 1.8, nome: 'UC 7' },
    { id: 8, geracao: 34.505, consumo: 32.9, nome: 'UC 8' },
    { id: 9, geracao: 9.231, consumo: 8.8, nome: 'UC 9' },
    { id: 10, geracao: 169.272, consumo: 165.5, nome: 'UC 10' },
    { id: 11, geracao: 270.259, consumo: 268.1, nome: 'UC 11' }
  ]);

  // Cálculos dinâmicos
  const [simulacao, setSimulacao] = useState({
    semGestao: { desperdicioMwh: 0, desperdicioReais: 0, multas: 0 },
    comPartners: { economia: 0, aproveitamento: 100 }
  });

  // Cores para os gráficos
  const cores = {
    sobra: '#e74c3c',
    falta: '#f39c12',
    equilibrio: '#27ae60',
    otimizado: '#27ae60'
  };

  // Função para calcular simulação
  useEffect(() => {
    const calcularSimulacao = () => {
      let totalDesperdicio = 0;
      let totalSobra = 0;
      let totalFalta = 0;

      ucsData.forEach(uc => {
        const balanco = uc.geracao - uc.consumo;
        if (balanco > 0) {
          totalSobra += balanco;
        } else if (balanco < 0) {
          totalFalta += Math.abs(balanco);
        }
      });

      // Desperdício = menor valor entre sobra e falta (não pode ser compensado)
      totalDesperdicio = Math.min(totalSobra, totalFalta);
      const desperdicioReais = totalDesperdicio * 1000 * tarifaKwh; // Conversão MWh para kWh
      
      setSimulacao({
        semGestao: {
          desperdicioMwh: totalDesperdicio,
          desperdicioReais: desperdicioReais,
          multas: desperdicioReais * 0.1 // Estimativa de 10% em multas
        },
        comPartners: {
          economia: desperdicioReais,
          aproveitamento: 100
        }
      });
    };

    calcularSimulacao();
  }, [ucsData, tarifaKwh]);

  // Preparar dados para o gráfico
  const dadosGrafico = ucsData.map(uc => {
    const balanco = uc.geracao - uc.consumo;
    return {
      nome: uc.nome,
      geracao: uc.geracao,
      consumo: uc.consumo,
      balanco: balanco,
      status: balanco > 0.5 ? 'Sobra' : balanco < -0.5 ? 'Falta' : 'Equilibrio',
      cor: balanco > 0.5 ? cores.sobra : balanco < -0.5 ? cores.falta : cores.equilibrio
    };
  });

  // Função para atualizar UC
  const atualizarUC = (id, campo, valor) => {
    setUcsData(prev => prev.map(uc => 
      uc.id === id ? { ...uc, [campo]: parseFloat(valor) || 0 } : uc
    ));
  };

  // Função para adicionar UC
  const adicionarUC = () => {
    const novoId = Math.max(...ucsData.map(uc => uc.id)) + 1;
    setUcsData(prev => [...prev, {
      id: novoId,
      geracao: 10,
      consumo: 10,
      nome: `UC ${novoId}`
    }]);
    setQtdUCs(prev => prev + 1);
  };

  // Função para remover UC
  const removerUC = (id) => {
    if (ucsData.length > 1) {
      setUcsData(prev => prev.filter(uc => uc.id !== id));
      setQtdUCs(prev => prev - 1);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-4">
      <div className="max-w-7xl mx-auto space-y-6">
        
        {/* Cabeçalho */}
        <div className="bg-white rounded-2xl shadow-lg p-6">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-3xl font-bold text-gray-800 mb-2">
                Simulador Partners - Gestão Energética
              </h1>
              <p className="text-gray-600">
                {qtdUCs} Unidades Consumidoras • R$ {tarifaKwh.toFixed(2)}/kWh
              </p>
            </div>
            <button
              onClick={() => setShowConfig(!showConfig)}
              className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            >
              <Settings size={20} />
              Configurações
            </button>
          </div>
        </div>

        {/* Painel de Configurações */}
        {showConfig && (
          <div className="bg-white rounded-2xl shadow-lg p-6">
            <h3 className="text-xl font-semibold mb-4 text-gray-800">Configurações Globais</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Tarifa (R$/kWh)
                </label>
                <input
                  type="number"
                  step="0.01"
                  value={tarifaKwh}
                  onChange={(e) => setTarifaKwh(parseFloat(e.target.value) || 0)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Quantidade de UCs
                </label>
                <input
                  type="number"
                  value={qtdUCs}
                  onChange={(e) => setQtdUCs(parseInt(e.target.value) || 1)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                  disabled
                />
              </div>
              <div className="flex items-end">
                <button
                  onClick={adicionarUC}
                  className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
                >
                  Adicionar UC
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Resultados da Simulação */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          
          {/* Sem Gestão Partners */}
          <div className="bg-white rounded-2xl shadow-lg p-6">
            <div className="flex items-center mb-4">
              <AlertTriangle className="text-red-500 mr-3" size={24} />
              <h2 className="text-xl font-semibold text-red-600">Sem Gestão Partners</h2>
            </div>
            
            <div className="space-y-4">
              <div className="bg-red-50 rounded-lg p-4">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium">Desperdício Mensal:</span>
                  <span className="text-lg font-bold text-red-600">
                    {(simulacao.semGestao.desperdicioMwh / 12).toFixed(1)} MWh
                  </span>
                </div>
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium">Custo Mensal:</span>
                  <span className="text-lg font-bold text-red-600">
                    R$ {(simulacao.semGestao.desperdicioReais / 12 / 1000).toFixed(0)}k
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="font-medium">Custo Anual:</span>
                  <span className="text-xl font-bold text-red-600">
                    R$ {(simulacao.semGestao.desperdicioReais / 1000).toFixed(0)}k
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Com Gestão Partners */}
          <div className="bg-white rounded-2xl shadow-lg p-6">
            <div className="flex items-center mb-4">
              <CheckCircle className="text-green-500 mr-3" size={24} />
              <h2 className="text-xl font-semibold text-green-600">Com Gestão Partners</h2>
            </div>
            
            <div className="space-y-4">
              <div className="bg-green-50 rounded-lg p-4">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium">Aproveitamento:</span>
                  <span className="text-lg font-bold text-green-600">
                    {simulacao.comPartners.aproveitamento}%
                  </span>
                </div>
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium">Economia Mensal:</span>
                  <span className="text-lg font-bold text-green-600">
                    R$ {(simulacao.comPartners.economia / 12 / 1000).toFixed(0)}k
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="font-medium">Economia Anual:</span>
                  <span className="text-xl font-bold text-green-600">
                    R$ {(simulacao.comPartners.economia / 1000).toFixed(0)}k
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Gráfico de Barras */}
        <div className="bg-white rounded-2xl shadow-lg p-6">
          <h3 className="text-xl font-semibold mb-4 text-gray-800">Balanço Energético por UC</h3>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={dadosGrafico} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis 
                  dataKey="nome" 
                  angle={-45}
                  textAnchor="end"
                  height={80}
                />
                <YAxis label={{ value: 'MWh/ano', angle: -90, position: 'insideLeft' }} />
                <Tooltip 
                  formatter={(value, name) => [
                    `${value.toFixed(2)} MWh/ano`, 
                    name === 'geracao' ? 'Geração' : name === 'consumo' ? 'Consumo' : 'Balanço'
                  ]}
                />
                <Bar dataKey="geracao" fill="#3b82f6" name="geracao" />
                <Bar dataKey="consumo" fill="#ef4444" name="consumo" />
                <Bar dataKey="balanco" fill={(entry) => entry.cor} name="balanco" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Tabela Editável */}
        <div className="bg-white rounded-2xl shadow-lg p-6">
          <h3 className="text-xl font-semibold mb-4 text-gray-800">
            Dados das Unidades Consumidoras
          </h3>
          
          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="border border-gray-300 px-4 py-2 text-left">UC</th>
                  <th className="border border-gray-300 px-4 py-2 text-center">Geração (MWh/ano)</th>
                  <th className="border border-gray-300 px-4 py-2 text-center">Consumo (MWh/ano)</th>
                  <th className="border border-gray-300 px-4 py-2 text-center">Balanço</th>
                  <th className="border border-gray-300 px-4 py-2 text-center">Status</th>
                  <th className="border border-gray-300 px-4 py-2 text-center">Ações</th>
                </tr>
              </thead>
              <tbody>
                {ucsData.map((uc) => {
                  const balanco = uc.geracao - uc.consumo;
                  const status = balanco > 0.5 ? 'Sobra' : balanco < -0.5 ? 'Falta' : 'Equilibrio';
                  const corStatus = balanco > 0.5 ? 'text-red-600' : balanco < -0.5 ? 'text-orange-600' : 'text-green-600';
                  
                  return (
                    <tr key={uc.id} className="hover:bg-gray-50">
                      <td className="border border-gray-300 px-4 py-2 font-medium">
                        {uc.nome}
                      </td>
                      <td className="border border-gray-300 px-2 py-2">
                        <input
                          type="number"
                          step="0.001"
                          value={uc.geracao}
                          onChange={(e) => atualizarUC(uc.id, 'geracao', e.target.value)}
                          className="w-full border border-gray-300 rounded px-2 py-1 text-center focus:ring-2 focus:ring-blue-500"
                        />
                      </td>
                      <td className="border border-gray-300 px-2 py-2">
                        <input
                          type="number"
                          step="0.001"
                          value={uc.consumo}
                          onChange={(e) => atualizarUC(uc.id, 'consumo', e.target.value)}
                          className="w-full border border-gray-300 rounded px-2 py-1 text-center focus:ring-2 focus:ring-blue-500"
                        />
                      </td>
                      <td className="border border-gray-300 px-4 py-2 text-center font-medium">
                        {balanco.toFixed(2)}
                      </td>
                      <td className={`border border-gray-300 px-4 py-2 text-center font-medium ${corStatus}`}>
                        {status} {Math.abs(balanco).toFixed(1)} MWh
                      </td>
                      <td className="border border-gray-300 px-4 py-2 text-center">
                        <button
                          onClick={() => removerUC(uc.id)}
                          className="text-red-600 hover:text-red-800 disabled:text-gray-400"
                          disabled={ucsData.length <= 1}
                        >
                          Remover
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* Rodapé */}
        <div className="bg-white rounded-2xl shadow-lg p-6 text-center">
          <p className="text-gray-600 italic">
            Simulador interativo - Ajuste os valores para ver o impacto da gestão Partners em tempo real
          </p>
        </div>

      </div>
    </div>
  );
};

export default SimuladorPartners;