import React, { useState, useEffect } from 'react';

// Componente principal da aplicação
const App = () => {
  // Estado para armazenar os dados da planilha
  // Cada item no array é uma linha da planilha
  const [rows, setRows] = useState([
    { id: 1, nome: 'João Silva', valorMensal: 150.00, dataAcerto: '2025-07-05', categoriaSugerida: '' },
    { id: 2, nome: 'Maria Souza', valorMensal: 200.50, dataAcerto: '2025-07-10', categoriaSugerida: '' },
    { id: 3, nome: 'Pedro Santos', valorMensal: 75.00, dataAcerto: '2025-07-15', categoriaSugerida: '' },
  ]);

  // Estado para armazenar o valor total mensal
  const [totalMensal, setTotalMensal] = useState(0);
  // Estado para controlar o carregamento da sugestão de categoria
  const [loadingSuggestionId, setLoadingSuggestionId] = useState(null);

  // useEffect para recalcular o total sempre que as linhas mudarem
  useEffect(() => {
    const sum = rows.reduce((acc, row) => acc + (parseFloat(row.valorMensal) || 0), 0);
    setTotalMensal(sum);
  }, [rows]); // Dependência: recalcula quando 'rows' é alterado

  // Função para adicionar uma nova linha à planilha
  const addRow = () => {
    const newId = rows.length > 0 ? Math.max(...rows.map(row => row.id)) + 1 : 1;
    setRows([...rows, { id: newId, nome: '', valorMensal: 0, dataAcerto: '', categoriaSugerida: '' }]);
  };

  // Função para deletar uma linha da planilha
  const deleteRow = (id) => {
    setRows(rows.filter(row => row.id !== id));
  };

  // Função para lidar com a mudança de valores nos inputs
  const handleChange = (id, field, value) => {
    setRows(rows.map(row =>
      row.id === id ? { ...row, [field]: value } : row
    ));
  };

  // Função para chamar a API do Gemini e sugerir uma categoria
  const suggestCategory = async (id, nome, valorMensal) => {
    setLoadingSuggestionId(id); // Define o ID da linha que está carregando
    try {
      const prompt = `Dado o item '${nome}' com valor '${valorMensal}', qual seria uma categoria financeira adequada (ex: Moradia, Alimentação, Transporte, Lazer, Contas Fixas, Educação, Saúde, Outros)? Responda apenas com a categoria.`;
      let chatHistory = [];
      chatHistory.push({ role: "user", parts: [{ text: prompt }] });
      const payload = { contents: chatHistory };
      const apiKey = ""; // A chave da API será fornecida em tempo de execução pelo Canvas
      const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const result = await response.json();

      if (result.candidates && result.candidates.length > 0 &&
          result.candidates[0].content && result.candidates[0].content.parts &&
          result.candidates[0].content.parts.length > 0) {
        const text = result.candidates[0].content.parts[0].text;
        // Atualiza a linha com a categoria sugerida
        setRows(rows.map(row =>
          row.id === id ? { ...row, categoriaSugerida: text.trim() } : row
        ));
      } else {
        console.error("Estrutura de resposta inesperada da API Gemini:", result);
        // Opcional: exibir mensagem de erro para o usuário
      }
    } catch (error) {
      console.error("Erro ao chamar a API Gemini:", error);
      // Opcional: exibir mensagem de erro para o usuário
    } finally {
      setLoadingSuggestionId(null); // Remove o estado de carregamento
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 sm:p-8 font-inter">
      <div className="max-w-4xl mx-auto bg-white shadow-xl rounded-xl p-6 sm:p-8">
        <h1 className="text-3xl sm:text-4xl font-bold text-gray-800 mb-6 text-center">
          Minha Planilha de Controle Financeiro
        </h1>

        {/* Seção da Planilha Principal */}
        <div className="overflow-x-auto mb-8">
          <table className="min-w-full bg-white rounded-lg shadow-md">
            <thead className="bg-blue-600 text-white">
              <tr>
                <th className="py-3 px-4 text-left text-sm font-semibold rounded-tl-lg">NOME</th>
                <th className="py-3 px-4 text-left text-sm font-semibold">VALOR MENSAL</th>
                <th className="py-3 px-4 text-left text-sm font-semibold">DATA DE ACERTO</th>
                <th className="py-3 px-4 text-left text-sm font-semibold">CATEGORIA SUGERIDA</th>
                <th className="py-3 px-4 text-left text-sm font-semibold rounded-tr-lg">AÇÕES</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr key={row.id} className="border-b border-gray-200 hover:bg-gray-50">
                  <td className="py-3 px-4">
                    <input
                      type="text"
                      value={row.nome}
                      onChange={(e) => handleChange(row.id, 'nome', e.target.value)}
                      className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400 focus:border-transparent"
                      placeholder="Nome"
                    />
                  </td>
                  <td className="py-3 px-4">
                    <input
                      type="number"
                      step="0.01"
                      value={row.valorMensal}
                      onChange={(e) => handleChange(row.id, 'valorMensal', e.target.value)}
                      className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400 focus:border-transparent"
                      placeholder="0.00"
                    />
                  </td>
                  <td className="py-3 px-4">
                    <input
                      type="date"
                      value={row.dataAcerto}
                      onChange={(e) => handleChange(row.id, 'dataAcerto', e.target.value)}
                      className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400 focus:border-transparent"
                    />
                  </td>
                  <td className="py-3 px-4">
                    <div className="flex items-center space-x-2">
                      <span className="p-2 border border-gray-300 rounded-md bg-gray-50 flex-grow">
                        {row.categoriaSugerida || 'N/A'}
                      </span>
                      <button
                        onClick={() => suggestCategory(row.id, row.nome, row.valorMensal)}
                        className={`py-2 px-3 rounded-md shadow-sm transition duration-200 ease-in-out transform hover:scale-105
                          ${loadingSuggestionId === row.id ? 'bg-gray-400 cursor-not-allowed' : 'bg-purple-600 hover:bg-purple-700'} text-white font-bold`}
                        disabled={loadingSuggestionId === row.id}
                      >
                        {loadingSuggestionId === row.id ? 'Carregando...' : '✨ Sugerir Categoria'}
                      </button>
                    </div>
                  </td>
                  <td className="py-3 px-4">
                    <button
                      onClick={() => deleteRow(row.id)}
                      className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-3 rounded-md shadow-sm transition duration-200 ease-in-out transform hover:scale-105"
                      aria-label={`Deletar linha de ${row.nome}`}
                    >
                      Excluir
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Botão para adicionar nova linha */}
        <div className="flex justify-center mb-8">
          <button
            onClick={addRow}
            className="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-300"
          >
            Adicionar Nova Linha
          </button>
        </div>

        {/* Seção de Resumo (Total) */}
        <div className="bg-blue-100 border-l-4 border-blue-500 text-blue-800 p-6 rounded-lg shadow-md">
          <h2 className="text-2xl font-semibold mb-3">Resumo Geral</h2>
          <div className="flex justify-between items-center text-xl font-bold">
            <span>VALOR TOTAL MENSAL:</span>
            <span className="text-blue-700">R$ {totalMensal.toFixed(2)}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;