"use client";

import { useState, useEffect } from "react";

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

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

export default function GerenciarCategoriasPage() {
  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: "",
    categoriaId: "",
    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 mensagens
  const [mensagem, setMensagem] = useState("");
  const [tipoMensagem, setTipoMensagem] = useState<"sucesso" | "erro">(
    "sucesso"
  );

  // Carregar categorias
  const carregarCategorias = async () => {
    try {
      const response = await fetch("/api/categorias");
      const data = await response.json();

      if (data.sucesso) {
        setCategorias(data.categorias);
      } else {
        mostrarMensagem("Erro ao carregar categorias: " + data.erro, "erro");
      }
    } catch (error) {
      mostrarMensagem("Erro de rede ao carregar categorias", "erro");
    } finally {
      setCarregandoCategorias(false);
    }
  };

  // Carregar subcategorias
  const carregarSubcategorias = async () => {
    try {
      const response = await fetch("/api/subcategorias");
      const data = await response.json();

      if (data.sucesso) {
        setSubcategorias(data.subcategorias);
      } else {
        mostrarMensagem("Erro ao carregar subcategorias: " + data.erro, "erro");
      }
    } catch (error) {
      mostrarMensagem("Erro de rede ao carregar subcategorias", "erro");
    } finally {
      setCarregandoSubcategorias(false);
    }
  };

  // Mostrar mensagem temporária
  const mostrarMensagem = (msg: string, tipo: "sucesso" | "erro") => {
    setMensagem(msg);
    setTipoMensagem(tipo);
    setTimeout(() => setMensagem(""), 5000);
  };

  // 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 response = await fetch("/api/categorias", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(novaCategoria),
      });

      const data = await response.json();

      if (data.sucesso) {
        mostrarMensagem(data.mensagem, "sucesso");
        setNovaCategoria({ nome: "", descricao: "" });
        carregarCategorias(); // Recarregar lista
      } else {
        mostrarMensagem("Erro: " + data.erro, "erro");
      }
    } catch (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.categoriaId) {
      mostrarMensagem("Categoria pai é obrigatória", "erro");
      return;
    }

    setCriandoSubcategoria(true);

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

      const data = await response.json();

      if (data.sucesso) {
        mostrarMensagem(data.mensagem, "sucesso");
        setNovaSubcategoria({ nome: "", categoriaId: "", descricao: "" });
        carregarSubcategorias(); // Recarregar lista
      } else {
        mostrarMensagem("Erro: " + data.erro, "erro");
      }
    } catch (error) {
      mostrarMensagem("Erro de rede ao criar subcategoria", "erro");
    } finally {
      setCriandoSubcategoria(false);
    }
  };

  // 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 response = await fetch(`/api/categorias/${categoriaEditando.$id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(dadosEdicao),
      });

      const data = await response.json();

      if (data.success) {
        mostrarMensagem(
          `Categoria "${dadosEdicao.nome}" atualizada com sucesso!`,
          "sucesso"
        );
        fecharModalEdicao();
        carregarCategorias(); // Recarregar lista
      } else {
        mostrarMensagem("Erro: " + (data.error || "Erro desconhecido"), "erro");
      }
    } catch (error) {
      mostrarMensagem("Erro de rede ao atualizar categoria", "erro");
    } finally {
      setSalvandoEdicao(false);
    }
  };

  // Buscar nome da categoria por ID
  const getNomeCategoria = (categoriaId: string) => {
    const categoria = categorias.find((cat) => cat.$id === categoriaId);
    return categoria?.nome || "Categoria não encontrada";
  };

  useEffect(() => {
    carregarCategorias();
    carregarSubcategorias();
  }, []);

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-6xl mx-auto">
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-6">
            🗂️ Gerenciar Categorias e Subcategorias
          </h1>

          <p className="text-gray-600 mb-6">
            Crie e gerencie categorias e subcategorias para organizar seus
            produtos diretamente pelo site.
          </p>

          {/* 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" ? "✅" : "❌"} {mensagem}
            </div>
          )}

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* CRIAR CATEGORIA */}
            <div className="space-y-6">
              <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={criarCategoria} 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={novaCategoria.nome}
                      onChange={(e) =>
                        setNovaCategoria({
                          ...novaCategoria,
                          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
                      value={novaCategoria.descricao}
                      onChange={(e) =>
                        setNovaCategoria({
                          ...novaCategoria,
                          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>

              {/* LISTA DE CATEGORIAS */}
              <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
                <h3 className="text-lg font-semibold text-gray-800 mb-4">
                  📋 Categorias Existentes ({categorias.length})
                </h3>

                {carregandoCategorias ? (
                  <div className="text-center py-4">🔄 Carregando...</div>
                ) : categorias.length === 0 ? (
                  <div className="text-center py-4 text-gray-500">
                    Nenhuma categoria encontrada
                  </div>
                ) : (
                  <div className="space-y-2 max-h-64 overflow-y-auto">
                    {categorias.map((categoria) => (
                      <div
                        key={categoria.$id}
                        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">
                              {categoria.nome}
                            </div>
                            {categoria.descricao && (
                              <div className="text-sm text-gray-600 mt-1">
                                {categoria.descricao}
                              </div>
                            )}
                            <div className="text-xs text-gray-400 mt-1">
                              ID: {categoria.$id}
                            </div>
                          </div>
                          <button
                            onClick={() => abrirModalEdicao(categoria)}
                            className="ml-2 px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-lg transition-colors"
                            title="Editar categoria"
                          >
                            ✏️ Editar
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>

            {/* CRIAR SUBCATEGORIA */}
            <div className="space-y-6">
              <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={criarSubcategoria} className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Categoria Pai *
                    </label>
                    <select
                      value={novaSubcategoria.categoriaId}
                      onChange={(e) =>
                        setNovaSubcategoria({
                          ...novaSubcategoria,
                          categoriaId: 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={novaSubcategoria.nome}
                      onChange={(e) =>
                        setNovaSubcategoria({
                          ...novaSubcategoria,
                          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
                      value={novaSubcategoria.descricao}
                      onChange={(e) =>
                        setNovaSubcategoria({
                          ...novaSubcategoria,
                          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>

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

                {carregandoSubcategorias ? (
                  <div className="text-center py-4">🔄 Carregando...</div>
                ) : subcategorias.length === 0 ? (
                  <div className="text-center py-4 text-gray-500">
                    Nenhuma subcategoria encontrada
                  </div>
                ) : (
                  <div className="space-y-2 max-h-64 overflow-y-auto">
                    {subcategorias.map((subcategoria) => (
                      <div
                        key={subcategoria.$id}
                        className="bg-white rounded-lg p-3 border"
                      >
                        <div className="font-medium text-gray-800">
                          {subcategoria.nome}
                        </div>
                        <div className="text-sm text-blue-600">
                          📂 {getNomeCategoria(subcategoria.categoria)}
                        </div>
                        {subcategoria.descricao && (
                          <div className="text-sm text-gray-600 mt-1">
                            {subcategoria.descricao}
                          </div>
                        )}
                        <div className="text-xs text-gray-400 mt-1">
                          ID: {subcategoria.$id}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </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>
      </div>

      {/* 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">
                ✏️ Editar Categoria
              </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>
      )}
    </div>
  );
}
