/* 2.7 — Contenidos y Recursos del Ecosistema */

function Contenidos({ role }) {
  const [tab, setTab] = useState("biblioteca");
  const [filter, setFilter] = useState({ tipo: "", tema: "", nivel: "", q: "" });

  const filtered = window.CONTENIDOS.filter(c => {
    if (filter.tipo && c.tipo !== filter.tipo) return false;
    if (filter.tema && c.tema !== filter.tema) return false;
    if (filter.nivel && c.nivel !== filter.nivel) return false;
    if (filter.q && !c.titulo.toLowerCase().includes(filter.q.toLowerCase())) return false;
    return true;
  });

  return (
    <div className="page" data-screen-label="2.7 Contenidos">
      <div className="page-head">
        <div>
          <div className="meta">MÓDULO 2.7 · CONTENIDOS & RECURSOS DEL ECOSISTEMA</div>
          <h1>Biblioteca de recursos</h1>
          <div className="sub">Repositorio multimedia con búsqueda, filtrado por sector y nivel. Creación restringida a administradores y perfiles designados.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="filter" size={13}/> Categorías</button>
          <button className="btn btn-primary"><Icon name="upload" size={13}/> Subir recurso</button>
        </div>
      </div>

      <div className="tabs">
        <div className={`tab ${tab === "biblioteca" ? "active" : ""}`} onClick={() => setTab("biblioteca")}>Biblioteca <span className="badge">{window.CONTENIDOS.length}</span></div>
        <div className={`tab ${tab === "rutas" ? "active" : ""}`} onClick={() => setTab("rutas")}>Rutas de aprendizaje</div>
        <div className={`tab ${tab === "admin" ? "active" : ""}`} onClick={() => setTab("admin")}>Administración</div>
      </div>

      {tab === "biblioteca" && (
        <>
          <div className="filterbar" style={{ marginBottom: 12 }}>
            <div className="field" style={{ flex: 1, minWidth: 200 }}>
              <label>Buscar</label>
              <input placeholder="Título, autor, tema…" value={filter.q} onChange={e => setFilter({ ...filter, q: e.target.value })}/>
            </div>
            <div className="field"><label>Tipo</label>
              <select value={filter.tipo} onChange={e => setFilter({ ...filter, tipo: e.target.value })}>
                <option value="">Todos</option>
                {[...new Set(window.CONTENIDOS.map(c => c.tipo))].map(t => <option key={t}>{t}</option>)}
              </select>
            </div>
            <div className="field"><label>Tema</label>
              <select value={filter.tema} onChange={e => setFilter({ ...filter, tema: e.target.value })}>
                <option value="">Todos</option>
                {[...new Set(window.CONTENIDOS.map(c => c.tema))].map(t => <option key={t}>{t}</option>)}
              </select>
            </div>
            <div className="field"><label>Nivel</label>
              <select value={filter.nivel} onChange={e => setFilter({ ...filter, nivel: e.target.value })}>
                <option value="">Todos</option><option>Básico</option><option>Intermedio</option><option>Avanzado</option>
              </select>
            </div>
            <span className="count">{filtered.length} recursos</span>
          </div>

          <div className="grid-3">
            {filtered.map(c => <ResourceCard key={c.id} c={c}/>)}
          </div>
        </>
      )}
      {tab === "rutas" && <RutasAprendizaje/>}
      {tab === "admin" && <AdminContenidos/>}
    </div>
  );
}

function ResourceCard({ c }) {
  const tipoColor = {
    "Guía PDF": "#a83a5b",
    "Video": "#1a3a6c",
    "Artículo": "#1b7a4d",
    "Webinar grabado": "#7c5a1f",
    "Plantilla XLSX": "#c97a16",
    "Caso de estudio": "#5b3f9e",
  }[c.tipo] || "#4a5568";
  const tipoIcon = {
    "Guía PDF": "book", "Video": "eye", "Artículo": "book",
    "Webinar grabado": "eye", "Plantilla XLSX": "download", "Caso de estudio": "book"
  }[c.tipo] || "book";
  return (
    <div className="card" style={{ display: "flex", flexDirection: "column" }}>
      <div style={{
        height: 110, background: `linear-gradient(135deg, ${tipoColor}dd, ${tipoColor}aa)`,
        display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", position: "relative"
      }}>
        <Icon name={tipoIcon} size={36}/>
        <div style={{ position: "absolute", top: 10, left: 10 }}>
          <span className="chip" style={{ background: "rgba(255,255,255,0.95)", color: tipoColor, fontWeight: 600 }}>{c.tipo}</span>
        </div>
        <div style={{ position: "absolute", top: 10, right: 10 }}>
          <span className="chip" style={{ background: "rgba(255,255,255,0.85)" }}>{c.nivel}</span>
        </div>
      </div>
      <div style={{ padding: 14, flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ fontFamily: "var(--font-serif)", fontSize: 14.5, fontWeight: 600, lineHeight: 1.3 }}>{c.titulo}</div>
        <div style={{ fontSize: 11, color: "var(--c-ink-4)" }}>por <b>{c.autor}</b> · {c.fecha}</div>
        <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
          <span className="chip">{c.tema}</span>
          <span className="chip">{c.sector}</span>
        </div>
        <div style={{ marginTop: "auto", display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 10, borderTop: "1px solid var(--c-line-2)", fontSize: 11 }}>
          <span style={{ color: "var(--c-ink-4)" }}><Icon name="download" size={10}/> {c.descargas.toLocaleString()} descargas</span>
          <button className="btn btn-sm btn-primary">Abrir</button>
        </div>
      </div>
    </div>
  );
}

function RutasAprendizaje() {
  return (
    <div className="grid-2">
      {[
        {
          titulo: "Ruta · Transformación digital MiPyme",
          recursos: 8, horas: "12h", inscritos: 412,
          desc: "Para mipymes en estadio inicial. Cubre cultura, procesos, herramientas básicas y primer modelo de datos.",
          niveles: ["Básico", "Intermedio"],
          color: "#1a3a6c"
        },
        {
          titulo: "Ruta · Levantar capital Pre-Seed en Colombia",
          recursos: 12, horas: "18h", inscritos: 287,
          desc: "Para startups que buscan su primera ronda. Modelo financiero, deck, regulación, red de ángeles y fondos locales.",
          niveles: ["Intermedio"],
          color: "#a83a5b"
        },
        {
          titulo: "Ruta · IA aplicada para sector salud",
          recursos: 10, horas: "20h", inscritos: 184,
          desc: "Marco regulatorio Habeas Data, casos de uso clínicos y técnicos, validación con IPS.",
          niveles: ["Intermedio", "Avanzado"],
          color: "#1b7a4d"
        },
        {
          titulo: "Ruta · Innovación abierta para corporativos",
          recursos: 6, horas: "9h", inscritos: 64,
          desc: "Diseño de retos, gobernanza de pilotos, métricas, contratación pública-privada.",
          niveles: ["Avanzado"],
          color: "#7c5a1f"
        },
      ].map((r, i) => (
        <div key={i} className="card">
          <div style={{ height: 6, background: r.color }}/>
          <div className="card-body">
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 17, fontWeight: 600, marginBottom: 4 }}>{r.titulo}</div>
            <div style={{ fontSize: 12, color: "var(--c-ink-3)", lineHeight: 1.4, marginBottom: 12 }}>{r.desc}</div>
            <div style={{ display: "flex", gap: 14, fontSize: 11.5, color: "var(--c-ink-4)", marginBottom: 12 }}>
              <span><Icon name="book" size={11}/> <b>{r.recursos}</b> recursos</span>
              <span><Icon name="activity" size={11}/> <b>{r.horas}</b> estimadas</span>
              <span><Icon name="users" size={11}/> <b>{r.inscritos}</b> inscritos</span>
            </div>
            <div style={{ display: "flex", gap: 6, alignItems: "center", justifyContent: "space-between" }}>
              <div style={{ display: "flex", gap: 4 }}>
                {r.niveles.map(n => <span key={n} className="chip">{n}</span>)}
              </div>
              <button className="btn btn-sm">Ver ruta <Icon name="chev_r" size={11}/></button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function AdminContenidos() {
  return (
    <div className="card">
      <div className="card-head"><h3>Administración · roles autorizados a publicar</h3><button className="btn btn-sm btn-primary"><Icon name="plus" size={11}/> Designar publicador</button></div>
      <table className="data">
        <thead><tr><th>Usuario / rol</th><th>Permisos</th><th>Categorías habilitadas</th><th className="num">Publicaciones</th><th>Estado</th></tr></thead>
        <tbody>
          {[
            { u: "admin@econexa.gov.co", r: "Administrador", perm: "Todos los permisos", cats: ["Todas"], n: 47, e: "activo" },
            { u: "Mauricio Tovar L.", r: "Mentor invitado", perm: "Publicar · Editar propios", cats: ["Financiación"], n: 8, e: "activo" },
            { u: "Sebastián Ríos C.", r: "Mentor invitado", perm: "Publicar · Editar propios", cats: ["Regulación", "Fintech"], n: 6, e: "activo" },
            { u: "Alma L. Restrepo", r: "Mentor invitado", perm: "Publicar · Editar propios", cats: ["Producto", "Growth"], n: 11, e: "activo" },
            { u: "innovacion@uba.edu.co", r: "Aliado académico", perm: "Solo publicar", cats: ["Investigación"], n: 4, e: "activo" },
            { u: "Capital Andino Ventures", r: "Aliado inversionista", perm: "Solo publicar", cats: ["Finanzas"], n: 3, e: "pendiente" },
          ].map((u, i) => (
            <tr key={i}>
              <td><span className="cell-strong">{u.u}</span><div className="cell-sub">{u.r}</div></td>
              <td className="text-xs muted">{u.perm}</td>
              <td>{u.cats.map(c => <span key={c} className="chip" style={{ marginRight: 4 }}>{c}</span>)}</td>
              <td className="num mono">{u.n}</td>
              <td><span className={`chip ${u.e === "activo" ? "success" : "warn"}`}>{u.e}</span></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

window.Contenidos = Contenidos;