import React, { useState, useEffect } from 'react';
import { 
  FiPlus, 
  FiEdit, 
  FiTrash2, 
  FiSearch, 
  FiTruck,
  FiMail,
  FiPhone,
  FiMapPin,
  FiMessageSquare
} from 'react-icons/fi';
import { fornecedoresAPI } from '../services/api';
import ViewToggle from '../components/ViewToggle';
import toast from 'react-hot-toast';

const Fornecedores = () => {
  const [fornecedores, setFornecedores] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [viewMode, setViewMode] = useState('list');
  const [showModal, setShowModal] = useState(false);
  const [editingSupplier, setEditingSupplier] = useState(null);

  
  const formatFornecedor = (fornecedor) => {
    if (!fornecedor) return {
      id: undefined,
      nome: 'Fornecedor sem nome',
      telefone: '',
      whatsapp: '',
      endereco: '',
      email: ''
    };

    const nome = fornecedor.nome || fornecedor.razao_social || 'Fornecedor sem nome';
    const telefone = fornecedor.telefone || fornecedor.whatsapp || '';
    const whatsapp = fornecedor.whatsapp || fornecedor.telefone || '';

    return {
      ...fornecedor,
      nome,
      telefone,
      whatsapp,
      endereco: fornecedor.endereco || '',
      email: fornecedor.email || ''
    };
  };

  const normalizeSearch = (value) => (value || '').toString().toLowerCase();

  const [formData, setFormData] = useState({
    nome: '',
    telefone: '',
    whatsapp: '',
    endereco: '',
    email: ''
  });

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

  const carregarFornecedores = async () => {
    try {
      setLoading(true);
      const response = await fornecedoresAPI.listar();
      const dados = (response.data || []).map(formatFornecedor);
      setFornecedores(dados);
    } catch (error) {
      console.error('Erro ao carregar fornecedores:', error);
      toast.error('Erro ao carregar fornecedores');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if (editingSupplier) {
        await fornecedoresAPI.atualizar(editingSupplier.id, formData);
        toast.success('Fornecedor atualizado com sucesso!');
      } else {
        await fornecedoresAPI.criar(formData);
        toast.success('Fornecedor cadastrado com sucesso!');
      }
      
      setShowModal(false);
      setEditingSupplier(null);
      setFormData({
        nome: '',
        telefone: '',
        whatsapp: '',
        endereco: '',
        email: ''
      });
      carregarFornecedores();
    } catch (error) {
      console.error('Erro ao salvar fornecedor:', error);
      toast.error('Erro ao salvar fornecedor');
    }
  };

  const handleEdit = (fornecedor) => {
    const fornecedorFormatado = formatFornecedor(fornecedor);
    setEditingSupplier(fornecedorFormatado);
    setFormData({
      nome: fornecedorFormatado.nome,
      telefone: fornecedorFormatado.telefone || '',
      whatsapp: fornecedorFormatado.whatsapp || '',
      endereco: fornecedorFormatado.endereco || '',
      email: fornecedorFormatado.email || ''
    });
    setShowModal(true);
  };

  const handleDelete = async (id) => {
    if (window.confirm('Tem certeza que deseja excluir este fornecedor?')) {
      try {
        await fornecedoresAPI.deletar(id);
        toast.success('Fornecedor excluído com sucesso!');
        carregarFornecedores();
      } catch (error) {
        console.error('Erro ao excluir fornecedor:', error);
        toast.error('Erro ao excluir fornecedor');
      }
    }
  };

  const searchTermNormalized = normalizeSearch(searchTerm);

  const filteredFornecedores = fornecedores.filter((fornecedor) => {
    if (!searchTermNormalized) return true;

    return (
      normalizeSearch(fornecedor.nome).includes(searchTermNormalized) ||
      normalizeSearch(fornecedor.email).includes(searchTermNormalized) ||
      normalizeSearch(fornecedor.telefone).includes(searchTermNormalized) ||
      normalizeSearch(fornecedor.whatsapp).includes(searchTermNormalized)
    );
  });

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

  return (
    <div className="fornecedores fade-in">
      <div className="page-header">
        <div>
          <h1>Fornecedores</h1>
          <p>Gerencie os fornecedores da loja</p>
        </div>
        <div className="header-actions">
          <ViewToggle 
            viewMode={viewMode} 
            onViewModeChange={setViewMode} 
          />
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Novo Fornecedor
          </button>
        </div>
      </div>

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

      {/* Lista de Fornecedores */}
      {filteredFornecedores.length === 0 ? (
        <div className="empty-state">
          <FiTruck size={48} />
          <h3>Nenhum fornecedor encontrado</h3>
          <p>Comece adicionando seu primeiro fornecedor</p>
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Adicionar Fornecedor
          </button>
        </div>
      ) : (
        <div className="suppliers-grid">
          {filteredFornecedores.map((fornecedor) => (
            <div key={fornecedor.id} className="supplier-card">
              <div className="supplier-header">
                <div className="supplier-avatar">
                  <FiTruck />
                </div>
                <div className="supplier-actions">
                  <button 
                    className="btn-icon"
                    onClick={() => handleEdit(fornecedor)}
                    title="Editar"
                  >
                    <FiEdit />
                  </button>
                  <button 
                    className="btn-icon btn-danger"
                    onClick={() => handleDelete(fornecedor.id)}
                    title="Excluir"
                  >
                    <FiTrash2 />
                  </button>
                </div>
              </div>

              <div className="supplier-info">
                <h3 className="supplier-name">{fornecedor.nome}</h3>
                
                {fornecedor.email && (
                  <div className="supplier-detail">
                    <FiMail className="detail-icon" />
                    <span>{fornecedor.email}</span>
                  </div>
                )}

                {fornecedor.telefone && (
                  <div className="supplier-detail">
                    <FiPhone className="detail-icon" />
                    <span>{fornecedor.telefone}</span>
                  </div>
                )}

                {fornecedor.whatsapp && (
                  <div className="supplier-detail">
                    <FiMessageSquare className="detail-icon" />
                    <span>{fornecedor.whatsapp}</span>
                  </div>
                )}

                {fornecedor.endereco && (
                  <div className="supplier-detail">
                    <FiMapPin className="detail-icon" />
                    <span>{fornecedor.endereco}</span>
                  </div>
                )}

                <div className="supplier-meta">
                  <span className="supplier-date">
                    Cadastrado em {new Date(fornecedor.created_at).toLocaleDateString('pt-BR')}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Modal de Fornecedor */}
      {showModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h2 className="modal-title">
                {editingSupplier ? 'Editar Fornecedor' : 'Novo Fornecedor'}
              </h2>
              <button 
                className="modal-close"
                onClick={() => {
                  setShowModal(false);
                  setEditingSupplier(null);
                  setFormData({
                    nome: '',
                    telefone: '',
                    whatsapp: '',
                    endereco: '',
                    email: ''
                  });
                }}
              >
                ×
              </button>
            </div>

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

              <div className="grid grid-2">
                <div className="form-group">
                  <label className="form-label">Telefone</label>
                  <input
                    type="tel"
                    className="form-input"
                    value={formData.telefone}
                    onChange={(e) => setFormData({...formData, telefone: e.target.value})}
                    placeholder="(11) 3333-3333"
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">WhatsApp</label>
                  <input
                    type="tel"
                    className="form-input"
                    value={formData.whatsapp}
                    onChange={(e) => setFormData({...formData, whatsapp: e.target.value})}
                    placeholder="(11) 99999-9999"
                  />
                </div>
              </div>

              <div className="form-group">
                <label className="form-label">E-mail</label>
                <input
                  type="email"
                  className="form-input"
                  value={formData.email}
                  onChange={(e) => setFormData({...formData, email: e.target.value})}
                />
              </div>

              <div className="form-group">
                <label className="form-label">Endereço</label>
                <textarea
                  className="form-textarea"
                  value={formData.endereco}
                  onChange={(e) => setFormData({...formData, endereco: e.target.value})}
                  placeholder="Rua, número, bairro, cidade, CEP"
                  rows="3"
                />
              </div>

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

export default Fornecedores;
