// home-view.jsx — Welcome dashboard shown when no agent is selected.

function MiniAgentCard({ agent, locked, pinned, onOpen, onPin, t, p }) {
  const [hover, setHover] = React.useState(false);
  const Icon = agent.icon;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => !locked && onOpen(agent)}
      style={{
        position: "relative",
        background: locked ? p.bg2 : p.bgCard,
        border: `1px solid ${
          hover && !locked ? t.accent + "55"
          : agent.required ? t.accent + "55"
          : p.border}`,
        borderRadius: 12,
        padding: 20,
        opacity: locked ? 0.55 : 1,
        cursor: "default",
        transition: "border-color .2s, transform .2s, box-shadow .2s",
        transform: hover && !locked ? "translateY(-2px)" : "translateY(0)",
        boxShadow: hover && !locked ? `0 14px 40px -20px ${t.accent}40` : "none",
        display: "flex", flexDirection: "column", gap: 12,
        minHeight: 180,
        overflow: "hidden",
      }}>
      {!locked && (
        <button
          onClick={(e) => { e.stopPropagation(); onPin(agent.id); }}
          aria-label={pinned ? "Quitar favorito" : "Favorito"}
          style={{
            position: "absolute", top: 12, right: 12,
            background: "transparent", border: 0, padding: 4,
            color: pinned ? t.accent : p.textDim,
            cursor: "default", transition: "color .15s, opacity .15s",
            opacity: pinned || hover ? 1 : 0,
          }}>
          <svg width="14" height="14" viewBox="0 0 24 24"
               fill={pinned ? "currentColor" : "none"}
               stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="m12 3 2.7 6 6.3.6-4.8 4.4 1.5 6.5L12 17l-5.7 3.5 1.5-6.5L3 9.6 9.3 9 12 3Z"/>
          </svg>
        </button>
      )}
      <div style={{
        width: 48, height: 48, borderRadius: 999,
        background: locked ? "transparent" : t.accent + "14",
        border: `1.5px solid ${locked ? p.border : t.accent + (hover ? "" : "66")}`,
        display: "flex", alignItems: "center", justifyContent: "center",
        color: locked ? p.textDim : t.accent,
        transition: "border-color .2s",
      }}>
        {locked ? (
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="5" y="11" width="14" height="10" rx="2"/>
            <path d="M8 11V8a4 4 0 0 1 8 0v3"/>
          </svg>
        ) : <Icon size={22} />}
      </div>
      {agent.badge && (
        <div style={{
          alignSelf: "flex-start",
          marginTop: -2, marginBottom: -2,
          padding: "3px 9px", borderRadius: 999,
          background: t.accent + "1c", border: `1px solid ${t.accent}55`,
          color: t.accent,
          fontFamily: "'Geist', sans-serif", fontSize: 10, fontWeight: 600,
          letterSpacing: "0.08em", textTransform: "uppercase",
          display: "flex", alignItems: "center", gap: 5,
        }}>
          <span style={{ width: 4, height: 4, borderRadius: 999, background: t.accent }}/>
          {agent.badge}
        </div>
      )}
      <div style={{
        fontFamily: "'Montserrat', sans-serif", fontWeight: 700,
        fontSize: 19, lineHeight: 1.18,
        color: p.text, letterSpacing: "-0.01em",
      }}>{agent.name}</div>
      <div style={{
        fontFamily: "'Geist', sans-serif", fontSize: 13,
        lineHeight: 1.45, color: p.textMuted, flex: 1,
      }}>{agent.desc}</div>
      <div style={{
        fontFamily: "'Geist', sans-serif", fontSize: 12, fontWeight: 500,
        color: locked ? p.textDim : t.accent,
        letterSpacing: "0.02em",
        display: "flex", alignItems: "center", gap: 6,
      }}>
        {locked ? "Desbloquear" : "Abrir agente"}
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
             style={{ transform: hover && !locked ? "translateX(3px)" : "translateX(0)",
                      transition: "transform .18s" }}>
          <path d="M5 12h14"/><path d="m13 6 6 6-6 6"/>
        </svg>
      </div>
    </div>
  );
}

function HomeView({ t, p, query, pinned, isLocked, onOpenAgent, togglePin }) {
  const isMobile = window.useIsMobile();
  const matchesQuery = (a) => {
    if (!query) return true;
    const q = query.toLowerCase();
    return a.name.toLowerCase().includes(q) || a.desc.toLowerCase().includes(q);
  };

  const pinnedAgents = ALL_AGENTS.filter(a => pinned.includes(a.id) && !isLocked(a.level));

  return (
    <div style={{
      flex: 1, overflowY: "auto",
      padding: isMobile ? "0 16px 64px" : "0 36px 80px",
    }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        {/* Welcome */}
        <section style={{ padding: isMobile ? "30px 0 22px" : "52px 0 34px" }}>
          <h1 style={{
            fontFamily: "'Montserrat', sans-serif", fontWeight: 800,
            fontSize: "clamp(40px, 5vw, 60px)", lineHeight: 1.0,
            letterSpacing: "-0.03em", margin: "0 0 18px", color: p.text,
          }}>
            MDP <span style={{ color: t.accent }}>System</span>
          </h1>
          <p style={{
            fontFamily: "'Montserrat', sans-serif", fontSize: 17, lineHeight: 1.5,
            color: p.textMuted, maxWidth: 560, margin: 0, fontWeight: 500,
          }}>
            Cinco niveles, un camino claro. Elige un agente entrenado con el
            método Marca de Poder y empieza a trabajar.
          </p>
        </section>

        {/* Favorites */}
        {pinnedAgents.length > 0 && !query && (
          <section style={{ marginBottom: 48 }}>
            <div style={{
              display: "flex", alignItems: "baseline", gap: 12, marginBottom: 18, flexWrap: "wrap",
              paddingBottom: 14, borderBottom: `1px solid ${p.borderSoft}`,
            }}>
              <svg width="13" height="13" viewBox="0 0 24 24"
                   fill={t.accent} stroke={t.accent} strokeWidth="1.4"
                   strokeLinecap="round" strokeLinejoin="round">
                <path d="m12 3 2.7 6 6.3.6-4.8 4.4 1.5 6.5L12 17l-5.7 3.5 1.5-6.5L3 9.6 9.3 9 12 3Z"/>
              </svg>
              <div style={{
                fontFamily: "'Geist', sans-serif", fontSize: 11,
                color: t.accent, letterSpacing: "0.24em", fontWeight: 500,
              }}>FAVORITOS</div>
              <div style={{
                fontFamily: "'Geist', sans-serif", fontSize: 13,
                color: p.textMuted,
              }}>— Tus agentes pinneados</div>
            </div>
            <div style={{
              display: "grid", gap: 16,
              gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
            }}>
              {pinnedAgents.filter(matchesQuery).map(a => (
                <MiniAgentCard key={"pin-" + a.id} agent={a} locked={false}
                               pinned={true}
                               onOpen={onOpenAgent} onPin={togglePin}
                               t={t} p={p}/>
              ))}
            </div>
          </section>
        )}

        {/* Levels */}
        {LEVELS.map(level => {
          const locked = isLocked(level.n);
          const visibleAgents = level.agents.filter(matchesQuery);
          if (query && visibleAgents.length === 0) return null;
          return (
            <section key={level.n} style={{ marginBottom: 48 }}>
              <div style={{
                display: "flex", alignItems: "baseline", gap: 14, marginBottom: 18, flexWrap: "wrap",
                paddingBottom: 14, borderBottom: `1px solid ${p.borderSoft}`,
              }}>
                <div style={{
                  fontFamily: "'Geist', sans-serif", fontSize: 11,
                  color: t.accent, letterSpacing: "0.24em", fontWeight: 500,
                }}>NIVEL {String(level.n).padStart(2,"0")}</div>
                <div style={{
                  fontFamily: "'Montserrat', sans-serif", fontWeight: 800, fontSize: 24, color: p.text, lineHeight: 1, letterSpacing: "-0.02em",
                }}>{level.name}</div>
                <div style={{
                  fontFamily: "'Geist', sans-serif", fontSize: 13,
                  color: p.textMuted,
                }}>— {level.desc}</div>
                {locked && (
                  <div style={{
                    marginLeft: "auto", display: "flex", alignItems: "center", gap: 6,
                    fontFamily: "'Geist', sans-serif", fontSize: 11,
                    color: p.textMuted, letterSpacing: "0.05em",
                    textTransform: "uppercase",
                  }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="5" y="11" width="14" height="10" rx="2"/>
                      <path d="M8 11V8a4 4 0 0 1 8 0v3"/>
                    </svg>
                    Bloqueado
                  </div>
                )}
              </div>
              <div style={{
                display: "grid", gap: 16,
                gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
              }}>
                {visibleAgents.map(a => (
                  <MiniAgentCard key={a.id} agent={{ ...a, level: level.n, levelName: level.name }}
                                 locked={locked}
                                 pinned={pinned.includes(a.id)}
                                 onOpen={onOpenAgent} onPin={togglePin}
                                 t={t} p={p}/>
                ))}
              </div>
            </section>
          );
        })}

        {/* No results */}
        {query && ALL_AGENTS.filter(matchesQuery).length === 0 && (
          <div style={{
            padding: 60, textAlign: "center",
            border: `1px dashed ${p.border}`, borderRadius: 12,
            color: p.textMuted, fontFamily: "'Geist', sans-serif",
          }}>
            Sin resultados para "<span style={{ color: p.text }}>{query}</span>".
          </div>
        )}

        {/* Footer */}
        <footer style={{
          marginTop: 60, paddingTop: 28,
          borderTop: `1px solid ${p.borderSoft}`,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 20, flexWrap: "wrap",
          fontFamily: "'Geist', sans-serif", fontSize: 12,
          color: p.textDim,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <img src={t.theme === "dark" ? "assets/logo-mdp-white.png" : "assets/logo-mdp-black.png"}
                 alt="Marca de Poder"
                 style={{ height: 22, width: "auto", opacity: 0.7 }}/>
            <span>© 2026 Marca de Poder · Vanesa Jackson. Todos los derechos reservados.</span>
          </div>
          <div style={{ display: "flex", gap: 22 }}>
            <a href="https://portal.marcadepoder.com/feed" target="_blank" rel="noopener noreferrer"
               style={{ color: p.textMuted, textDecoration: "none" }}>Portal de estudios</a>
            <a href="#" style={{ color: p.textMuted, textDecoration: "none" }}>Términos</a>
            <a href="#" style={{ color: p.textMuted, textDecoration: "none" }}>Privacidad</a>
            <a href="#" style={{ color: p.textMuted, textDecoration: "none" }}>Soporte</a>
          </div>
        </footer>
      </div>
    </div>
  );
}

window.HomeView = HomeView;