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';
import { PurchaseCreditsModal } from '../components/PurchaseCreditsModal';

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

export function ClientFormPage() {
  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 [showPurchaseModal, setShowPurchaseModal] = useState(false);
  const [purchaseServerId, setPurchaseServerId] = useState<number | null>(null);
  const [purchaseServerName, setPurchaseServerName] = useState('');

  // Calcular data 1 mês à frente
  const getDefaultExpiryDate = () => {
    const date = new Date();
    date.setMonth(date.getMonth() + 1);
    return date.toISOString().split('T')[0];
  };

  const [formData, setFormData] = useState({
    name: '',
    code: '',
    username: '',
    password: '',
    whatsapp: '',
    server_id: '',
    expires_at: getDefaultExpiryDate(),
    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 {
      const { data } = await api.get(`/clients/${id}`);
      setFormData({
        name: data.name,
        code: data.code || '',
        username: data.username || '',
        password: '',
        whatsapp: data.whatsapp || '',
        server_id: data.server_id,
        expires_at: data.expires_at || '',
        valor_mensalidade: data.valor_mensalidade,
        screens: String(data.screens || 1),
      });
    } catch (error) {
      console.error('Error fetching client:', error);
    }
  };

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

    try {
      const payload = {
        ...formData,
        valor_mensalidade: parseFloat(formData.valor_mensalidade) || 0,
        screens: parseInt(formData.screens) || 1,
      };

      if (id) {
        await api.put(`/clients/${id}`, payload);
      } else {
        await api.post('/clients', payload);
      }

      toast.success(id ? 'Cliente atualizado com sucesso!' : 'Cliente criado com sucesso!');
      navigate('/clients');
    } catch (error: any) {
      console.error('Error saving client:', error);

      // Tratamento específico para erro de créditos insuficientes
      if (error.response?.status === 400 && error.response?.data?.error === 'insufficient_credits') {
        const data = error.response.data;
        setPurchaseServerId(data.server_id);
        setPurchaseServerName(data.server_name || servers.find(s => s.id === data.server_id)?.name || '');
        setShowPurchaseModal(true);
        toast.error(data.message || 'Créditos insuficientes no servidor. Adicione créditos para continuar.');
        return;
      }

      // Tratamento específico para erro de limite
      if (error.response?.status === 403) {
        const data = error.response.data;
        if (data.needs_plan) {
          toast.error(`${data.message}\n\n💡 Você precisa de um plano ativo para gerenciar clientes.`);
        } else if (data.is_unlimited || data.client_limit === null || data.client_limit === undefined) {
          // Não deve acontecer, mas se acontecer, mostra apenas a mensagem
          toast.error(data.message || 'Erro ao adicionar cliente.');
        } else {
          toast.error(`${data.message}\n\nClientes atuais: ${data.current_clients}/${data.client_limit}\n\n💡 Faça upgrade do seu plano para aumentar o limite.`);
        }
      } else {
        toast.error(error.response?.data?.message || 'Erro ao salvar 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()) {
      toast.warning('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: any) {
      console.error('Error creating server:', error);
      toast.error(error.response?.data?.message || '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-4 md:p-6 border-b border-gray-200 flex-shrink-0">
            <h2 className="text-lg md:text-2xl font-bold text-gray-800">
              {id ? 'Editar Cliente' : 'Novo 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"
                  placeholder="Nome do cliente"
                />
              </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 um servidor</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"
                  placeholder="usuário"
                />
              </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="senha"
                />
              </div>

              {/* WhatsApp */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  WhatsApp
                </label>
                <input
                  type="text"
                  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="Data de 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 */}
              <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"
                  required
                  value={formData.screens}
                  onChange={(e) => setFormData({ ...formData, screens: 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="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 flex-col sm:flex-row gap-3 p-4 md:p-6 border-t border-gray-200 bg-gray-50 rounded-b-2xl flex-shrink-0">
            <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...' : id ? 'Atualizar' : 'Criar Cliente'}
            </button>
          </div>
        </div>
      </div>

      <PurchaseCreditsModal
        isOpen={showPurchaseModal}
        onClose={() => {
          setShowPurchaseModal(false);
          setPurchaseServerId(null);
          setPurchaseServerName('');
        }}
        onSuccess={() => {
          fetchServers();
        }}
        serverId={purchaseServerId}
        serverName={purchaseServerName}
      />
    </>
  );
}