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

interface ServerFormData {
  name: string;
  contact_name: string;
  contact_whatsapp: string;
  panel_url: string;
  panel_username: string;
  panel_password: string;
  active: boolean;
}

export function ServerEditPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [loadingData, setLoadingData] = useState(true);
  const [formData, setFormData] = useState<ServerFormData>({
    name: '',
    contact_name: '',
    contact_whatsapp: '',
    panel_url: '',
    panel_username: '',
    panel_password: '',
    active: true,
  });

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

  const fetchServer = async () => {
    try {
      setLoadingData(true);
      const { data } = await api.get(`/servers/${id}`);
      const server = data.server;
      setFormData({
        name: server.name,
        contact_name: server.contact_name || '',
        contact_whatsapp: server.contact_whatsapp || '',
        panel_url: server.panel_url || '',
        panel_username: server.panel_username || '',
        panel_password: server.panel_password || '',
        active: server.active,
      });
    } catch (error) {
      console.error('Failed to fetch server:', error);
      alert('Erro ao carregar servidor');
      navigate('/servers');
    } finally {
      setLoadingData(false);
    }
  };

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

    try {
      const payload: Record<string, unknown> = {
        name: formData.name,
        contact_name: formData.contact_name,
        contact_whatsapp: formData.contact_whatsapp,
        panel_url: formData.panel_url,
        panel_username: formData.panel_username,
        panel_password: formData.panel_password,
        active: formData.active,
      };

      await api.put(`/servers/${id}`, payload);
      navigate('/servers');
    } catch (error: unknown) {
      console.error('Failed to update server:', error);
      const errorMsg = (error as { response?: { data?: { message?: string } } }).response?.data?.message || 'Erro ao atualizar servidor';
      alert(errorMsg);
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value
    }));
  };

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

  if (loadingData) {
    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: '#7C3AED' }}></div>
      </div>
    );
  }

  return (
    <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 Servidor
          </h2>
          <button
            onClick={() => navigate('/servers')}
            className="text-gray-400 hover:text-gray-600 text-2xl"
          >
            ×
          </button>
        </div>

        {/* Content - Scrollable */}
        <div className="overflow-y-auto flex-1 p-6">
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Nome do Servidor */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Nome do Servidor *
              </label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleChange}
                required
                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: Servidor Principal"
              />
            </div>

            {/* Contato do Fornecedor */}
            <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"
                  name="contact_name"
                  value={formData.contact_name}
                  onChange={handleChange}
                  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"
                  name="contact_whatsapp"
                  value={formData.contact_whatsapp}
                  onChange={handleChange}
                  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>

            {/* URL do Painel */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                URL do Painel
              </label>
              <input
                type="url"
                name="panel_url"
                value={formData.panel_url}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                placeholder="https://painel.exemplo.com"
              />
              <p className="mt-1 text-xs text-gray-500">URL onde o cliente pode renovar sua assinatura</p>
            </div>

            {/* Usuário e Senha do Painel */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Usuário do Painel
                </label>
                <input
                  type="text"
                  name="panel_username"
                  value={formData.panel_username}
                  onChange={handleChange}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  placeholder="admin"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Senha do Painel
                </label>
                <input
                  type="text"
                  name="panel_password"
                  value={formData.panel_password}
                  onChange={handleChange}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  placeholder="senha123"
                />
              </div>
            </div>

            {/* Servidor Ativo */}
            <div className="flex items-center">
              <input
                type="checkbox"
                name="active"
                checked={formData.active}
                onChange={handleChange}
                className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
              />
              <label className="ml-2 text-sm font-medium text-gray-700">
                Servidor ativo
              </label>
            </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('/servers')}
            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 ? 'Atualizando...' : 'Atualizar Servidor'}
          </button>
        </div>
      </div>
    </div>
  );
}