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

export function ServerFormPage() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    contact_name: '',
    contact_whatsapp: '',
    panel_url: '',
    xtream_url: '',
    panel_username: '',
    panel_password: '',
    active: true,
  });

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

    try {
      await api.post('/servers', {
        name: formData.name,
        contact_name: formData.contact_name,
        contact_whatsapp: formData.contact_whatsapp,
        panel_url: formData.panel_url,
        xtream_url: formData.xtream_url,
        panel_username: formData.panel_username,
        panel_password: formData.panel_password,
        active: formData.active,
      });
      navigate('/servers');
    } catch (error) {
      console.error('Error creating server:', error);
      alert('Erro ao criar servidor. Verifique os dados e tente novamente.');
    } finally {
      setLoading(false);
    }
  };

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

  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">
            Novo 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"
                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="Meu Servidor IPTV"
              />
            </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"
                  value={formData.contact_name}
                  onChange={(e) => setFormData({ ...formData, contact_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 fornecedor"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  WhatsApp do Contato
                </label>
                <input
                  type="tel"
                  value={formData.contact_whatsapp}
                  onChange={(e) => setFormData({ ...formData, contact_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>
            </div>

            {/* URL do Painel */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                URL do Painel
              </label>
              <input
                type="url"
                value={formData.panel_url}
                onChange={(e) => setFormData({ ...formData, panel_url: 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="https://painel.exemplo.com"
              />
              <p className="mt-1 text-xs text-gray-500">URL onde o cliente pode renovar sua assinatura</p>
            </div>

            {/* URL do Xtream */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                URL do Xtream
              </label>
              <input
                type="url"
                value={formData.xtream_url}
                onChange={(e) => setFormData({ ...formData, xtream_url: 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="http://dns.exemplo.com:8080"
              />
              <p className="mt-1 text-xs text-gray-500">DNS/URL usada nos aplicativos (Xtream Codes)</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"
                  value={formData.panel_username}
                  onChange={(e) => setFormData({ ...formData, panel_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="admin"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Senha do Painel
                </label>
                <input
                  type="text"
                  value={formData.panel_password}
                  onChange={(e) => setFormData({ ...formData, panel_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="senha123"
                />
              </div>
            </div>

            {/* Servidor Ativo */}
            <div className="flex items-center">
              <input
                type="checkbox"
                checked={formData.active}
                onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                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 ? 'Criando...' : 'Criar Servidor'}
          </button>
        </div>
      </div>
    </div>
  );
}