import React, { useEffect, useState } from "react";
import Link from "next/link";
import { herramientasData, getHerramientasPorCategoria } from "@/data/herramientasData";

function MenuHerramientas({ darkMode }) {
   const [activeCategory, setActiveCategory] = useState("actas");

       useEffect(() => {
        const hash = window.location.hash.replace("#", "");
        if (hash && ["actas", "liquidadores", "varias"].includes(hash)) {
            // eslint-disable-next-line react-hooks/set-state-in-effect
            setActiveCategory(hash);
        }
    }, []);

    useEffect(() => {
        window.history.replaceState(null, "", `#${activeCategory}`);
    }, [activeCategory]);

  const herramientasActivas = {
    actas: getHerramientasPorCategoria("actas"),
    liquidadores: getHerramientasPorCategoria("liquidadores"),
    varias: getHerramientasPorCategoria("varias")
  };

  const colorClasses = {
    blue: "bg-blue-600",
    indigo: "bg-indigo-600", 
    purple: "bg-purple-600",
    cyan: "bg-cyan-600",
    green: "bg-green-600",
    teal: "bg-teal-600",
    emerald: "bg-emerald-600",
    lime: "bg-lime-600",
    amber: "bg-amber-600",
    rose: "bg-rose-600",
    pink: "bg-pink-600",
    fuchsia: "bg-fuchsia-600",
    violet: "bg-violet-600",
    orange: "bg-orange-600",
    red: "bg-red-600"
  };

  const colorClassesGradient = {
    blue: "from-blue-600 to-blue-700",
    indigo: "from-indigo-600 to-indigo-700", 
    purple: "from-purple-600 to-purple-700",
    cyan: "from-cyan-600 to-cyan-700",
    green: "from-green-600 to-green-700",
    teal: "from-teal-600 to-teal-700",
    emerald: "from-emerald-600 to-emerald-700",
    lime: "from-lime-600 to-lime-700",
    amber: "from-amber-600 to-amber-700",
    rose: "from-rose-600 to-rose-700",
    pink: "from-pink-600 to-pink-700",
    fuchsia: "from-fuchsia-600 to-fuchsia-700",
    violet: "from-violet-600 to-violet-700",
    orange: "from-orange-600 to-orange-700",
    red: "from-red-600 to-red-700"
  };

  const herramientasPorCategoria = {
    actas: [...herramientasData.actas],
    liquidadores: [...herramientasData.liquidadores],
    varias: [...herramientasData.varias]
  };

  return (
    <div className={`min-h-screen font-display ${
      darkMode 
        ? 'bg-gray-900 text-white' 
        : 'bg-background-light text-text-light'
    }`}>
      <section className={`py-20 ${
        darkMode
          ? 'bg-gradient-to-br from-blue-900/20 to-blue-800/20'
          : 'bg-gradient-to-br from-primary/5 to-primary/10'
      }`}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-4xl text-center">
            <h1 className={`text-4xl font-bold tracking-tight sm:text-6xl ${
              darkMode ? 'text-white' : 'text-text-light'
            }`}>
              Herramientas Contables
            </h1>
            <p className={`mt-6 text-lg leading-8 ${
              darkMode 
                ? 'text-gray-300' 
                : 'text-text-secondary-light'
            }`}>
              Simplifica tus procesos contables con nuestras herramientas especializadas. 
              Desde generación de actas hasta liquidadores automáticos, todo en un solo lugar.
            </p>
          </div>
        </div>
      </section>

      <section className={`py-12 border-b ${
        darkMode
          ? 'bg-gray-800 border-gray-700'
          : 'bg-white border-gray-200'
      }`}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="flex flex-wrap justify-center gap-2 sm:gap-3 lg:gap-4">
            {[
              { id: "actas", name: "📄 Actas y Documentos", count: herramientasPorCategoria.actas.filter(h => h.status === "active").length },
              { id: "liquidadores", name: "🧮 Liquidadores", count: herramientasPorCategoria.liquidadores.filter(h => h.status === "active").length },
              { id: "varias", name: "⚡ Varias Herramientas", count: herramientasPorCategoria.varias.filter(h => h.status === "active").length }
            ].map((category) => (
              <button
                key={category.id}
                onClick={() => setActiveCategory(category.id)}
                className={`flex items-center gap-5 sm:gap-2 px-6 sm:px-4 lg:px-6 py-2  sm:py-3 lg:py-4 rounded-2xl font-semibold transition-all duration-300 text-sm sm:text-base whitespace-nowrap ${
                  activeCategory === category.id
                    ? "bg-blue-600 text-white shadow-lg shadow-blue-600/25 transform scale-105"
                    : darkMode
                      ? "bg-gray-700 text-gray-100 hover:bg-gray-600"
                      : "bg-gray-100 text-text-light hover:bg-gray-200"
                }`}
              >
                <span className="hidden sm:inline">{category.name}</span>
                <span className="sm:hidden">{category.name.split(' ')[0]}</span>
                <span className={`px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full text-xs ${
                  activeCategory === category.id
                    ? "bg-white/20 text-white"
                    : darkMode
                      ? "bg-blue-900/30 text-blue-300"
                      : "bg-blue-100 text-blue-600"
                }`}>
                  {category.count}
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className={`py-16 ${darkMode ? 'bg-gray-900' : 'bg-background-light'}`}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className={`text-3xl font-bold ${
              darkMode ? 'text-white' : 'text-text-light'
            }`}>
              {activeCategory === "actas" && "Actas y Documentos"}
              {activeCategory === "liquidadores" && "Liquidadores Automáticos"}
              {activeCategory === "varias" && "Herramientas Varias"}
            </h2>
            <p className={`mt-4 max-w-2xl mx-auto ${
              darkMode 
                ? 'text-gray-400' 
                : 'text-text-secondary-light'
            }`}>
              {activeCategory === "actas" && "Genera y gestiona todos los documentos legales de tu empresa de forma rápida y segura."}
              {activeCategory === "liquidadores" && "Calcula nómina, impuestos y prestaciones sociales con precisión y cumplimiento legal."}
              {activeCategory === "varias" && "Otras herramientas útiles para optimizar la gestión financiera de tu negocio."}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {herramientasPorCategoria[activeCategory].map((herramienta) => (
              <div
                key={herramienta.slug}
                className={`group relative rounded-2xl p-6 shadow-lg border transition-all duration-300 ${
                  herramienta.status === "active"
                    ? darkMode
                      ? "bg-gray-800 border-gray-700 hover:shadow-2xl hover:scale-105"
                      : "bg-white border-gray-100 hover:shadow-2xl hover:scale-105"
                    : darkMode
                      ? "bg-gray-800/50 border-gray-700 opacity-75"
                      : "bg-gray-50 border-gray-200 opacity-75"
                }`}
              >
                <div className={`absolute -top-2 -right-2 px-3 py-1 rounded-full text-xs font-semibold ${
                  herramienta.status === "active" 
                    ? darkMode
                      ? "bg-green-900/40 text-green-300"
                      : "bg-green-100 text-green-800"
                    : darkMode
                      ? "bg-amber-900/40 text-amber-300"
                      : "bg-amber-100 text-amber-800"
                }`}>
                  {herramienta.status === "active" ? "Disponible" : "Próximamente"}
                </div>

                <div className={`w-14 h-14 rounded-xl ${colorClasses[herramienta.color]} flex items-center justify-center mb-4 ${
                  herramienta.status === "active" ? "group-hover:scale-110" : "opacity-60"
                } transition-transform duration-300`}>
                  <span className="material-icons text-white text-2xl">
                    {herramienta.icon}
                  </span>
                </div>

                <h3 className={`text-xl font-bold mb-2 ${
                  darkMode ? 'text-white' : 'text-text-light'
                }`}>
                  {herramienta.title}
                </h3>
                <p className={`mb-4 text-sm leading-relaxed ${
                  herramienta.status === "active"
                    ? darkMode
                      ? 'text-gray-400'
                      : 'text-text-secondary-light'
                    : darkMode
                      ? 'text-gray-500'
                      : 'text-text-secondary-light/70'
                }`}>
                  {herramienta.description}
                </p>

                {herramienta.status === "active" ? (
                  <Link
                    href={`/herramientas/${herramienta.categoria}/${herramienta.slug}`}
                    className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-semibold text-sm transition-colors group/btn"
                  >
                    Usar herramienta
                    <span className="material-icons text-sm transform group-hover/btn:translate-x-1 transition-transform">
                      arrow_forward
                    </span>
                  </Link>
                ) : (
                  <div className={`inline-flex items-center gap-2 font-semibold text-sm ${
                    darkMode ? 'text-gray-500' : 'text-gray-400'
                  }`}>
                    <span className="material-icons text-sm">schedule</span>
                    Disponible pronto
                  </div>
                )}

                {herramienta.status === "active" && (
                  <div className={`absolute inset-0 rounded-2xl border-2 border-transparent opacity-0 group-hover:opacity-0 transition-opacity duration-300 -z-10`}></div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-gradient-to-r from-blue-600 to-blue-700">
        <div className="mx-auto max-w-4xl px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-white sm:text-4xl">
            ¿Necesitas una herramienta específica?
          </h2>
          <p className="mt-4 text-lg text-blue-100">
            Contamos con soluciones personalizadas para necesidades contables únicas.
          </p>
          <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/contacto"
              className="bg-white text-blue-600 px-8 py-4 rounded-xl font-semibold hover:bg-gray-50 transition-colors inline-flex items-center gap-2"
            >
              <span className="material-icons">chat</span>
              Solicitar herramienta personalizada
            </Link>
            <Link
              href="/servicios"
              className="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold hover:bg-white/10 transition-colors inline-flex items-center gap-2"
            >
              <span className="material-icons">info</span>
              Conocer todos los servicios
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

export default MenuHerramientas;