import { Dialog } from "@headlessui/react";
import {
  DocumentIcon,
  PlusIcon,
  TrashIcon,
  EyeIcon,
  CogIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import { useState, useEffect, useCallback } from "react";
import { useParams, useNavigate, Link } from "react-router-dom";
import { toast } from "react-toastify";

import { useAuth } from "../contexts/AuthContext";
import { api } from "../lib/api";

import { DocumentoEditor } from "./DocumentoEditor";
import { DocumentoViewer } from "./DocumentoViewer";

export function DocumentosPage() {
  const [isEditorOpen, setIsEditorOpen] = useState(false);
  const [documentos, setDocumentos] = useState([]);
  const [modelos, setModelos] = useState([]);
  const [tabValue, setTabValue] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const { processoId, atendimentoId } = useParams();
  const navigate = useNavigate();
  const { user, signOut } = useAuth();
  const [documentoVisualizado, setDocumentoVisualizado] = useState(null);
  const [isVisualizadorOpen, setVisualizadorOpen] = useState(false);

  const loadData = useCallback(async () => {
    if (!user) {
      navigate("/login");
      return;
    }

    try {
      setIsLoading(true);
      await Promise.all([loadDocumentos(), loadModelos()]);
    } catch (error) {
      console.error("Erro ao carregar dados:", error);
      if (error?.response?.status === 401) {
        signOut(); // Usar a função do AuthContext
        navigate("/login");
      } else {
        toast.error("Erro ao carregar dados");
      }
    } finally {
      setIsLoading(false);
    }
  }, [user, navigate, signOut]); // Adicionar signOut nas dependências

  useEffect(() => {
    loadData();
  }, [loadData, processoId, atendimentoId]);

  const loadDocumentos = async () => {
    const params = {};
    if (processoId) params.processoId = processoId;
    if (atendimentoId) params.atendimentoId = atendimentoId;

    const response = await api.get("/documentos", { params });
    setDocumentos(response.data);
  };

  const loadModelos = async () => {
    const response = await api.get("/documentos-modelos");
    setModelos(response.data);
  };

  const handleSave = async (data) => {
    try {
      if (processoId) data.processoId = processoId;
      if (atendimentoId) data.atendimentoId = atendimentoId;

      await api.post("/documentos", data);
      toast.success("Documento salvo com sucesso");
      await loadDocumentos();
      setIsEditorOpen(false);
    } catch (error) {
      console.error("Erro ao salvar documento:", error);
      if (error?.response?.status === 401) {
        toast.error("Sessão expirada. Por favor, faça login novamente.");
      } else {
        toast.error("Erro ao salvar documento");
      }
    }
  };

  const handleDeleteDocumento = async (id) => {
    try {
      await api.delete(`/documentos/${id}`);
      toast.success("Documento excluído com sucesso");
      await loadDocumentos();
    } catch (error) {
      console.error("Erro ao excluir documento:", error);
      if (error?.response?.status === 401) {
        toast.error("Sessão expirada. Por favor, faça login novamente.");
      } else {
        toast.error("Erro ao excluir documento");
      }
    }
  };

  const handleVisualizar = async (documento) => {
    try {
      const configRes = await api.get("/documentos/configuracoes");

      setDocumentoVisualizado({
        ...documento,
        escritorio: configRes.data,
      });
      setVisualizadorOpen(true);
    } catch (error) {
      console.error("Erro ao visualizar documento:", error);
      toast.error("Erro ao visualizar documento");
    }
  };

  if (isLoading) {
    return <div>Carregando...</div>;
  }

  return (
    <div className="p-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Documentos</h1>
        <div className="flex gap-2">
          <button
            onClick={() => setIsEditorOpen(true)}
            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
          >
            <PlusIcon className="w-5 h-5 mr-2" />
            Novo Documento
          </button>
          {user?.perfil === "ADVOGADO_ADMIN" && (
            <>
              <button
                onClick={() => navigate("/documentos/templates")}
                className="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 transition-colors"
              >
                <DocumentIcon className="w-5 h-5 mr-2" />
                Gerenciar Templates
              </button>
              <button
                onClick={() => navigate("/documentos/configuracoes")}
                className="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 transition-colors"
              >
                <CogIcon className="w-5 h-5 mr-2" />
                Configurar Timbrado
              </button>
            </>
          )}
        </div>
      </div>

      <div className="border-b border-gray-200">
        <nav className="flex -mb-px">
          <button
            onClick={() => setTabValue(0)}
            className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors duration-200 ${
              tabValue === 0
                ? "border-blue-500 text-blue-600"
                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
            }`}
          >
            Documentos
          </button>
          <button
            onClick={() => setTabValue(1)}
            className={`ml-8 px-4 py-2 font-medium text-sm border-b-2 transition-colors duration-200 ${
              tabValue === 1
                ? "border-blue-500 text-blue-600"
                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
            }`}
          >
            Modelos
          </button>
        </nav>
      </div>

      {tabValue === 0 && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {documentos.map((doc) => (
            <div
              key={doc.id}
              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
            >
              <div className="p-4">
                <div className="flex items-center mb-3">
                  <DocumentIcon className="w-6 h-6 text-gray-500 mr-2" />
                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                    {doc.nome}
                  </h3>
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Criado em: {new Date(doc.criadoEm).toLocaleDateString()}
                </p>
                <div className="mt-4 flex gap-2">
                  <button
                    onClick={() => handleVisualizar(doc)}
                    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"
                  >
                    <EyeIcon className="w-4 h-4 mr-1" />
                    Visualizar
                  </button>
                  <button
                    onClick={() => handleDeleteDocumento(doc.id)}
                    className="inline-flex items-center px-3 py-1.5 text-sm text-red-600 dark:text-red-400 border border-red-200 dark:border-red-900 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20"
                  >
                    <TrashIcon className="w-4 h-4 mr-1" />
                    Excluir
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {tabValue === 1 && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {modelos.map((modelo) => (
            <div
              key={modelo.id}
              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
            >
              <div className="p-4">
                <div className="flex items-center mb-3">
                  <DocumentIcon className="w-6 h-6 text-gray-500 mr-2" />
                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                    {modelo.nome}
                  </h3>
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                  {modelo.descricao}
                </p>
                <button className="w-full inline-flex items-center justify-center px-4 py-2 text-sm border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20">
                  Usar Modelo
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      <DocumentoEditor
        isOpen={isEditorOpen}
        onClose={() => setIsEditorOpen(false)}
        onSave={handleSave}
        processoId={processoId}
        atendimentoId={atendimentoId}
      />

      <DocumentoViewer
        documento={documentoVisualizado}
        isOpen={isVisualizadorOpen}
        onClose={() => setVisualizadorOpen(false)}
      />
    </div>
  );
}