import React, { useState, useEffect } from 'react';
import { 
  FiPlus, 
  FiEdit2, 
  FiTrash2, 
  FiDollarSign, 
  FiCalendar, 
  FiUser, 
  FiCheckCircle, 
  FiClock,
  FiArrowLeft,
  FiEye
} from 'react-icons/fi';
import toast from 'react-hot-toast';

const Emprestimos = () => {
  const [emprestimos, setEmprestimos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [showDevolucaoModal, setShowDevolucaoModal] = useState(false);
  const [emprestimoSelecionado, setEmprestimoSelecionado] = useState(null);
  const [editando, setEditando] = useState(false);

  const [formData, setFormData] = useState({
    pessoa: 'Maiara',
    valor_total: '',
    descricao: '',
    data_emprestimo: new Date().toISOString().split('T')[0]
  });

  const [devolucaoData, setDevolucaoData] = useState({
    valor_devolvido: '',
    data_devolucao: new Date().toISOString().split('T')[0],
    observacoes: ''
  });

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

  const carregarEmprestimos = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/emprestimos');
      const data = await response.json();
      setEmprestimos(data);
    } catch (error) {
      console.error('Erro ao carregar empréstimos:', error);
      toast.error('Erro ao carregar empréstimos');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      const url = editando ? `/api/emprestimos/${emprestimoSelecionado.id}` : '/api/emprestimos';
      const method = editando ? 'PUT' : 'POST';
      
      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      const result = await response.json();

      if (response.ok) {
        toast.success(result.message);
        setShowModal(false);
        resetForm();
        carregarEmprestimos();
      } else {
        toast.error(result.error);
      }
    } catch (error) {
      console.error('Erro ao salvar empréstimo:', error);
      toast.error('Erro ao salvar empréstimo');
    }
  };

  const handleDevolucao = async (e) => {
    e.preventDefault();
    
    try {
      const response = await fetch(`/api/emprestimos/${emprestimoSelecionado.id}/devolucoes`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(devolucaoData)
      });

      const result = await response.json();

      if (response.ok) {
        toast.success(result.message);
        setShowDevolucaoModal(false);
        setDevolucaoData({
          valor_devolvido: '',
          data_devolucao: new Date().toISOString().split('T')[0],
          observacoes: ''
        });
        carregarEmprestimos();
      } else {
        toast.error(result.error);
      }
    } catch (error) {
      console.error('Erro ao registrar devolução:', error);
      toast.error('Erro ao registrar devolução');
    }
  };

  const excluirEmprestimo = async (id) => {
    if (!window.confirm('Tem certeza que deseja excluir este empréstimo?')) return;

    try {
      const response = await fetch(`/api/emprestimos/${id}`, {
        method: 'DELETE'
      });

      const result = await response.json();

      if (response.ok) {
        toast.success(result.message);
        carregarEmprestimos();
      } else {
        toast.error(result.error);
      }
    } catch (error) {
      console.error('Erro ao excluir empréstimo:', error);
      toast.error('Erro ao excluir empréstimo');
    }
  };

  const resetForm = () => {
    setFormData({
      pessoa: 'Maiara',
      valor_total: '',
      descricao: '',
      data_emprestimo: new Date().toISOString().split('T')[0]
    });
    setEditando(false);
    setEmprestimoSelecionado(null);
  };

  const abrirModalEdicao = (emprestimo) => {
    setFormData({
      pessoa: emprestimo.pessoa,
      valor_total: emprestimo.valor_total,
      descricao: emprestimo.descricao || '',
      data_emprestimo: emprestimo.data_emprestimo
    });
    setEmprestimoSelecionado(emprestimo);
    setEditando(true);
    setShowModal(true);
  };

  const abrirModalDevolucao = (emprestimo) => {
    setEmprestimoSelecionado(emprestimo);
    setDevolucaoData({
      valor_devolvido: emprestimo.valor_restante.toString(),
      data_devolucao: new Date().toISOString().split('T')[0],
      observacoes: ''
    });
    setShowDevolucaoModal(true);
  };

  const formatarMoeda = (valor) => {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    }).format(valor);
  };

  const formatarData = (data) => {
    return new Date(data + 'T00:00:00').toLocaleDateString('pt-BR');
  };

  const getStatusBadge = (status) => {
    const badges = {
      ativo: { color: 'orange', icon: FiClock, text: 'Ativo' },
      quitado: { color: 'green', icon: FiCheckCircle, text: 'Quitado' },
      cancelado: { color: 'red', icon: FiTrash2, text: 'Cancelado' }
    };

    const badge = badges[status] || badges.ativo;
    const Icon = badge.icon;

    return (
      <span className={`badge badge-${badge.color}`}>
        <Icon size={12} />
        {badge.text}
      </span>
    );
  };

  const calcularTotalEmprestado = () => {
    return emprestimos
      .filter(emp => emp.status === 'ativo')
      .reduce((total, emp) => total + parseFloat(emp.valor_restante), 0);
  };

  const calcularTotalQuitado = () => {
    return emprestimos
      .filter(emp => emp.status === 'quitado')
      .reduce((total, emp) => total + parseFloat(emp.valor_total), 0);
  };

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

  return (
    <div className="emprestimos fade-in">
      <div className="page-header">
        <div>
          <h1>Controle de Empréstimos</h1>
          <p>Gerencie os empréstimos da Maiara</p>
        </div>
        <button 
          className="btn btn-primary"
          onClick={() => setShowModal(true)}
        >
          <FiPlus /> Novo Empréstimo
        </button>
      </div>

      {/* Cards de Resumo */}
      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-icon orange">
            <FiDollarSign />
          </div>
          <div className="stat-content">
            <h3>Total em Aberto</h3>
            <p className="stat-value">{formatarMoeda(calcularTotalEmprestado())}</p>
          </div>
        </div>

        <div className="stat-card">
          <div className="stat-icon green">
            <FiCheckCircle />
          </div>
          <div className="stat-content">
            <h3>Total Quitado</h3>
            <p className="stat-value">{formatarMoeda(calcularTotalQuitado())}</p>
          </div>
        </div>

        <div className="stat-card">
          <div className="stat-icon blue">
            <FiUser />
          </div>
          <div className="stat-content">
            <h3>Empréstimos Ativos</h3>
            <p className="stat-value">{emprestimos.filter(emp => emp.status === 'ativo').length}</p>
          </div>
        </div>
      </div>

      {/* Lista de Empréstimos */}
      <div className="content-card">
        <div className="card-header">
          <h2>Lista de Empréstimos</h2>
        </div>

        {emprestimos.length === 0 ? (
          <div className="empty-state">
            <FiDollarSign size={48} />
            <h3>Nenhum empréstimo encontrado</h3>
            <p>Clique em "Novo Empréstimo" para começar</p>
          </div>
        ) : (
          <div className="table-container">
            <table className="table">
              <thead>
                <tr>
                  <th>Pessoa</th>
                  <th>Descrição</th>
                  <th>Valor Total</th>
                  <th>Valor Restante</th>
                  <th>Data</th>
                  <th>Status</th>
                  <th>Ações</th>
                </tr>
              </thead>
              <tbody>
                {emprestimos.map((emprestimo) => (
                  <tr key={emprestimo.id}>
                    <td>
                      <div className="user-info">
                        <FiUser className="user-icon" />
                        <strong>{emprestimo.pessoa}</strong>
                      </div>
                    </td>
                    <td>
                      <span className="description-text">
                        {emprestimo.descricao || '-'}
                      </span>
                    </td>
                    <td>
                      <strong>{formatarMoeda(emprestimo.valor_total)}</strong>
                    </td>
                    <td>
                      <span className={emprestimo.valor_restante > 0 ? 'text-orange' : 'text-green'}>
                        <strong>{formatarMoeda(emprestimo.valor_restante)}</strong>
                      </span>
                    </td>
                    <td>{formatarData(emprestimo.data_emprestimo)}</td>
                    <td>{getStatusBadge(emprestimo.status)}</td>
                    <td>
                      <div className="action-buttons">
                        {emprestimo.status === 'ativo' && emprestimo.valor_restante > 0 && (
                          <button
                            className="btn btn-sm btn-success"
                            onClick={() => abrirModalDevolucao(emprestimo)}
                            title="Registrar Devolução"
                          >
                            <FiDollarSign />
                          </button>
                        )}
                        <button
                          className="btn btn-sm btn-outline"
                          onClick={() => abrirModalEdicao(emprestimo)}
                          title="Editar"
                        >
                          <FiEdit2 />
                        </button>
                        <button
                          className="btn btn-sm btn-danger"
                          onClick={() => excluirEmprestimo(emprestimo.id)}
                          title="Excluir"
                        >
                          <FiTrash2 />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Modal Novo/Editar Empréstimo */}
      {showModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h3>{editando ? 'Editar Empréstimo' : 'Novo Empréstimo'}</h3>
              <button 
                className="modal-close"
                onClick={() => {
                  setShowModal(false);
                  resetForm();
                }}
              >
                ×
              </button>
            </div>

            <form onSubmit={handleSubmit}>
              <div className="modal-body">
                <div className="form-grid">
                  <div className="form-group">
                    <label className="form-label">Pessoa</label>
                    <input
                      type="text"
                      className="form-input"
                      value={formData.pessoa}
                      onChange={(e) => setFormData({...formData, pessoa: e.target.value})}
                      required
                    />
                  </div>

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

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

                  <div className="form-group form-group-full">
                    <label className="form-label">Descrição</label>
                    <textarea
                      className="form-input"
                      rows="3"
                      value={formData.descricao}
                      onChange={(e) => setFormData({...formData, descricao: e.target.value})}
                      placeholder="Motivo do empréstimo (opcional)"
                    />
                  </div>
                </div>
              </div>

              <div className="modal-footer">
                <button 
                  type="button" 
                  className="btn btn-outline"
                  onClick={() => {
                    setShowModal(false);
                    resetForm();
                  }}
                >
                  Cancelar
                </button>
                <button type="submit" className="btn btn-primary">
                  {editando ? 'Atualizar' : 'Criar'} Empréstimo
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal Devolução */}
      {showDevolucaoModal && emprestimoSelecionado && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h3>Registrar Devolução</h3>
              <button 
                className="modal-close"
                onClick={() => setShowDevolucaoModal(false)}
              >
                ×
              </button>
            </div>

            <form onSubmit={handleDevolucao}>
              <div className="modal-body">
                <div className="emprestimo-info">
                  <h4>{emprestimoSelecionado.pessoa}</h4>
                  <p>Valor restante: <strong>{formatarMoeda(emprestimoSelecionado.valor_restante)}</strong></p>
                </div>

                <div className="form-grid">
                  <div className="form-group">
                    <label className="form-label">Valor da Devolução</label>
                    <input
                      type="number"
                      step="0.01"
                      className="form-input"
                      value={devolucaoData.valor_devolvido}
                      onChange={(e) => setDevolucaoData({...devolucaoData, valor_devolvido: e.target.value})}
                      max={emprestimoSelecionado.valor_restante}
                      required
                    />
                    <small className="form-help">
                      Máximo: {formatarMoeda(emprestimoSelecionado.valor_restante)}
                    </small>
                  </div>

                  <div className="form-group">
                    <label className="form-label">Data da Devolução</label>
                    <input
                      type="date"
                      className="form-input"
                      value={devolucaoData.data_devolucao}
                      onChange={(e) => setDevolucaoData({...devolucaoData, data_devolucao: e.target.value})}
                      required
                    />
                  </div>

                  <div className="form-group form-group-full">
                    <label className="form-label">Observações</label>
                    <textarea
                      className="form-input"
                      rows="3"
                      value={devolucaoData.observacoes}
                      onChange={(e) => setDevolucaoData({...devolucaoData, observacoes: e.target.value})}
                      placeholder="Observações sobre a devolução (opcional)"
                    />
                  </div>
                </div>
              </div>

              <div className="modal-footer">
                <button 
                  type="button" 
                  className="btn btn-outline"
                  onClick={() => setShowDevolucaoModal(false)}
                >
                  Cancelar
                </button>
                <button type="submit" className="btn btn-success">
                  Registrar Devolução
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default Emprestimos;
