import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import api from '../lib/api';
import { toast } from '../components/Toast';
import { DatePicker } from '../components/DatePicker';

interface Server {
  id: number;
  name: string;
  active: boolean;
}

export function ClientEditPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [servers, setServers] = useState<Server[]>([]);
  const [showServerModal, setShowServerModal] = useState(false);
  const [newServerName, setNewServerName] = useState('');
  const [newServerContact, setNewServerContact] = useState('');
  const [newServerWhatsApp, setNewServerWhatsApp] = useState('');
  const [savingServer, setSavingServer] = useState(false);
  
  const [formData, setFormData] = useState({
    name: '',
    code: '',
    username: '',
    password: '',
    whatsapp: '',
    server_id: '',
    expires_at: '',
    valor_mensalidade: '',
    screens: '1',
  });

  useEffect(() => {
    fetchServers();
    if (id) {
      fetchClient();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

  const fetchServers = async () => {
    try {
      const { data } = await api.get('/servers');
      setServers(data.servers || []);
    } catch (error) {
      console.error('Error fetching servers:', error);
    }
  };

  const fetchClient = async () => {
    try {
      setLoading(true);
      const response = await api.get(`/clients/${id}`);
      console.log('API Response:', response.data);
      
      // Backend retorna { client: {...} }
      const clientData = response.data.client || response.data;
      console.log('Client data loaded:', clientData);
      
      setFormData({
        name: clientData.name || '',
        code: clientData.code || '',
        username: clientData.username || '',
        password: clientData.password || '',
        whatsapp: clientData.whatsapp || '',
        server_id: String(clientData.server_id || ''),
        expires_at: clientData.expires_at ? clientData.expires_at.split('T')[0] : '',
        valor_mensalidade: String(clientData.valor_mensalidade || ''),
        screens: clientData.screens !== undefined && clientData.screens !== null 
          ? String(Math.max(1, Math.min(10, parseInt(String(clientData.screens)) || 1))) 
          : '1',
      });
    } catch (error: any) {
      console.error('Error fetching client:', error);
      toast.error(error.response?.data?.message || 'Erro ao carregar dados do cliente');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      await api.put(`/clients/${id}`, {
        ...formData,
        valor_mensalidade: parseFloat(formData.valor_mensalidade),
        screens: parseInt(formData.screens) || 1,
      });
      toast.success('Cliente atualizado com sucesso!');
      navigate('/clients');
    } catch (error: unknown) {
      console.error('Error updating client:', error);
      
      // Tratamento específico para erro de limite
      if (error && typeof error === 'object' && 'response' in error) {
        const axiosError = error as { response?: { status: number; data: { message: string; needs_plan?: boolean; current_clients?: number; client_limit?: number } } };
        if (axiosError.response?.status === 403) {
          const data = axiosError.response.data;
          if (data.needs_plan) {
            toast.error(`${data.message}\n\n💡 Você precisa de um plano ativo para gerenciar clientes.`);
          } else {
            toast.error(`${data.message}\n\nClientes atuais: ${data.current_clients}/${data.client_limit}`);
          }
        } else {
          toast.error(axiosError.response?.data?.message || 'Erro ao atualizar cliente. Verifique os dados e tente novamente.');
        }
      } else {
        toast.error('Erro ao atualizar cliente. Verifique os dados e tente novamente.');
      }
    } finally {
      setLoading(false);
    }
  };

  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.target === e.currentTarget) {
      navigate('/clients');
    }
  };

  const handleAddServer = async () => {
    if (!newServerName.trim()) {
      alert('Nome do servidor é obrigatório');
      return;
    }

    setSavingServer(true);
    try {
      const { data } = await api.post('/servers', {
        name: newServerName,
        contact_name: newServerContact,
        contact_whatsapp: newServerWhatsApp,
        active: true,
      });

      // Adicionar novo servidor à lista e selecionar
      const newServer = data.server;
      setServers([...servers, newServer]);
      setFormData({ ...formData, server_id: newServer.id.toString() });
      
      // Limpar form e fechar modal
      setNewServerName('');
      setNewServerContact('');
      setNewServerWhatsApp('');
      setShowServerModal(false);
    } catch (error) {
      console.error('Error creating server:', error);
      alert('Erro ao criar servidor. Tente novamente.');
    } finally {
      setSavingServer(false);
    }
  };

  const handleCancelServerModal = () => {
    setNewServerName('');
    setNewServerContact('');
    setNewServerWhatsApp('');
    setShowServerModal(false);
  };

  return (
    <>
      {/* Modal Adicionar Servidor */}
      {showServerModal && (
        <div 
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[60] p-4"
          onClick={(e) => {
            if (e.target === e.currentTarget) {
              handleCancelServerModal();
            }
          }}
        >
          <div className="bg-white rounded-2xl w-full max-w-2xl shadow-2xl">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h3 className="text-xl font-bold text-gray-800">Adicionar Novo Servidor</h3>
              <button
                onClick={handleCancelServerModal}
                className="text-gray-400 hover:text-gray-600 text-2xl"
              >
                ×
              </button>
            </div>

            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Nome do Servidor *
                </label>
                <input
                  type="text"
                  value={newServerName}
                  onChange={(e) => setNewServerName(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  placeholder="Meu Servidor IPTV"
                  autoFocus
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Nome do Contato
                  </label>
                  <input
                    type="text"
                    value={newServerContact}
                    onChange={(e) => setNewServerContact(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    placeholder="Nome do fornecedor"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    WhatsApp do Contato
                  </label>
                  <input
                    type="tel"
                    value={newServerWhatsApp}
                    onChange={(e) => setNewServerWhatsApp(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    placeholder="5511999999999"
                  />
                </div>
              </div>
            </div>

            <div className="flex gap-3 p-6 border-t border-gray-200 bg-gray-50 rounded-b-2xl">
              <button
                type="button"
                onClick={handleCancelServerModal}
                className="flex-1 px-6 py-3 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors"
              >
                Cancelar
              </button>
              <button
                type="button"
                onClick={handleAddServer}
                disabled={savingServer}
                className="flex-1 px-6 py-3 rounded-lg text-white font-medium transition-colors disabled:opacity-50"
                style={{ backgroundColor: '#7C3AED' }}
              >
                {savingServer ? 'Salvando...' : 'Salvar Servidor'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal Principal - Cliente */}
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
        onClick={handleBackdropClick}
      >
      <div className="bg-white rounded-2xl w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl">
        {/* Header */}
        <div className="flex justify-between items-center p-6 border-b border-gray-200">
          <h2 className="text-2xl font-bold text-gray-800">
            Editar Cliente
          </h2>
          <button
            onClick={() => navigate('/clients')}
            className="text-gray-400 hover:text-gray-600 text-2xl"
          >
            ×
          </button>
        </div>

        {/* Content - Scrollable */}
        <div className="overflow-y-auto flex-1 p-4 md:p-6">
          <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
            {/* Nome */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Nome *
              </label>
              <input
                type="text"
                required
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>

            {/* Servidor */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Servidor *
              </label>
              <div className="flex gap-2">
                <select
                  required
                  value={formData.server_id}
                  onChange={(e) => setFormData({ ...formData, server_id: e.target.value })}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                >
                  <option value="">Selecione</option>
                  {servers.filter(server => server.active).map((server) => (
                    <option key={server.id} value={server.id}>
                      {server.name}
                    </option>
                  ))}
                </select>
                <button
                  type="button"
                  onClick={() => setShowServerModal(true)}
                  className="px-3 py-2 rounded-lg text-white font-medium hover:opacity-90 transition-opacity"
                  style={{ backgroundColor: '#7C3AED' }}
                  title="Adicionar novo servidor"
                >
                  +
                </button>
              </div>
            </div>

            {/* Código */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Código
              </label>
              <input
                type="text"
                value={formData.code}
                onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                placeholder="Ex: código no seu sistema"
                maxLength={100}
              />
            </div>

            {/* Usuário */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Usuário
              </label>
              <input
                type="text"
                value={formData.username}
                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>

            {/* Senha */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Senha
              </label>
              <input
                type="text"
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                placeholder="Deixe em branco para manter"
              />
            </div>

            {/* WhatsApp */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                WhatsApp
              </label>
              <input
                type="tel"
                value={formData.whatsapp}
                onChange={(e) => setFormData({ ...formData, whatsapp: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                placeholder="5511999999999"
              />
            </div>

            {/* Data de Vencimento */}
            <div>
              <DatePicker
                value={formData.expires_at}
                onChange={(value) => setFormData({ ...formData, expires_at: value })}
                label="Vencimento"
                placeholder="Selecione a data de vencimento"
              />
              <p className="text-xs text-gray-500 mt-1">
                O status será calculado automaticamente baseado nesta data
              </p>
            </div>

            {/* Valor Mensal */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Valor Mensal (R$) *
              </label>
              <input
                type="number"
                step="0.01"
                required
                value={formData.valor_mensalidade}
                onChange={(e) => setFormData({ ...formData, valor_mensalidade: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                placeholder="0.00"
              />
            </div>

            {/* Número de Telas */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Número de Telas *
              </label>
              <input
                type="number"
                min="1"
                max="10"
                step="1"
                required
                value={formData.screens}
                onChange={(e) => {
                  const value = e.target.value;
                  // Garantir que seja um número inteiro válido
                  if (value === '' || (!isNaN(Number(value)) && Number(value) >= 1 && Number(value) <= 10)) {
                    setFormData({ ...formData, screens: value });
                  }
                }}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                placeholder="1"
              />
              <p className="text-xs text-gray-500 mt-1">
                Cada renovação consome {formData.screens || 1} crédito(s) do servidor
              </p>
            </div>
          </form>
        </div>

        {/* Footer - Fixed */}
        <div className="flex gap-3 p-6 border-t border-gray-200 bg-gray-50 rounded-b-2xl">
          <button
            type="button"
            onClick={() => navigate('/clients')}
            className="flex-1 px-6 py-3 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors"
          >
            Cancelar
          </button>
          <button
            type="submit"
            onClick={handleSubmit}
            disabled={loading}
            className="flex-1 px-6 py-3 rounded-lg text-white font-medium transition-colors disabled:opacity-50"
            style={{ backgroundColor: '#7C3AED' }}
          >
            {loading ? 'Salvando...' : 'Atualizar Cliente'}
          </button>
        </div>
      </div>
    </div>
    </>
  );
}