"use client";

import { useState, useEffect, useCallback, memo } from "react";
import { useRouter } from "next/navigation";
import { getCurrentUserWithRetry } from "@/lib/appwrite";
import { Models } from "appwrite";
import Header from "@/components/Header";
import TableContainer from "@/components/TableContainer";
import StandardButton from "@/components/StandardButton";
import {
  ArrowPathIcon,
  MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";
import { Pencil, X, Check, Search, TriangleAlert, Trash2 } from "lucide-react";

interface Categoria {
  $id: string;
  nome: string;
  descricao?: string;
  slug?: string;
}

interface Subcategoria {
  $id: string;
  nome: string;
  categoria: string;
  descricao?: string;
  slug?: string;
}

// Componente de formulário de categoria separado para evitar re-renderizações
const CategoriaFormComponent = memo(({ 
  novaCategoria, 
  onCategoriaChange, 
  onSubmit, 
  criandoCategoria 
}: {
  novaCategoria: { nome: string; descricao: string };
  onCategoriaChange: (field: string, value: string) => void;
  onSubmit: (e: React.FormEvent) => void;
  criandoCategoria: boolean;
}) => (
  <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
    <h2 className="text-xl font-semibold text-blue-800 mb-4">
      Criar Nova Categoria
    </h2>

    <form onSubmit={onSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Nome da Categoria *
        </label>
        <input
          key="categoria-nome-input"
          type="text"
          value={novaCategoria.nome}
          onChange={(e) => onCategoriaChange('nome', e.target.value)}
          placeholder="Ex: Medicamentos, Cosméticos, Suplementos"
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          required
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Descrição (opcional)
        </label>
        <textarea
          key="categoria-descricao-input"
          value={novaCategoria.descricao}
          onChange={(e) => onCategoriaChange('descricao', e.target.value)}
          placeholder="Descrição da categoria"
          rows={3}
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>

      <button
        type="submit"
        disabled={criandoCategoria}
        className={`w-full py-2 px-4 rounded-lg font-semibold text-white transition-colors ${
          criandoCategoria
            ? "bg-gray-400 cursor-not-allowed"
            : "bg-blue-600 hover:bg-blue-700"
        }`}
      >
        {criandoCategoria ? "Criando..." : "Criar Categoria"}
      </button>
    </form>
  </div>
));

// Componente de formulário de subcategoria separado para evitar re-renderizações
const SubcategoriaFormComponent = memo(({ 
  novaSubcategoria, 
  categorias,
  onSubcategoriaChange, 
  onSubmit, 
  criandoSubcategoria 
}: {
  novaSubcategoria: { nome: string; categoria: string; descricao: string };
  categorias: Categoria[];
  onSubcategoriaChange: (field: string, value: string) => void;
  onSubmit: (e: React.FormEvent) => void;
  criandoSubcategoria: boolean;
}) => (
  <div className="bg-green-50 border border-green-200 rounded-lg p-6">
    <h2 className="text-xl font-semibold text-green-800 mb-4">
      Criar Nova Subcategoria
    </h2>

    <form onSubmit={onSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Categoria Pai *
        </label>
        <select
          key="subcategoria-categoria-select"
          value={novaSubcategoria.categoria}
          onChange={(e) => onSubcategoriaChange('categoria', e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
          required
        >
          <option value="">Selecione uma categoria</option>
          {categorias.map((categoria) => (
            <option key={categoria.$id} value={categoria.$id}>
              {categoria.nome}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Nome da Subcategoria *
        </label>
        <input
          key="subcategoria-nome-input"
          type="text"
          value={novaSubcategoria.nome}
          onChange={(e) => onSubcategoriaChange('nome', e.target.value)}
          placeholder="Ex: Analgésicos, Antibióticos, Vitaminas"
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
          required
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Descrição (opcional)
        </label>
        <textarea
          key="subcategoria-descricao-input"
          value={novaSubcategoria.descricao}
          onChange={(e) => onSubcategoriaChange('descricao', e.target.value)}
          placeholder="Descrição da subcategoria"
          rows={3}
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
        />
      </div>

      <button
        type="submit"
        disabled={criandoSubcategoria || categorias.length === 0}
        className={`w-full py-2 px-4 rounded-lg font-semibold text-white transition-colors ${
          criandoSubcategoria || categorias.length === 0
            ? "bg-gray-400 cursor-not-allowed"
            : "bg-green-600 hover:bg-green-700"
        }`}
      >
        {criandoSubcategoria
          ? "Criando..."
          : categorias.length === 0
          ? "Crie uma categoria primeiro"
          : "Criar Subcategoria"}
      </button>
    </form>
  </div>
));

export default function CategoriasPage() {
  // Função para apagar categoria
  const apagarCategoria = async (categoriaId: string) => {
    if (!window.confirm("Tem certeza que deseja apagar esta categoria?")) return;
    try {
      const response = await fetch(`/api/categorias/${categoriaId}`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
      });
      const data = await response.json();
      if (data.success || response.ok) {
        mostrarMensagem("Categoria apagada com sucesso!", "sucesso");
        carregarCategorias();
      } else {
        mostrarMensagem("Erro ao apagar categoria: " + (data.error || "Erro desconhecido"), "erro");
      }
    } catch (error) {
      mostrarMensagem("Erro de rede ao apagar categoria", "erro");
    }
  };

  // Função para apagar subcategoria
  const apagarSubcategoria = async (subcategoriaId: string) => {
    if (!window.confirm("Tem certeza que deseja apagar esta subcategoria?")) return;
    try {
      const response = await fetch(`/api/subcategorias/${subcategoriaId}`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
      });
      const data = await response.json();
      if (data.success || response.ok) {
        mostrarMensagem("Subcategoria apagada com sucesso!", "sucesso");
        carregarSubcategorias();
      } else {
        mostrarMensagem("Erro ao apagar subcategoria: " + (data.error || "Erro desconhecido"), "erro");
      }
    } catch (error) {
      mostrarMensagem("Erro de rede ao apagar subcategoria", "erro");
    }
  };
  const router = useRouter();
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(
    null
  );
  const [checkingAuth, setCheckingAuth] = useState(true);
  const [activeTab, setActiveTab] = useState<"lista" | "cadastro">("lista");

  const [categorias, setCategorias] = useState<Categoria[]>([]);
  const [subcategorias, setSubcategorias] = useState<Subcategoria[]>([]);
  const [carregandoCategorias, setCarregandoCategorias] = useState(true);
  const [carregandoSubcategorias, setCarregandoSubcategorias] = useState(true);

  // Estados para formulários
  const [novaCategoria, setNovaCategoria] = useState({
    nome: "",
    descricao: "",
  });
  const [novaSubcategoria, setNovaSubcategoria] = useState({
    nome: "",
    categoria: "",
    descricao: "",
  });
  const [criandoCategoria, setCriandoCategoria] = useState(false);
  const [criandoSubcategoria, setCriandoSubcategoria] = useState(false);

  // Estados para modal de edição
  const [modalEdicaoAberto, setModalEdicaoAberto] = useState(false);
  const [categoriaEditando, setCategoriaEditando] = useState<Categoria | null>(
    null
  );
  const [dadosEdicao, setDadosEdicao] = useState({ nome: "", descricao: "" });
  const [salvandoEdicao, setSalvandoEdicao] = useState(false);

  // Estados para modal de edição de subcategorias
  const [modalEdicaoSubcategoriaAberto, setModalEdicaoSubcategoriaAberto] =
    useState(false);
  const [subcategoriaEditando, setSubcategoriaEditando] =
    useState<Subcategoria | null>(null);
  const [dadosEdicaoSubcategoria, setDadosEdicaoSubcategoria] = useState({
    nome: "",
    categoria: "",
    descricao: "",
  });
  const [salvandoEdicaoSubcategoria, setSalvandoEdicaoSubcategoria] =
    useState(false);

  // Estado para empresa do usuário
  const [empresaUsuario, setEmpresaUsuario] = useState<string | null>(null);

  // Estados para mensagens
  const [mensagem, setMensagem] = useState("");
  const [tipoMensagem, setTipoMensagem] = useState<"sucesso" | "erro">(
    "sucesso"
  );

  // Verificação de autenticação
  useEffect(() => {
    const checkAuth = async () => {
      try {
        const currentUser = await getCurrentUserWithRetry();
        if (!currentUser) {
          router.push("/");
          return;
        }
        setUser(currentUser);

        // Buscar empresa do usuário
        await buscarEmpresaUsuario(currentUser);

        carregarCategorias();
        carregarSubcategorias();
      } catch (error) {
        console.error("Erro ao verificar autenticação:", error);
        router.push("/");
      } finally {
        setCheckingAuth(false);
      }
    };

    checkAuth();
  }, [router]);

  // Recarregar dados quando a empresa for definida
  useEffect(() => {
    if (empresaUsuario) {
      carregarCategorias();
      carregarSubcategorias();
    }
  }, [empresaUsuario]);

  // Carregar categorias
  const carregarCategorias = async () => {
    try {
      const url = empresaUsuario
        ? `/api/categorias?empresa=${empresaUsuario}`
        : "/api/categorias";

      const response = await fetch(url);
      const data = await response.json();

      if (data.success && data.documents) {
        // Filtrar categorias por empresa se necessário
        let categoriasFiltradas = data.documents;

        if (empresaUsuario) {
          categoriasFiltradas = data.documents.filter(
            (cat: any) => cat.empresa === empresaUsuario || !cat.empresa // Categorias sem empresa são globais
          );
        }

        setCategorias(categoriasFiltradas);
        console.log(
          `[OK] Carregadas ${categoriasFiltradas.length} categorias da empresa`
        );
        // [Search] Debug categorias:
        console.log("[Search] Debug categorias:", categoriasFiltradas[0]);
      } else {
        setCategorias([]);
        mostrarMensagem(
          "Erro ao carregar categorias: " + (data.error || "Erro desconhecido"),
          "erro"
        );
      }
    } catch (error) {
  console.error("[X] Erro ao carregar categorias:", error);
      mostrarMensagem("Erro de rede ao carregar categorias", "erro");
      setCategorias([]);
    } finally {
      setCarregandoCategorias(false);
    }
  };

  // Carregar subcategorias
  const carregarSubcategorias = async () => {
    try {
      const url = empresaUsuario
        ? `/api/subcategorias?empresa=${empresaUsuario}`
        : "/api/subcategorias";

      const response = await fetch(url);
      const data = await response.json();

      if (data.sucesso && data.subcategorias) {
        // Filtrar subcategorias por empresa se necessário
        let subcategoriasFiltradas = data.subcategorias;

        if (empresaUsuario) {
          subcategoriasFiltradas = data.subcategorias.filter(
            (sub: any) => sub.empresa === empresaUsuario || !sub.empresa // Subcategorias sem empresa são globais
          );
        }

        setSubcategorias(subcategoriasFiltradas);
        console.log(
          `[OK] Carregadas ${subcategoriasFiltradas.length} subcategorias da empresa`
        );
        // [Search] Debug subcategorias:
        console.log("[Search] Debug subcategorias:", subcategoriasFiltradas[0]);
      } else {
        setSubcategorias([]);
        mostrarMensagem(
          "Erro ao carregar subcategorias: " +
            (data.erro || data.error || "Erro desconhecido"),
          "erro"
        );
      }
    } catch (error) {
  console.error("[X] Erro ao carregar subcategorias:", error);
      mostrarMensagem("Erro de rede ao carregar subcategorias", "erro");
      setSubcategorias([]);
    } finally {
      setCarregandoSubcategorias(false);
    }
  };

  const mostrarMensagem = (msg: string, tipo: "sucesso" | "erro") => {
    setMensagem(msg);
    setTipoMensagem(tipo);
    setTimeout(() => setMensagem(""), 5000);
  };

  // Buscar empresa do usuário logado
  const buscarEmpresaUsuario = async (
    currentUser: Models.User<Models.Preferences>
  ) => {
    try {
      const databaseId = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
      const collectionId =
        process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_USUARIOS_ID!;

      const response = await fetch(`/api/usuarios?authId=${currentUser.$id}`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      });

      const data = await response.json();

      if (data.success && data.documents && data.documents.length > 0) {
        const userDoc = data.documents[0];
        const empresasArray = userDoc.empresas_array;

        if (empresasArray && empresasArray.length > 0) {
          setEmpresaUsuario(empresasArray[0]); // Primeira empresa do usuário
          console.log("[OK] Empresa do usuário:", empresasArray[0]);
        } else {
          console.log("[Alerta] Usuário sem empresa associada");
        }
      }
    } catch (error) {
  console.error("[X] Erro ao buscar empresa do usuário:", error);
    }
  };

  // Criar categoria
  const criarCategoria = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!novaCategoria.nome.trim()) {
      mostrarMensagem("Nome da categoria é obrigatório", "erro");
      return;
    }

    setCriandoCategoria(true);

    try {
      const dadosCategoria = {
        nome: novaCategoria.nome.trim(),
        descricao: novaCategoria.descricao.trim(),
        slug: novaCategoria.nome.toLowerCase().replace(/\s+/g, "-"),
        // Remover temporariamente o campo empresa para testar
        // empresa: empresaUsuario, // Associar à empresa do usuário
      };

      console.log("📤 [Frontend] Enviando dados para API:", dadosCategoria);

      const response = await fetch("/api/categorias", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(dadosCategoria),
      });

      const data = await response.json();
      console.log("📥 [Frontend] Resposta da API:", data);

      if (data.success || response.ok) {
        mostrarMensagem(
          `Categoria "${dadosCategoria.nome}" criada com sucesso no banco de dados!`,
          "sucesso"
        );
        setNovaCategoria({ nome: "", descricao: "" });
        carregarCategorias(); // Recarregar lista do banco
  console.log("[OK] Nova categoria salva no banco:", data);
      } else {
        const errorMessage = data.details 
          ? `${data.error}: ${JSON.stringify(data.details)}` 
          : (data.error || data.erro || "Erro desconhecido");
        
  console.error("[X] [Frontend] Erro detalhado:", {
          response,
          data,
          dadosEnviados: dadosCategoria
        });
        
        mostrarMensagem(
          "Erro: " + errorMessage,
          "erro"
        );
      }
    } catch (error) {
  console.error("[X] Erro ao criar categoria:", error);
      mostrarMensagem("Erro de rede ao criar categoria", "erro");
    } finally {
      setCriandoCategoria(false);
    }
  };

  // Criar subcategoria
  const criarSubcategoria = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!novaSubcategoria.nome.trim()) {
      mostrarMensagem("Nome da subcategoria é obrigatório", "erro");
      return;
    }

    if (!novaSubcategoria.categoria) {
      mostrarMensagem("Categoria pai é obrigatória", "erro");
      return;
    }

    setCriandoSubcategoria(true);

    try {
      const dadosSubcategoria = {
        nome: novaSubcategoria.nome.trim(),
        categoria: novaSubcategoria.categoria,
        descricao: novaSubcategoria.descricao.trim(),
        slug: novaSubcategoria.nome.toLowerCase().replace(/\s+/g, "-"),
        // Remover temporariamente o campo empresa para testar
        // empresa: empresaUsuario, // Associar à empresa do usuário
      };

      console.log("📤 [Frontend] Enviando dados de subcategoria para API:", dadosSubcategoria);

      const response = await fetch("/api/subcategorias", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(dadosSubcategoria),
      });

      const data = await response.json();
      console.log("📥 [Frontend] Resposta da API de subcategorias:", data);

      if (data.sucesso || data.success || response.ok) {
        mostrarMensagem(
          `Subcategoria "${dadosSubcategoria.nome}" criada com sucesso no banco de dados!`,
          "sucesso"
        );
        setNovaSubcategoria({ nome: "", categoria: "", descricao: "" });
        carregarSubcategorias(); // Recarregar lista do banco
  console.log("[OK] Nova subcategoria salva no banco:", data);
      } else {
        const errorMessage = data.details 
          ? `${data.erro || data.error}: ${JSON.stringify(data.details)}` 
          : (data.erro || data.error || "Erro desconhecido");
        
  console.error("[X] [Frontend] Erro detalhado na criação de subcategoria:", {
          response,
          data,
          dadosEnviados: dadosSubcategoria
        });
        
        mostrarMensagem(
          "Erro: " + errorMessage,
          "erro"
        );
      }
    } catch (error) {
  console.error("[X] Erro ao criar subcategoria:", error);
      mostrarMensagem("Erro de rede ao criar subcategoria", "erro");
    } finally {
      setCriandoSubcategoria(false);
    }
  };

  // Abrir modal de edição

  // Abrir modal de edição
  const abrirModalEdicao = (categoria: Categoria) => {
    setCategoriaEditando(categoria);
    setDadosEdicao({
      nome: categoria.nome,
      descricao: categoria.descricao || "",
    });
    setModalEdicaoAberto(true);
  };

  // Fechar modal de edição
  const fecharModalEdicao = () => {
    setModalEdicaoAberto(false);
    setCategoriaEditando(null);
    setDadosEdicao({ nome: "", descricao: "" });
  };

  // Salvar edição de categoria
  const salvarEdicaoCategoria = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!dadosEdicao.nome.trim()) {
      mostrarMensagem("Nome da categoria é obrigatório", "erro");
      return;
    }

    if (!categoriaEditando) {
      mostrarMensagem("Categoria não selecionada", "erro");
      return;
    }

    setSalvandoEdicao(true);

    try {
      const dadosAtualizacao = {
        nome: dadosEdicao.nome.trim(),
        descricao: dadosEdicao.descricao.trim(),
        slug: dadosEdicao.nome.toLowerCase().replace(/\s+/g, "-"),
        empresa: empresaUsuario, // Garantir que pertence à empresa
      };

      const response = await fetch(`/api/categorias/${categoriaEditando.$id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(dadosAtualizacao),
      });

      const data = await response.json();

      if (data.success || response.ok) {
        mostrarMensagem(
          `Categoria "${dadosAtualizacao.nome}" atualizada com sucesso no banco de dados!`,
          "sucesso"
        );
        fecharModalEdicao();
        carregarCategorias(); // Recarregar lista do banco
  console.log("[OK] Categoria atualizada no banco:", data);
      } else {
        mostrarMensagem(
          "Erro: " + (data.error || data.erro || "Erro desconhecido"),
          "erro"
        );
      }
    } catch (error) {
  console.error("[X] Erro ao atualizar categoria:", error);
      mostrarMensagem("Erro de rede ao atualizar categoria", "erro");
    } finally {
      setSalvandoEdicao(false);
    }
  };

  // Abrir modal de edição de subcategoria
  const abrirModalEdicaoSubcategoria = (subcategoria: Subcategoria) => {
    setSubcategoriaEditando(subcategoria);
    setDadosEdicaoSubcategoria({
      nome: subcategoria.nome,
      categoria: subcategoria.categoria,
      descricao: subcategoria.descricao || "",
    });
    setModalEdicaoSubcategoriaAberto(true);
  };

  // Fechar modal de edição de subcategoria
  const fecharModalEdicaoSubcategoria = () => {
    setModalEdicaoSubcategoriaAberto(false);
    setSubcategoriaEditando(null);
    setDadosEdicaoSubcategoria({ nome: "", categoria: "", descricao: "" });
  };

  // Salvar edição de subcategoria
  const salvarEdicaoSubcategoria = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!dadosEdicaoSubcategoria.nome.trim()) {
      mostrarMensagem("Nome da subcategoria é obrigatório", "erro");
      return;
    }

    if (!dadosEdicaoSubcategoria.categoria) {
      mostrarMensagem("Categoria pai é obrigatória", "erro");
      return;
    }

    if (!subcategoriaEditando) {
      mostrarMensagem("Subcategoria não selecionada", "erro");
      return;
    }

    setSalvandoEdicaoSubcategoria(true);

    try {
      const dadosAtualizacao = {
        nome: dadosEdicaoSubcategoria.nome.trim(),
        categoria: dadosEdicaoSubcategoria.categoria,
        descricao: dadosEdicaoSubcategoria.descricao.trim(),
        slug: dadosEdicaoSubcategoria.nome.toLowerCase().replace(/\s+/g, "-"),
        // Remover temporariamente o campo empresa para testar
        // empresa: empresaUsuario, // Garantir que pertence à empresa
      };

      console.log("📤 [Frontend] Enviando dados de atualização de subcategoria:", dadosAtualizacao);

      const response = await fetch(
        `/api/subcategorias/${subcategoriaEditando.$id}`,
        {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(dadosAtualizacao),
        }
      );

      const data = await response.json();
      console.log("📥 [Frontend] Resposta da API de atualização de subcategoria:", data);

      if (data.success || data.sucesso || response.ok) {
        mostrarMensagem(
          `Subcategoria "${dadosAtualizacao.nome}" atualizada com sucesso no banco de dados!`,
          "sucesso"
        );
        fecharModalEdicaoSubcategoria();
        carregarSubcategorias(); // Recarregar lista do banco
  console.log("[OK] Subcategoria atualizada no banco:", data);
      } else {
        const errorMessage = data.details 
          ? `${data.error || data.erro}: ${JSON.stringify(data.details)}` 
          : (data.error || data.erro || "Erro desconhecido");
        
  console.error("[X] [Frontend] Erro detalhado na atualização de subcategoria:", {
          response,
          data,
          dadosEnviados: dadosAtualizacao
        });
        
        mostrarMensagem(
          "Erro: " + errorMessage,
          "erro"
        );
      }
    } catch (error) {
  console.error("[X] Erro ao atualizar subcategoria:", error);
      mostrarMensagem("Erro de rede ao atualizar subcategoria", "erro");
    } finally {
      setSalvandoEdicaoSubcategoria(false);
    }
  };

  // Buscar nome da categoria por ID
  const getNomeCategoria = (categoriaId: string) => {
    if (!categoriaId || typeof categoriaId !== "string") {
      return "Categoria não encontrada";
    }

    const categoria = categorias.find((cat) => cat.$id === categoriaId);
    return categoria?.nome
      ? String(categoria.nome)
      : "Categoria não encontrada";
  };

  // Função para lidar com mudanças no input de categoria
  const handleNovaCategoriaChange = useCallback((field: string, value: string) => {
    setNovaCategoria(prev => ({
      ...prev,
      [field]: value
    }));
  }, []);

  // Função para lidar com mudanças no input de subcategoria
  const handleNovaSubcategoriaChange = useCallback((field: string, value: string) => {
    setNovaSubcategoria(prev => ({
      ...prev,
      [field]: value
    }));
  }, []);

  // Componente de lista de categorias
  const CategoriasList = ({ apagarCategoria, apagarSubcategoria }: { apagarCategoria: (id: string) => void, apagarSubcategoria: (id: string) => void }) => (
    <div className="bg-white rounded-lg shadow-sm p-6">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* LISTA DE CATEGORIAS */}
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-semibold text-gray-800">
              Categorias da Empresa ({categorias.length})
            </h3>
          </div>

          {carregandoCategorias ? (
            <div className="text-center text-black py-4">Carregando categorias...</div>
          ) : categorias.length === 0 ? (
            <div className="text-center py-4 text-gray-500">
              {empresaUsuario
                ? "Nenhuma categoria encontrada para esta empresa"
                : "Nenhuma categoria encontrada"}
            </div>
          ) : (
            <div className="space-y-2 max-h-64 overflow-y-auto">
              {categorias.map((categoria) => {
                // Verificação de segurança para evitar renderização de objetos
                if (!categoria || typeof categoria !== "object") {
                  console.error("[X] Categoria inválida:", categoria);
                  return null;
                }

                return (
                  <div
                    key={categoria.$id || Math.random()}
                    className="bg-white rounded-lg p-3 border"
                  >
                    <div className="flex justify-between items-start">
                      <div className="flex-1">
                        <div className="font-medium text-gray-800">
                          {String(categoria.nome || "Nome não disponível")}
                        </div>
                        {categoria.descricao && (
                          <div className="text-sm text-gray-600 mt-1">
                            {String(categoria.descricao)}
                          </div>
                        )}
                        {categoria.slug && (
                          <div className="text-xs text-blue-500 mt-1">
                            Slug: {String(categoria.slug)}
                          </div>
                        )}
                        <div className="text-xs text-gray-400 mt-1">
                          ID: {String(categoria.$id || "ID não disponível")}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <button
                          onClick={() => abrirModalEdicao(categoria)}
                          className="px-3 py-1 bg-green-500 hover:bg-green-600 text-white text-xs rounded-lg transition-colors flex items-center gap-2"
                          title="Editar categoria"
                        >
                          <Pencil className="w-4 h-4" />
                          Editar
                        </button>
                        <button
                          onClick={() => apagarCategoria(categoria.$id)}
                          className="px-3 py-1 bg-red-500 hover:bg-red-600 text-white text-xs rounded-lg transition-colors flex items-center gap-2"
                          title="Apagar categoria"
                        >
                          <Trash2 className="w-4 h-4" />
                          Apagar
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* LISTA DE SUBCATEGORIAS */}
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-semibold text-gray-800">
               Subcategorias da Empresa ({subcategorias.length})
            </h3>
          </div>

          {carregandoSubcategorias ? (
            <div className="text-center py-4">
              Carregando subcategorias...
            </div>
          ) : subcategorias.length === 0 ? (
            <div className="text-center py-4 text-gray-500">
              {empresaUsuario
                ? "Nenhuma subcategoria encontrada para esta empresa"
                : "Nenhuma subcategoria encontrada"}
            </div>
          ) : (
            <div className="space-y-2 max-h-64 overflow-y-auto">
              {subcategorias.map((subcategoria) => {
                // Verificação de segurança para evitar renderização de objetos
                if (!subcategoria || typeof subcategoria !== "object") {
                  console.error("[X] Subcategoria inválida:", subcategoria);
                  return null;
                }

                return (
                  <div
                    key={subcategoria.$id || Math.random()}
                    className="bg-white rounded-lg p-3 border"
                  >
                    <div className="flex justify-between items-start">
                      <div className="flex-1">
                        <div className="font-medium text-gray-800">
                          {String(subcategoria.nome || "Nome não disponível")}
                        </div>
                        <div className="text-sm text-blue-600">
                          {" "}
                          {String(
                            getNomeCategoria(subcategoria.categoria) ||
                              "Categoria não encontrada"
                          )}
                        </div>
                        {subcategoria.descricao && (
                          <div className="text-sm text-gray-600 mt-1">
                            {String(subcategoria.descricao)}
                          </div>
                        )}
                        {subcategoria.slug && (
                          <div className="text-xs text-green-500 mt-1">
                            Slug: {String(subcategoria.slug)}
                          </div>
                        )}
                        <div className="text-xs text-gray-400 mt-1">
                          ID: {String(subcategoria.$id || "ID não disponível")}{" "}
                          | Categoria ID:{" "}
                          {String(subcategoria.categoria || "N/A")}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <button
                          onClick={() => abrirModalEdicaoSubcategoria(subcategoria)}
                          className="px-3 py-1 bg-green-500 hover:bg-green-600 text-white text-xs rounded-lg transition-colors flex items-center gap-2"
                          title="Editar subcategoria"
                        >
                          <Pencil className="w-4 h-4" />
                          Editar
                        </button>
                        <button
                          onClick={() => apagarSubcategoria(subcategoria.$id)}
                          className="px-3 py-1 bg-red-500 hover:bg-red-600 text-white text-xs rounded-lg transition-colors flex items-center gap-2"
                          title="Apagar subcategoria"
                        >
                          <Trash2 className="w-4 h-4" />
                          Apagar
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  );

  // Botões do header
  const headerButtons = (
    <>
      <StandardButton onClick={() => carregarCategorias()} variant="secondary">
        <ArrowPathIcon className="w-4 h-4" />
        Atualizar
      </StandardButton>
    </>
  );

  // Tela de carregamento durante verificação de autenticação
  if (checkingAuth) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Verificando autenticação...</p>
        </div>
      </div>
    );
  }

  // Tela de carregamento se usuário não estiver definido
  if (!user) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header
        user={user}
        title="Gestão de Categorias"
        subtitle="Gerencie as categorias da plataforma SaveInMed"
      />

      <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* Mensagem de Feedback */}
        {mensagem && (
          <div
            className={`mb-6 p-4 rounded-lg ${
              tipoMensagem === "sucesso"
                ? "bg-green-50 border border-green-200 text-green-800"
                : "bg-red-50 border border-red-200 text-red-800"
            }`}
          >
            {tipoMensagem === "sucesso" ? <Check className="inline w-5 h-5 mr-1 text-green-600" /> : <X className="inline w-5 h-5 mr-1 text-red-600" />} {mensagem}
          </div>
        )}

        {/* Navegação por Tabs */}
        <div className="mb-6">
          <nav className="flex space-x-8 bg-white p-4 rounded-lg shadow-sm">
            <button
              onClick={() => setActiveTab("lista")}
              className={`py-2 px-4 border-b-2 font-medium text-sm transition-colors cursor-pointer rounded-t-md ${
                activeTab === "lista"
                  ? "border-indigo-500 text-indigo-600 bg-indigo-50"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 hover:bg-gray-50"
              }`}
            >
              Listar Categorias
            </button>
            <button
              onClick={() => setActiveTab("cadastro")}
              className={`py-2 px-4 border-b-2 font-medium text-sm transition-colors cursor-pointer rounded-t-md ${
                activeTab === "cadastro"
                  ? "border-indigo-500 text-indigo-600 bg-indigo-50"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 hover:bg-gray-50"
              }`}
            >
              Cadastrar Categoria
            </button>
          </nav>
        </div>

        {/* Conteúdo das Tabs */}
        {activeTab === "lista" && (
          <TableContainer title="Lista de Categorias" buttons={headerButtons}>
            <CategoriasList apagarCategoria={apagarCategoria} apagarSubcategoria={apagarSubcategoria} />
          </TableContainer>
        )}

        {activeTab === "cadastro" && (
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* CRIAR CATEGORIA */}
              <div className="space-y-6">
                <CategoriaFormComponent
                  novaCategoria={novaCategoria}
                  onCategoriaChange={handleNovaCategoriaChange}
                  onSubmit={criarCategoria}
                  criandoCategoria={criandoCategoria}
                />
              </div>

              {/* CRIAR SUBCATEGORIA */}
              <div className="space-y-6">
                <SubcategoriaFormComponent
                  novaSubcategoria={novaSubcategoria}
                  categorias={categorias}
                  onSubcategoriaChange={handleNovaSubcategoriaChange}
                  onSubmit={criarSubcategoria}
                  criandoSubcategoria={criandoSubcategoria}
                />
              </div>
            </div>

            <div className="mt-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
              <h3 className="font-semibold text-yellow-800 mb-2">
                Próximos Passos:
              </h3>
              <ol className="text-yellow-700 text-sm space-y-1">
                <li>1. Crie categorias principais (ex: Medicamentos, Cosméticos)</li>
                <li>2. Crie subcategorias específicas para cada categoria</li>
                <li>
                  3. Vá em{" "}
                  <a href="/produtos" className="underline font-medium">
                    Produtos
                  </a>{" "}
                  para relacionar produtos com as categorias
                </li>
                <li>
                  4. Use a página de{" "}
                  <a
                    href="/dashboard/cadastrar-medicamentos"
                    className="underline font-medium"
                  >
                    Cadastrar Medicamentos
                  </a>{" "}
                  para novos produtos
                </li>
              </ol>
            </div>
          </div>
        )}
      </main>

      {/* MODAL DE EDIÇÃO DE CATEGORIA */}
      {modalEdicaoAberto && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          {/* Backdrop com blur */}
          <div
            className="absolute inset-0 bg-black/30 backdrop-blur-sm"
            onClick={fecharModalEdicao}
          ></div>

          {/* Modal */}
          <div className="relative bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4 z-10">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-semibold text-gray-800">
             <span className="inline-flex items-center gap-2"><Pencil className="w-5 h-5" /> Editar Categoria</span>
              </h2>
              <button
                onClick={fecharModalEdicao}
                className="text-gray-400 hover:text-gray-600 text-2xl"
              >
                ×
              </button>
            </div>

            <form onSubmit={salvarEdicaoCategoria} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Nome da Categoria *
                </label>
                <input
                  type="text"
                  value={dadosEdicao.nome}
                  onChange={(e) =>
                    setDadosEdicao({ ...dadosEdicao, nome: e.target.value })
                  }
                  placeholder="Nome da categoria"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  required
                  autoFocus
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Descrição (opcional)
                </label>
                <textarea
                  value={dadosEdicao.descricao}
                  onChange={(e) =>
                    setDadosEdicao({
                      ...dadosEdicao,
                      descricao: e.target.value,
                    })
                  }
                  placeholder="Descrição da categoria"
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={fecharModalEdicao}
                  className="flex-1 py-2 px-4 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-colors"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  disabled={salvandoEdicao}
                  className={`flex-1 py-2 px-4 rounded-lg font-semibold text-white transition-colors ${
                    salvandoEdicao
                      ? "bg-gray-400 cursor-not-allowed"
                      : "bg-blue-600 hover:bg-blue-700"
                  }`}
                >
                  {salvandoEdicao ? "Salvando..." : "Salvar"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* MODAL DE EDIÇÃO DE SUBCATEGORIA */}
      {modalEdicaoSubcategoriaAberto && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          {/* Backdrop com blur */}
          <div
            className="absolute inset-0 bg-black/30 backdrop-blur-sm"
            onClick={fecharModalEdicaoSubcategoria}
          ></div>

          {/* Modal */}
          <div className="relative bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4 z-10">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-semibold text-gray-800">
             <span className="inline-flex items-center gap-2"><Pencil className="w-5 h-5" /> Editar Subcategoria</span>
              </h2>
              <button
                onClick={fecharModalEdicaoSubcategoria}
                className="text-gray-400 hover:text-gray-600 text-2xl"
              >
                ×
              </button>
            </div>

            <form onSubmit={salvarEdicaoSubcategoria} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Categoria Pai *
                </label>
                <select
                  value={dadosEdicaoSubcategoria.categoria}
                  onChange={(e) =>
                    setDadosEdicaoSubcategoria({
                      ...dadosEdicaoSubcategoria,
                      categoria: e.target.value,
                    })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                  required
                >
                  <option value="">Selecione uma categoria</option>
                  {categorias.map((categoria) => (
                    <option key={categoria.$id} value={categoria.$id}>
                      {categoria.nome}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Nome da Subcategoria *
                </label>
                <input
                  type="text"
                  value={dadosEdicaoSubcategoria.nome}
                  onChange={(e) =>
                    setDadosEdicaoSubcategoria({
                      ...dadosEdicaoSubcategoria,
                      nome: e.target.value,
                    })
                  }
                  placeholder="Nome da subcategoria"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Descrição (opcional)
                </label>
                <textarea
                  value={dadosEdicaoSubcategoria.descricao}
                  onChange={(e) =>
                    setDadosEdicaoSubcategoria({
                      ...dadosEdicaoSubcategoria,
                      descricao: e.target.value,
                    })
                  }
                  placeholder="Descrição da subcategoria"
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={fecharModalEdicaoSubcategoria}
                  className="flex-1 py-2 px-4 border border-gray-300 rounded-lg font-semibold text-gray-700 hover:bg-gray-50 transition-colors"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  disabled={salvandoEdicaoSubcategoria}
                  className={`flex-1 py-2 px-4 rounded-lg font-semibold text-white transition-colors ${
                    salvandoEdicaoSubcategoria
                      ? "bg-gray-400 cursor-not-allowed"
                      : "bg-green-600 hover:bg-green-700"
                  }`}
                >
                  {salvandoEdicaoSubcategoria ? "Salvando..." : "Salvar"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}
