"use client";
import React, { useState } from "react";

interface ModuloEGIE {
  id: string;
  titulo: string;
  descripcion: string;
  categoria: "todos" | "matrices" | "contratos" | "seguridad";
  estado: "activo" | "inactivo" | "auditado";
  progresoLlenado: number;
  valorInversion: string;
}

export default function ModulosOperacion() {
  const [filtro, setFiltro] = useState<string>("todos");
  const [seleccionado, setSeleccionado] = useState<ModuloEGIE | null>(null);

  const [listaModulos, setListaModulos] = useState<ModuloEGIE[]>(
    Array.from({ length: 9 }, (_, i) => ({
      id: `M${i + 1}`,
      titulo: `Lógica Matricial M${i + 1}`,
      descripcion: `Algoritmo matemático inmutable acoplado al nodo M${i + 1} para la dispersión automatizada de recursos del ecosistema.`,
      categoria: i % 3 === 0 ? "matrices" : i % 3 === 1 ? "contratos" : "seguridad",
      estado: i % 4 === 0 ? "auditado" : i % 4 === 1 ? "activo" : "inactivo",
      progresoLlenado: Math.floor(Math.random() * 60) + 30,
      valorInversion: `${(0.05 * (i + 1)).toFixed(2)} ETH`,
    }))
  );

  const modulosFiltrados = filtro === "todos" 
    ? listaModulos 
    : listaModulos.filter(m => m.categoria === filtro);

  const simularCiclo = (id: string) => {
    setListaModulos(prev =>
      prev.map(m => {
        if (m.id === id) {
          const nuevoProgreso = Math.min(m.progresoLlenado + 15, 100);
          return {
            ...m,
            progresoLlenado: nuevoProgreso,
            estado: nuevoProgreso === 100 ? "auditado" : m.estado
          };
        }
        return m;
      })
    );
  };

  return (
    <div style={{ marginTop: "2rem", width: "100%" }}>
      {/* Filtros dinámicos basados en tus estilos nav-btn */}
      <div style={{ display: "flex", gap: "10px", flexWrap: "wrap", marginBottom: "2rem" }}>
        {["todos", "matrices", "contratos", "seguridad"].map((cat) => (
          <button
            key={cat}
            onClick={() => setFiltro(cat)}
            className={`nav-btn ${filtro === cat ? "active" : ""}`}
            style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "1px" }}
          >
            {cat}
          </button>
        ))}
      </div>

      {/* Grid que hereda tus clases css globales del archivo principal */}
      <div className="matrix-grid">
        {modulosFiltrados.map((item) => (
          <div
            key={item.id}
            className="matrix-card"
            onClick={() => setSeleccionado(item)}
            style={{
              cursor: "pointer",
              border: seleccionado?.id === item.id ? "1px solid #3b82f6" : "1px solid rgba(255,255,255,0.05)",
              background: seleccionado?.id === item.id ? "rgba(30,58,138,0.2)" : "rgba(255,255,255,0.02)",
              transform: seleccionado?.id === item.id ? "scale(1.02)" : "none",
              transition: "all 0.3s ease"
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem", width: "100%" }}>
              <span className="badge" style={{ background: "rgba(59,130,246,0.1)", color: "#60a5fa", padding: "2px 8px", borderRadius: "4px", fontSize: "0.7rem", fontWeight: "bold", marginBottom: 0, border: "none" }}>
                {item.id}
              </span>
              <span style={{ 
                fontSize: "0.65rem", 
                textTransform: "uppercase", 
                fontWeight: "bold",
                color: item.estado === "auditado" ? "#34d399" : item.estado === "activo" ? "#fbbf24" : "#64748b" 
              }}>
                • {item.estado}
              </span>
            </div>

            <h3 className="card-title" style={{ fontSize: "1.1rem", margin: "0.5rem 0", color: "#fff", textAlign: "left" }}>{item.titulo}</h3>
            <p className="card-desc" style={{ fontSize: "0.8rem", color: "#94a3b8", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textAlign: "left" }}>
              {item.descripcion}
            </p>

            <div style={{ marginTop: "1.5rem" }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem", color: "#64748b", marginBottom: "0.4rem" }}>
                <span>Valor: <strong style={{ color: "#cbd5e1" }}>{item.valorInversion}</strong></span>
                <span>{item.progresoLlenado}%</span>
              </div>
              <div style={{ width: "100%", height: "5px", background: "#020617", borderRadius: "999px", overflow: "hidden", border: "1px solid rgba(255,255,255,0.05)" }}>
                <div style={{ 
                  width: `${item.progresoLlenado}%`, 
                  height: "100%", 
                  background: item.estado === "auditado" ? "#10b981" : "#3b82f6", 
                  transition: "width 0.5s ease" 
                }} />
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Consola de detalles del módulo seleccionado */}
      {seleccionado && (
        <div className="alert-box" style={{ marginTop: "2rem", display: "flex", flexDirection: "column", gap: "1rem", width: "100%", boxSizing: "border-box" }}>
          <div style={{ width: "100%" }}>
            <h4 style={{ color: "#60a5fa", margin: 0, fontSize: "0.85rem", textTransform: "uppercase", letterSpacing: "1px", textAlign: "left" }}>
              Consola del Sistema &gt; {seleccionado.id}
            </h4>
            <p style={{ margin: "0.5rem 0 0 0", fontSize: "0.85rem", color: "#94a3b8", lineHeight: "1.5", textAlign: "left" }}>
              {seleccionado.descripcion} Configurado para recibir aportes inmutables de <span style={{ color: "#fff", fontWeight: "bold" }}>{seleccionado.valorInversion}</span>.
            </p>
          </div>
          <div style={{ display: "flex", gap: "10px" }}>
            <button className="cta-btn" onClick={() => simularCiclo(seleccionado.id)} style={{ padding: "8px 16px", fontSize: "0.8rem" }}>
              Simular Ciclo de Carga
            </button>
            <button className="secondary-btn" onClick={() => setSeleccionado(null)} style={{ padding: "8px 16px", fontSize: "0.8rem", background: "transparent", border: "1px solid rgba(255,255,255,0.1)", color: "#64748b" }}>
              Cerrar Consola
            </button>
          </div>
        </div>
      )}
    </div>
  );
}