import React, { useState, useEffect } from 'react';
import api from '../lib/api';
import { Dialog, DialogFooter, Button } from './ui';

interface WhatsAppIntegration {
  id: number;
  name: string;
  provider: 'evolution' | 'uazapi';
  api_url: string;
  api_key: string;
  max_users: number;
  status: string;
}

interface Props {
  integration: WhatsAppIntegration | null;
  onClose: (success: boolean) => void;
}

const WhatsAppIntegrationModal: React.FC<Props> = ({ integration, onClose }) => {
  const [formData, setFormData] = useState({
    name: '',
    provider: 'evolution' as 'evolution' | 'uazapi',
    api_url: '',
    api_key: '',
    max_users: 10,
  });
  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  useEffect(() => {
    if (integration) {
      setFormData({
        name: integration.name,
        provider: integration.provider,
        api_url: integration.api_url,
        api_key: integration.api_key,
        max_users: integration.max_users,
      });
    }
  }, [integration]);

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

  const validate = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.name.trim()) {
      newErrors.name = 'Nome é obrigatório';
    }

    if (!formData.api_url.trim()) {
      newErrors.api_url = 'URL da API é obrigatória';
    } else if (!formData.api_url.match(/^https?:\/\/.+/)) {
      newErrors.api_url = 'URL inválida';
    }

    if (!formData.api_key.trim()) {
      newErrors.api_key = 'API Key é obrigatória';
    }

    if (formData.max_users < 1) {
      newErrors.max_users = 'Capacidade deve ser pelo menos 1';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

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

    if (!validate()) return;

    setLoading(true);

    try {
      if (integration) {
        await api.put(`/admin/whatsapp/integrations/${integration.id}`, formData);
      } else {
        await api.post('/admin/whatsapp/integrations', formData);
      }
      onClose(true);
    } catch (error: any) {
      const message = error.response?.data?.message || 'Erro ao salvar integração';
      alert(message);
      if (error.response?.data?.errors) {
        setErrors(error.response.data.errors);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <Dialog
      isOpen={true}
      onClose={() => onClose(false)}
      title={integration ? 'Editar Integração' : 'Nova Integração'}
      size="md"
    >
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Nome</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            placeholder="Ex: API Evolution Principal"
          />
          {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name}</p>}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Provedor</label>
          <select
            name="provider"
            value={formData.provider}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            disabled={!!integration} // Não permite mudar provedor ao editar
          >
            <option value="evolution">Evolution API</option>
            <option value="uazapi">Uazapi</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">URL da API</label>
          <input
            type="text"
            name="api_url"
            value={formData.api_url}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            placeholder="https://api.example.com"
          />
          {errors.api_url && <p className="text-red-500 text-xs mt-1">{errors.api_url}</p>}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">API Key</label>
          <input
            type="password"
            name="api_key"
            value={formData.api_key}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            placeholder="Sua API Key"
          />
          {errors.api_key && <p className="text-red-500 text-xs mt-1">{errors.api_key}</p>}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Capacidade Máxima (usuários)
          </label>
          <input
            type="number"
            name="max_users"
            value={formData.max_users}
            onChange={handleChange}
            min="1"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
          />
          {errors.max_users && <p className="text-red-500 text-xs mt-1">{errors.max_users}</p>}
          <p className="text-xs text-gray-500 mt-1">
            Número máximo de usuários que podem conectar nesta instância
          </p>
        </div>

        <DialogFooter>
          <Button
            type="button"
            variant="secondary"
            onClick={() => onClose(false)}
            disabled={loading}
          >
            Cancelar
          </Button>
          <Button
            type="submit"
            variant="primary"
            loading={loading}
          >
            {integration ? 'Atualizar' : 'Criar'}
          </Button>
        </DialogFooter>
      </form>
    </Dialog>
  );
};

export default WhatsAppIntegrationModal;