import { useState, useEffect } from 'react';
import { api } from '../../lib/api';
import { Editor } from '@tinymce/tinymce-react';
import { toast } from 'react-toastify';
import { Dialog } from '@headlessui/react';
import { DocumentIcon, PencilIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
import { DOCUMENT_VARIABLES } from '../../utils/documentVariables';

export function GerenciarTemplates() {
  const [templates, setTemplates] = useState([]);
  const [editingTemplate, setEditingTemplate] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditorModalOpen, setEditorModalOpen] = useState(false);
  const [formData, setFormData] = useState({
    nome: '',
    tipo: 'OUTROS',
    descricao: '',
    conteudo: '',
    variaveis: []
  });

  const loadTemplates = async () => {
    try {
      const response = await api.get('/documentos-modelos');
      setTemplates(response.data);
    } catch (error) {
      toast.error('Erro ao carregar templates');
    }
  };

  useEffect(() => {
    loadTemplates();
  }, []);

  const handleSaveTemplate = async (data) => {
    try {
      if (editingTemplate) {
        await api.put(`/documentos-modelos/${editingTemplate.id}`, data);
        toast.success('Template atualizado com sucesso');
      } else {
        await api.post('/documentos-modelos', data);
        toast.success('Template criado com sucesso');
      }
      loadTemplates();
      setIsModalOpen(false);
    } catch (error) {
      toast.error('Erro ao salvar template');
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // Verifica se está editando ou criando novo
      if (editingTemplate) {
        await api.put(`/documentos-modelos/${editingTemplate.id}`, {
          ...formData,
          id: editingTemplate.id // Garantir que o ID seja enviado
        });
        toast.success('Template atualizado com sucesso');
      } else {
        await api.post('/documentos-modelos', formData);
        toast.success('Template criado com sucesso');
      }
      
      setEditorModalOpen(false);
      setEditingTemplate(null);
      await loadTemplates(); // Recarregar a lista após salvar
    } catch (error) {
      console.error('Erro ao salvar template:', error);
      toast.error('Erro ao salvar template');
    }
  };

  const handleDelete = async (templateId: string) => {
    if (!window.confirm('Tem certeza que deseja excluir este template?')) {
      return;
    }

    try {
      await api.delete(`/documentos-modelos/${templateId}`);
      toast.success('Template excluído com sucesso');
      loadTemplates();
    } catch (error) {
      console.error('Erro ao excluir template:', error);
      toast.error('Erro ao excluir template');
    }
  };

  const insertVariable = (variable: string) => {
    const editor = window.tinymce.activeEditor;
    if (editor) {
      editor.insertContent(variable);
    }
  };

  const handleEdit = (template) => {
    setEditingTemplate(template); // Guardar o template completo
    setFormData({
      ...template,
      id: template.id // Garantir que o ID seja mantido
    });
    setEditorModalOpen(true);
  };

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Gerenciar Templates</h1>
        <button
          onClick={() => {
            setFormData({
              nome: '',
              tipo: 'OUTROS',
              descricao: '',
              conteudo: '',
              variaveis: []
            });
            setEditorModalOpen(true);
          }}
          className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
        >
          <PlusIcon className="w-5 h-5 mr-2" />
          Novo Template
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {templates.map((template) => (
          <div key={template.id} className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div className="flex items-center mb-3">
              <DocumentIcon className="w-6 h-6 text-gray-500 mr-2" />
              <h3 className="font-semibold">{template.nome}</h3>
            </div>
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{template.descricao}</p>
            <div className="flex gap-2">
              <button
                onClick={() => handleEdit(template)}
                className="inline-flex items-center px-3 py-1.5 text-sm text-blue-600 border border-blue-200 rounded-md hover:bg-blue-50"
              >
                <PencilIcon className="w-4 h-4 mr-1" />
                Editar
              </button>
              <button
                onClick={() => handleDelete(template.id)}
                className="inline-flex items-center px-3 py-1.5 text-sm text-red-600 border border-red-200 rounded-md hover:bg-red-50"
              >
                <TrashIcon className="w-4 h-4 mr-1" />
                Excluir
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Modal de Edição */}
      <Dialog open={isEditorModalOpen} onClose={() => setEditorModalOpen(false)} className="relative z-50">
        <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
        <div className="fixed inset-0 flex items-center justify-center p-4 overflow-y-auto">
          <Dialog.Panel className="w-full max-w-4xl bg-white rounded-lg shadow-xl my-4">
            <div className="max-h-[90vh] overflow-y-auto">
              <form onSubmit={handleSubmit} className="p-6">
                <h2 className="text-xl font-bold mb-4">
                  {editingTemplate ? 'Editar Template' : 'Novo Template'}
                </h2>
                
                <div className="space-y-4">
                  <div>
                    <label className="block mb-1">Nome</label>
                    <input
                      type="text"
                      value={formData.nome}
                      onChange={(e) => setFormData({...formData, nome: e.target.value})}
                      className="w-full p-2 border rounded"
                      required
                    />
                  </div>

                  <div>
                    <label className="block mb-1">Tipo</label>
                    <select
                      value={formData.tipo}
                      onChange={(e) => setFormData({...formData, tipo: e.target.value})}
                      className="w-full p-2 border rounded"
                    >
                      <option value="PETICAO">Petição</option>
                      <option value="CONTRATO">Contrato</option>
                      <option value="PROCURACAO">Procuração</option>
                      <option value="DECLARACAO">Declaração</option>
                      <option value="OUTROS">Outros</option>
                    </select>
                  </div>

                  <div>
                    <label className="block mb-1">Descrição</label>
                    <textarea
                      value={formData.descricao}
                      onChange={(e) => setFormData({...formData, descricao: e.target.value})}
                      className="w-full p-2 border rounded"
                      rows={3}
                    />
                  </div>

                  <div className="mb-4">
                    <label className="block mb-1">Variáveis Disponíveis</label>
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 p-2 border rounded bg-gray-50">
                      {Object.entries(DOCUMENT_VARIABLES).map(([category, variables]) => (
                        <div key={category} className="space-y-1">
                          <h4 className="font-bold text-sm text-gray-700">{category}</h4>
                          {Object.entries(variables).map(([name, variable]) => (
                            <button
                              key={name}
                              type="button"
                              onClick={() => insertVariable(variable)}
                              className="text-xs text-blue-600 hover:text-blue-800 block"
                            >
                              {name.replace(/_/g, ' ')}
                            </button>
                          ))}
                        </div>
                      ))}
                    </div>
                  </div>

                  <div>
                    <label className="block mb-1">Conteúdo</label>
                    <Editor
                      apiKey={import.meta.env.VITE_TINYMCE_API_KEY}
                      value={formData.conteudo}
                      onEditorChange={(content) => setFormData({...formData, conteudo: content})}
                      init={{
                        height: 400,
                        menubar: true,
                        plugins: [
                          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                          'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                          'insertdatetime', 'media', 'table', 'help', 'wordcount'
                        ],
                        toolbar: 'variables | undo redo | formatselect | bold italic | alignleft aligncenter alignright',
                        setup: (editor) => {
                          editor.ui.registry.addMenuButton('variables', {
                            text: 'Variáveis',
                            fetch: (callback) => {
                              const items = Object.entries(DOCUMENT_VARIABLES).flatMap(([category, vars]) =>
                                Object.entries(vars).map(([name, value]) => ({
                                  type: 'menuitem',
                                  text: `${category} - ${name.replace(/_/g, ' ')}`,
                                  onAction: () => editor.insertContent(value)
                                }))
                              );
                              callback(items);
                            }
                          });
                        }
                      }}
                    />
                  </div>
                </div>

                <div className="flex justify-end gap-2 mt-6">
                  <button
                    type="button"
                    onClick={() => setEditorModalOpen(false)}
                    className="px-4 py-2 text-gray-600 border rounded-md hover:bg-gray-50"
                  >
                    Cancelar
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
                  >
                    Salvar
                  </button>
                </div>
              </form>
            </div>
          </Dialog.Panel>
        </div>
      </Dialog>
    </div>
  );
}