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

const Clientes = () => {
  const [clientes, setClientes] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [viewMode, setViewMode] = useState('list');
  const [showModal, setShowModal] = useState(false);
  const [editingClient, setEditingClient] = useState(null);
  const [showChatModal, setShowChatModal] = useState(false);
  const [selectedCliente, setSelectedCliente] = useState(null);

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

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

  const carregarClientes = async () => {
    try {
      setLoading(true);
      const response = await clientesAPI.listar();
      setClientes(response.data);
    } catch (error) {
      console.error('Erro ao carregar clientes:', error);
      toast.error('Erro ao carregar clientes');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if (editingClient) {
        await clientesAPI.atualizar(editingClient.id, formData);
        toast.success('Cliente atualizado com sucesso!');
      } else {
        await clientesAPI.criar(formData);
        toast.success('Cliente cadastrado com sucesso!');
      }
      
      setShowModal(false);
      setEditingClient(null);
      setFormData({
        nome_completo: '',
        email: '',
        whatsapp: '',
        endereco: ''
      });
      carregarClientes();
    } catch (error) {
      console.error('Erro ao salvar cliente:', error);
      toast.error('Erro ao salvar cliente');
    }
  };

  const handleEdit = (cliente) => {
    setEditingClient(cliente);
    setFormData({
      nome_completo: cliente.nome_completo,
      email: cliente.email || '',
      whatsapp: cliente.whatsapp || '',
      endereco: cliente.endereco || ''
    });
    setShowModal(true);
  };

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

  const abrirChat = (cliente) => {
    if (!cliente.whatsapp) {
      toast.error('Cliente não possui WhatsApp cadastrado');
      return;
    }
    
    const clienteFormatado = {
      nome: cliente.nome_completo,
      telefone: cliente.whatsapp.replace(/\D/g, ''),
      id: cliente.id
    };
    
    setSelectedCliente(clienteFormatado);
    setShowChatModal(true);
  };

  const filteredClientes = clientes.filter(cliente =>
    cliente.nome_completo.toLowerCase().includes(searchTerm.toLowerCase()) ||
    (cliente.email && cliente.email.toLowerCase().includes(searchTerm.toLowerCase())) ||
    (cliente.whatsapp && cliente.whatsapp.includes(searchTerm)) ||
    (cliente.id_cliente && cliente.id_cliente.toLowerCase().includes(searchTerm.toLowerCase()))
  );

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

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

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

      {/* Lista de Clientes */}
      {filteredClientes.length === 0 ? (
        <div className="empty-state">
          <FiUsers size={48} />
          <h3>Nenhum cliente encontrado</h3>
          <p>Comece adicionando seu primeiro cliente</p>
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Adicionar Cliente
          </button>
        </div>
      ) : viewMode === 'cards' ? (
        <div className="clients-grid">
          {filteredClientes.map((cliente) => (
            <div key={cliente.id} className="client-card">
              <div className="client-header">
                <div className="client-avatar">
                  <FiUsers />
                </div>
                <div className="client-actions">
                  {cliente.whatsapp && (
                    <button 
                      className="btn-icon btn-success"
                      onClick={() => abrirChat(cliente)}
                      title="Abrir Chat WhatsApp"
                    >
                      <FiMessageSquare />
                    </button>
                  )}
                  <button 
                    className="btn-icon"
                    onClick={() => handleEdit(cliente)}
                    title="Editar"
                  >
                    <FiEdit />
                  </button>
                  <button 
                    className="btn-icon btn-danger"
                    onClick={() => handleDelete(cliente.id)}
                    title="Excluir"
                  >
                    <FiTrash2 />
                  </button>
                </div>
              </div>

              <div className="client-info">
                <h3 className="client-name">{cliente.nome_completo}</h3>
                
                {cliente.id_cliente && (
                  <div className="client-detail">
                    <span className="client-id">#{cliente.id_cliente}</span>
                  </div>
                )}
                
                {cliente.email && (
                  <div className="client-detail">
                    <FiMail className="detail-icon" />
                    <span>{cliente.email}</span>
                  </div>
                )}

                {cliente.whatsapp && (
                  <div className="client-detail">
                    <FiPhone className="detail-icon" />
                    <span>{cliente.whatsapp}</span>
                  </div>
                )}

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

                <div className="client-meta">
                  <span className="client-date">
                    Cadastrado em {new Date(cliente.created_at).toLocaleDateString('pt-BR')}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="list-view">
          <div className="list-header clientes-list-header">
            <span>ID / Nome</span>
            <span>Email</span>
            <span>WhatsApp</span>
            <span>Endereço</span>
            <span>Ações</span>
          </div>
          {filteredClientes.map((cliente) => (
            <div key={cliente.id} className="list-item clientes-list-item">
              <div>
                <div style={{ fontWeight: '600' }}>
                  {cliente.id_cliente && <span style={{ color: '#3b82f6', fontSize: '12px', fontWeight: '700' }}>#{cliente.id_cliente} - </span>}
                  {cliente.nome_completo}
                </div>
                <div style={{ fontSize: '12px', color: '#6b7280' }}>
                  Cadastrado em {new Date(cliente.created_at).toLocaleDateString('pt-BR')}
                </div>
              </div>
              <span>{cliente.email || '-'}</span>
              <span>{cliente.whatsapp || '-'}</span>
              <span title={cliente.endereco} style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {cliente.endereco || '-'}
              </span>
              <div className="list-item-actions">
                {cliente.whatsapp && (
                  <button 
                    className="btn-icon btn-sm btn-success"
                    onClick={() => abrirChat(cliente)}
                    title="Abrir Chat WhatsApp"
                  >
                    <FiMessageSquare />
                  </button>
                )}
                <button 
                  className="btn-icon btn-sm"
                  onClick={() => handleEdit(cliente)}
                  title="Editar"
                >
                  <FiEdit />
                </button>
                <button 
                  className="btn-icon btn-sm btn-danger"
                  onClick={() => handleDelete(cliente.id)}
                  title="Excluir"
                >
                  <FiTrash2 />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

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

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

              <div className="grid grid-2">
                <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">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">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);
                    setEditingClient(null);
                  }}
                >
                  Cancelar
                </button>
                <button type="submit" className="btn btn-primary">
                  {editingClient ? 'Atualizar' : 'Cadastrar'} Cliente
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Chat WhatsApp */}
      <ChatWhatsApp 
        isOpen={showChatModal}
        onClose={() => setShowChatModal(false)}
        cliente={selectedCliente}
      />
    </div>
  );
};

export default Clientes;
