import React, { useState, useEffect } from 'react';
import { 
  FiPlus, 
  FiEdit, 
  FiTrash2, 
  FiSearch, 
  FiDollarSign,
  FiCalendar,
  FiTag
} from 'react-icons/fi';
import { despesasAPI, fornecedoresAPI } from '../services/api';
import ViewToggle from '../components/ViewToggle';
import toast from 'react-hot-toast';

const Despesas = () => {
  const [despesas, setDespesas] = useState([]);
  const [tiposDespesas, setTiposDespesas] = useState([]);
  const [fornecedores, setFornecedores] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [viewMode, setViewMode] = useState('list');
  const [showModal, setShowModal] = useState(false);
  const [showTipoModal, setShowTipoModal] = useState(false);
  const [editingExpense, setEditingExpense] = useState(null);

  const [formData, setFormData] = useState({
    tipo_despesa: '',
    fornecedor: '',
    data: new Date().toISOString().split('T')[0],
    valor: '',
    descricao: ''
  });

  const [novoTipo, setNovoTipo] = useState('');

  useEffect(() => {
    carregarDados();
  }, []);

  const carregarDados = async () => {
    try {
      setLoading(true);
      const [despesasRes, tiposRes, fornecedoresRes] = await Promise.all([
        despesasAPI.listar(),
        despesasAPI.listarTipos(),
        fornecedoresAPI.listar()
      ]);
      setDespesas(despesasRes.data);
      setTiposDespesas(tiposRes.data);
      setFornecedores(fornecedoresRes.data);
    } catch (error) {
      console.error('Erro ao carregar dados:', error);
      toast.error('Erro ao carregar despesas');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if (editingExpense) {
        await despesasAPI.atualizar(editingExpense.id, formData);
        toast.success('Despesa atualizada com sucesso!');
      } else {
        await despesasAPI.criar(formData);
        toast.success('Despesa cadastrada com sucesso!');
      }
      
      setShowModal(false);
      setEditingExpense(null);
      setFormData({
        tipo_despesa: '',
        fornecedor: '',
        data: new Date().toISOString().split('T')[0],
        valor: '',
        descricao: ''
      });
      carregarDados();
    } catch (error) {
      console.error('Erro ao salvar despesa:', error);
      toast.error('Erro ao salvar despesa');
    }
  };

  const handleAddTipo = async (e) => {
    e.preventDefault();
    try {
      await despesasAPI.criarTipo({ nome: novoTipo });
      toast.success('Tipo de despesa criado com sucesso!');
      setShowTipoModal(false);
      setNovoTipo('');
      carregarDados();
    } catch (error) {
      console.error('Erro ao criar tipo de despesa:', error);
      toast.error('Erro ao criar tipo de despesa');
    }
  };

  const handleEdit = (despesa) => {
    setEditingExpense(despesa);
    setFormData({
      tipo_despesa: despesa.tipo_nome || '',
      fornecedor: despesa.fornecedor_nome || '',
      data: despesa.data,
      valor: despesa.valor,
      descricao: despesa.descricao || ''
    });
    setShowModal(true);
  };

  const handleDelete = async (id) => {
    if (window.confirm('Tem certeza que deseja excluir esta despesa?')) {
      try {
        await despesasAPI.deletar(id);
        toast.success('Despesa excluída com sucesso!');
        carregarDados();
      } catch (error) {
        console.error('Erro ao excluir despesa:', error);
        toast.error('Erro ao excluir despesa');
      }
    }
  };

  const filteredDespesas = despesas.filter(despesa =>
    (despesa.descricao && despesa.descricao.toLowerCase().includes(searchTerm.toLowerCase())) ||
    (despesa.tipo_nome && despesa.tipo_nome.toLowerCase().includes(searchTerm.toLowerCase())) ||
    (despesa.fornecedor_nome && despesa.fornecedor_nome.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const totalDespesas = filteredDespesas.reduce((total, despesa) => total + parseFloat(despesa.valor), 0);

  if (loading) {
    return (
      <div className="loading">
        <div>Carregando despesas...</div>
      </div>
    );
  }

  return (
    <div className="despesas fade-in">
      <div className="page-header">
        <div>
          <h1>Despesas</h1>
          <p>Controle todos os gastos da empresa</p>
        </div>
        <div className="header-actions">
          <ViewToggle 
            viewMode={viewMode} 
            onViewModeChange={setViewMode} 
          />
          <button 
            className="btn btn-secondary"
            onClick={() => setShowTipoModal(true)}
          >
            <FiTag />
            Tipos de Despesa
          </button>
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Nova Despesa
          </button>
        </div>
      </div>

      {/* Resumo */}
      <div className="expenses-summary">
        <div className="summary-card">
          <div className="summary-icon">
            <FiDollarSign />
          </div>
          <div className="summary-content">
            <div className="summary-value">
              R$ {totalDespesas.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
            </div>
            <div className="summary-label">Total em Despesas</div>
          </div>
        </div>
      </div>

      {/* Barra de Pesquisa */}
      <div className="search-box">
        <FiSearch className="search-icon" />
        <input
          type="text"
          placeholder="Pesquisar despesas..."
          className="search-input"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      {/* Lista de Despesas */}
      {filteredDespesas.length === 0 ? (
        <div className="empty-state">
          <FiDollarSign size={48} />
          <h3>Nenhuma despesa encontrada</h3>
          <p>Comece registrando sua primeira despesa</p>
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Adicionar Despesa
          </button>
        </div>
      ) : (
        <div className="expenses-table">
          <table className="table">
            <thead>
              <tr>
                <th>Data</th>
                <th>Tipo</th>
                <th>Fornecedor</th>
                <th>Descrição</th>
                <th>Valor</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filteredDespesas.map((despesa) => (
                <tr key={despesa.id}>
                  <td>
                    <div className="expense-date">
                      <FiCalendar className="date-icon" />
                      {new Date(despesa.data).toLocaleDateString('pt-BR')}
                    </div>
                  </td>
                  <td>
                    <span className="badge badge-info">
                      {despesa.tipo_nome}
                    </span>
                  </td>
                  <td>{despesa.fornecedor_nome || '-'}</td>
                  <td>
                    <div className="expense-description">
                      {despesa.descricao || '-'}
                    </div>
                  </td>
                  <td>
                    <span className="expense-value">
                      R$ {parseFloat(despesa.valor).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                    </span>
                  </td>
                  <td>
                    <div className="table-actions">
                      <button 
                        className="btn-icon"
                        onClick={() => handleEdit(despesa)}
                        title="Editar"
                      >
                        <FiEdit />
                      </button>
                      <button 
                        className="btn-icon btn-danger"
                        onClick={() => handleDelete(despesa.id)}
                        title="Excluir"
                      >
                        <FiTrash2 />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Modal de Despesa */}
      {showModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h2 className="modal-title">
                {editingExpense ? 'Editar Despesa' : 'Nova Despesa'}
              </h2>
              <button 
                className="modal-close"
                onClick={() => {
                  setShowModal(false);
                  setEditingExpense(null);
                  setFormData({
                    tipo_despesa: '',
                    fornecedor: '',
                    data: new Date().toISOString().split('T')[0],
                    valor: '',
                    descricao: ''
                  });
                }}
              >
                ×
              </button>
            </div>

            <form onSubmit={handleSubmit}>
              <div className="grid grid-2">
                <div className="form-group">
                  <label className="form-label">Tipo de Despesa *</label>
                  <input
                    type="text"
                    className="form-input"
                    value={formData.tipo_despesa}
                    onChange={(e) => setFormData({...formData, tipo_despesa: e.target.value})}
                    placeholder="Ex: Aluguel, Energia, Marketing..."
                    required
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">Fornecedor</label>
                  <input
                    type="text"
                    className="form-input"
                    value={formData.fornecedor}
                    onChange={(e) => setFormData({...formData, fornecedor: e.target.value})}
                    placeholder="Nome do fornecedor..."
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">Data *</label>
                  <input
                    type="date"
                    className="form-input"
                    value={formData.data}
                    onChange={(e) => setFormData({...formData, data: e.target.value})}
                    required
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">Valor *</label>
                  <input
                    type="number"
                    step="0.01"
                    className="form-input"
                    value={formData.valor}
                    onChange={(e) => setFormData({...formData, valor: e.target.value})}
                    required
                  />
                </div>
              </div>

              <div className="form-group">
                <label className="form-label">Descrição</label>
                <textarea
                  className="form-textarea"
                  value={formData.descricao}
                  onChange={(e) => setFormData({...formData, descricao: e.target.value})}
                  placeholder="Descreva a despesa..."
                  rows="3"
                />
              </div>

              <div className="modal-actions">
                <button 
                  type="button" 
                  className="btn btn-secondary"
                  onClick={() => {
                    setShowModal(false);
                    setEditingExpense(null);
                  }}
                >
                  Cancelar
                </button>
                <button type="submit" className="btn btn-primary">
                  {editingExpense ? 'Atualizar' : 'Cadastrar'} Despesa
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal de Tipo de Despesa */}
      {showTipoModal && (
        <div className="modal-overlay">
          <div className="modal modal-sm">
            <div className="modal-header">
              <h2 className="modal-title">Novo Tipo de Despesa</h2>
              <button 
                className="modal-close"
                onClick={() => {
                  setShowTipoModal(false);
                  setNovoTipo('');
                }}
              >
                ×
              </button>
            </div>

            <form onSubmit={handleAddTipo}>
              <div className="form-group">
                <label className="form-label">Nome do Tipo *</label>
                <input
                  type="text"
                  className="form-input"
                  value={novoTipo}
                  onChange={(e) => setNovoTipo(e.target.value)}
                  placeholder="Ex: Aluguel, Energia, Marketing..."
                  required
                />
              </div>

              <div className="modal-actions">
                <button 
                  type="button" 
                  className="btn btn-secondary"
                  onClick={() => {
                    setShowTipoModal(false);
                    setNovoTipo('');
                  }}
                >
                  Cancelar
                </button>
                <button type="submit" className="btn btn-primary">
                  Criar Tipo
                </button>
              </div>
            </form>

            {/* Lista de tipos existentes */}
            {tiposDespesas.length > 0 && (
              <div className="existing-types">
                <h4>Tipos Existentes:</h4>
                <div className="types-list">
                  {tiposDespesas.map((tipo) => (
                    <span key={tipo.id} className="badge badge-info">
                      {tipo.nome}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default Despesas;
