import React, { useState, useEffect, useRef } from 'react';
import { FiX, FiSend, FiPhone, FiMessageCircle } from 'react-icons/fi';
import './ChatWhatsApp.css';

const ZONA_HORARIA_BRASIL = 'America/Sao_Paulo';

const parseDate = (valor) => {
  if (!valor) return null;

  if (valor instanceof Date && !isNaN(valor)) {
    return valor;
  }

  if (typeof valor === 'number') {
    const date = new Date(valor);
    return isNaN(date) ? null : date;
  }

  if (typeof valor === 'string') {
    const normalizada = valor.replace(' ', 'T');
    let date = new Date(normalizada);

    if (!isNaN(date)) {
      return date;
    }

    const partes = normalizada.split('-');
    if (partes.length === 3) {
      const [ano, mes, dia] = partes.map(Number);
      if (ano && mes && dia) {
        date = new Date(ano, mes - 1, dia);
        if (!isNaN(date)) {
          return date;
        }
      }
    }
  }

  return null;
};

const formatarDataBrasil = (valor) => {
  const data = parseDate(valor);
  if (!data) return 'Data inválida';
  return new Intl.DateTimeFormat('pt-BR', {
    timeZone: ZONA_HORARIA_BRASIL
  }).format(data);
};

const formatarHoraBrasil = (valor) => {
  const data = parseDate(valor);
  if (!data) return '--:--';
  return new Intl.DateTimeFormat('pt-BR', {
    timeZone: ZONA_HORARIA_BRASIL,
    hour: '2-digit',
    minute: '2-digit'
  }).format(data);
};

const ChatWhatsApp = ({ isOpen, onClose, cliente }) => {
  const [mensagens, setMensagens] = useState([]);
  const [novaMensagem, setNovaMensagem] = useState('');
  const [enviando, setEnviando] = useState(false);
  const [carregando, setCarregando] = useState(false);
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [mensagens]);

  useEffect(() => {
    if (isOpen && cliente?.telefone) {
      carregarHistorico();
    }
  }, [isOpen, cliente]);

  const carregarHistorico = async () => {
    setCarregando(true);
    try {
      const response = await fetch(`/api/chat/${cliente.telefone}`);
      const data = await response.json();
      
      if (response.ok) {
        setMensagens(data.data || []);
      } else {
        console.error('Erro ao carregar histórico:', data.error);
      }
    } catch (error) {
      console.error('Erro ao carregar histórico:', error);
    } finally {
      setCarregando(false);
    }
  };

  const enviarMensagem = async () => {
    if (!novaMensagem.trim() || enviando) return;

    setEnviando(true);
    const mensagemTemp = {
      id: Date.now(),
      mensagem: novaMensagem,
      tipo: 'enviada',
      created_at: new Date().toISOString(),
      status: 'enviando'
    };

    // Adicionar mensagem temporária
    setMensagens(prev => [...prev, mensagemTemp]);
    setNovaMensagem('');

    try {
      const response = await fetch('/api/chat/enviar', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          telefone: cliente.telefone,
          mensagem: novaMensagem,
          clienteNome: cliente.nome
        })
      });

      const data = await response.json();

      if (response.ok) {
        // Atualizar mensagem temporária com dados reais
        setMensagens(prev => 
          prev.map(msg => 
            msg.id === mensagemTemp.id 
              ? { ...data.data, status: 'enviada' }
              : msg
          )
        );
      } else {
        // Remover mensagem temporária e mostrar erro
        setMensagens(prev => prev.filter(msg => msg.id !== mensagemTemp.id));
        alert(`Erro ao enviar mensagem: ${data.error}`);
      }
    } catch (error) {
      console.error('Erro ao enviar mensagem:', error);
      setMensagens(prev => prev.filter(msg => msg.id !== mensagemTemp.id));
      alert('Erro ao enviar mensagem. Tente novamente.');
    } finally {
      setEnviando(false);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      enviarMensagem();
    }
  };


  if (!isOpen) return null;

  return (
    <div className="chat-overlay">
      <div className="chat-container">
        {/* Header */}
        <div className="chat-header">
          <div className="chat-client-info">
            <div className="chat-avatar">
              <FiMessageCircle size={24} />
            </div>
            <div className="chat-client-details">
              <h3>{cliente?.nome || 'Cliente'}</h3>
              <span className="chat-phone">
                <FiPhone size={14} />
                {cliente?.telefone}
              </span>
            </div>
          </div>
          <button className="chat-close-btn" onClick={onClose}>
            <FiX size={20} />
          </button>
        </div>

        {/* Messages Area */}
        <div className="chat-messages">
          {carregando ? (
            <div className="chat-loading">
              <div className="loading-spinner"></div>
              <p>Carregando histórico...</p>
            </div>
          ) : mensagens.length === 0 ? (
            <div className="chat-empty">
              <FiMessageCircle size={48} />
              <p>Nenhuma mensagem ainda</p>
              <span>Inicie uma conversa com {cliente?.nome}</span>
            </div>
          ) : (
            <>
              {mensagens.map((mensagem, index) => {
                const showDate = index === 0 || 
                  formatarDataBrasil(mensagem.created_at) !== formatarDataBrasil(mensagens[index - 1].created_at);
                
                return (
                  <React.Fragment key={mensagem.id || index}>
                    {showDate && (
                      <div className="chat-date-divider">
                        {formatarDataBrasil(mensagem.created_at)}
                      </div>
                    )}
                    <div className={`chat-message ${mensagem.tipo}`}>
                      <div className="message-content">
                        <p>{mensagem.mensagem}</p>
                        <div className="message-info">
                          <span className="message-time">
                            {formatarHoraBrasil(mensagem.created_at)}
                          </span>
                          {mensagem.tipo === 'enviada' && (
                            <span className={`message-status ${mensagem.status}`}>
                              {mensagem.status === 'enviando' ? '⏳' : 
                               mensagem.status === 'enviada' ? '✓' : 
                               mensagem.status === 'entregue' ? '✓✓' : 
                               mensagem.status === 'lida' ? '✓✓' : ''}
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                  </React.Fragment>
                );
              })}
              <div ref={messagesEndRef} />
            </>
          )}
        </div>

        {/* Input Area */}
        <div className="chat-input-area">
          <div className="chat-input-container">
            <textarea
              value={novaMensagem}
              onChange={(e) => setNovaMensagem(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="Digite sua mensagem..."
              className="chat-input"
              rows="1"
              disabled={enviando}
            />
            <button
              onClick={enviarMensagem}
              disabled={!novaMensagem.trim() || enviando}
              className="chat-send-btn"
            >
              <FiSend size={18} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatWhatsApp;
