"use client";

const LimparCachePage = () => {
  const limparTudo = () => {
    // Limpar sessionStorage
    sessionStorage.clear();

    // Limpar localStorage
    localStorage.clear();

    alert("Cache limpo! Redirecionando para página inicial...");
    window.location.href = "/";
  };

  const limparApenas = (key: string) => {
    sessionStorage.removeItem(key);
    localStorage.removeItem(key);
    alert(`Item "${key}" removido!`);
  };

  const mostrarCache = () => {
    const session = Object.keys(sessionStorage).map((key) => ({
      key,
      value: sessionStorage.getItem(key),
    }));

    const local = Object.keys(localStorage).map((key) => ({
      key,
      value: localStorage.getItem(key),
    }));

    console.log("📦 SessionStorage:", session);
    console.log("💾 LocalStorage:", local);

    alert("Cache exibido no console!");
  };

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="max-w-2xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h1 className="text-2xl font-bold mb-4">🧹 Limpar Cache</h1>

          <div className="space-y-4">
            <button
              onClick={limparTudo}
              className="w-full px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
            >
              🗑️ Limpar TODO o Cache (SessionStorage + LocalStorage)
            </button>

            <div className="grid grid-cols-2 gap-2">
              <button
                onClick={() => limparApenas("registro-completado")}
                className="px-3 py-2 bg-orange-600 text-white rounded hover:bg-orange-700 text-sm"
              >
                🔧 Limpar "registro-completado"
              </button>

              <button
                onClick={() => limparApenas("cadastro-validado")}
                className="px-3 py-2 bg-orange-600 text-white rounded hover:bg-orange-700 text-sm"
              >
                ✅ Limpar "cadastro-validado"
              </button>

              <button
                onClick={() => limparApenas("tentativas-completar-registro")}
                className="px-3 py-2 bg-orange-600 text-white rounded hover:bg-orange-700 text-sm"
              >
                🔄 Limpar "tentativas-completar-registro"
              </button>

              <button
                onClick={() => limparApenas("ultima-tentativa-registro")}
                className="px-3 py-2 bg-orange-600 text-white rounded hover:bg-orange-700 text-sm"
              >
                ⏰ Limpar "ultima-tentativa-registro"
              </button>
            </div>

            <button
              onClick={mostrarCache}
              className="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              👁️ Mostrar Cache no Console
            </button>

            <div className="border-t pt-4 space-y-2">
              <a
                href="/diagnostico"
                className="block w-full px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-center"
              >
                🔬 Ir para Diagnóstico
              </a>

              <a
                href="/completar-registro"
                className="block w-full px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 text-center"
              >
                📝 Ir para Completar Registro
              </a>

              <a
                href="/dashboard"
                className="block w-full px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 text-center"
              >
                📊 Ir para Dashboard
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LimparCachePage;
