/* 2.5 — Banco de Proyectos & Oportunidades de Financiación */

function Proyectos({ role }) {
  const [tab, setTab] = useState("listado");
  const [filter, setFilter] = useState({ estado: "", sector: "" });

  const filtered = window.PROYECTOS.filter(p => {
    if (filter.estado && p.estado !== filter.estado) return false;
    if (filter.sector && p.sector !== filter.sector) return false;
    return true;
  });

  return (
    <div className="page" data-screen-label="2.5 Banco de Proyectos">
      <div className="page-head">
        <div>
          <div className="meta">MÓDULO 2.5 · BANCO DE PROYECTOS & OPORTUNIDADES</div>
          <h1>Banco de Proyectos</h1>
          <div className="sub">Repositorio aprobado de proyectos digitales con control de visibilidad, expresión de interés y seguimiento del pipeline hacia financiación.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="download" size={13}/> Reporte efectividad</button>
          <button className="btn btn-primary"><Icon name="plus" size={13}/> Publicar proyecto</button>
        </div>
      </div>

      <div className="grid-kpis">
        <KpiTile label="Proyectos publicados" value="312" sub="187 aprobados · 41 financiados" delta="+28"/>
        <KpiTile label="Expresiones de interés" value="1,847" sub="14.2 promedio por proyecto"/>
        <KpiTile label="Reuniones agendadas" value="284" sub="último mes" delta="+17%"/>
        <KpiTile label="Tasa de conversión a financiación" value="13.1%" sub="financiados / aprobados" accent/>
      </div>

      <div className="tabs">
        <div className={`tab ${tab === "listado" ? "active" : ""}`} onClick={() => setTab("listado")}>Listado <span className="badge">{filtered.length}</span></div>
        <div className={`tab ${tab === "ficha" ? "active" : ""}`} onClick={() => setTab("ficha")}>Ficha de proyecto</div>
        <div className={`tab ${tab === "intereses" ? "active" : ""}`} onClick={() => setTab("intereses")}>Intereses & seguimiento</div>
        <div className={`tab ${tab === "moderacion" ? "active" : ""}`} onClick={() => setTab("moderacion")}>Moderación <span className="badge">11</span></div>
      </div>

      {tab === "listado" && (
        <>
          <div className="filterbar" style={{ marginBottom: 12 }}>
            <div className="field"><label>Estado</label>
              <select value={filter.estado} onChange={e => setFilter({ ...filter, estado: e.target.value })}>
                <option value="">Todos</option><option>publicado</option><option>aprobado</option><option>financiado</option><option>revisión</option>
              </select>
            </div>
            <div className="field"><label>Sector</label>
              <select value={filter.sector} onChange={e => setFilter({ ...filter, sector: e.target.value })}>
                <option value="">Todos</option>
                {[...new Set(window.PROYECTOS.map(p => p.sector))].map(s => <option key={s}>{s}</option>)}
              </select>
            </div>
            <button className="btn btn-sm btn-ghost" onClick={() => setFilter({ estado: "", sector: "" })} style={{ alignSelf: "flex-end", marginBottom: 1 }}><Icon name="x" size={11}/> Limpiar</button>
            <span className="count">{filtered.length} proyectos</span>
          </div>

          <div className="grid-3">
            {filtered.map(p => <ProjectCard key={p.id} p={p}/>)}
          </div>
        </>
      )}

      {tab === "ficha" && <ProjectDetail/>}
      {tab === "intereses" && <InteresesSeguimiento/>}
      {tab === "moderacion" && <Moderacion/>}
    </div>
  );
}

function ProjectCard({ p }) {
  return (
    <div className="card" style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ height: 100, background: `linear-gradient(135deg, var(--c-primary-50), #fff)`, position: "relative", display: "flex", alignItems: "center", justifyContent: "center", borderBottom: "1px solid var(--c-line)" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--c-primary)", letterSpacing: "0.08em" }}>{p.id.toUpperCase()} · {p.sector.toUpperCase()}</div>
        <div style={{ position: "absolute", top: 10, right: 10 }}>
          <span className={`chip ${p.estado === "financiado" ? "success" : p.estado === "aprobado" ? "info" : p.estado === "revisión" ? "warn" : ""}`}>{p.estado}</span>
        </div>
        <div style={{ position: "absolute", top: 10, left: 10 }}>
          <span className="chip" style={{ background: "#fff" }}><Icon name={p.visibilidad === "publico" ? "eye" : "shield"} size={10}/> {p.visibilidad}</span>
        </div>
      </div>
      <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
        <div>
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 15, fontWeight: 600, lineHeight: 1.3 }}>{p.titulo}</div>
          <div style={{ fontSize: 11, color: "var(--c-ink-4)", marginTop: 2 }}>por <b>{p.actor}</b></div>
        </div>
        <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
          <span className="chip">{p.sector}</span>
          <span className="chip">{p.etapa}</span>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--c-ink-3)", lineHeight: 1.4 }}>
          <b style={{ color: "var(--c-ink-2)" }}>Necesita:</b> {p.necesita}
        </div>
        <div style={{ marginTop: "auto", display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 10, borderTop: "1px solid var(--c-line-2)" }}>
          <span style={{ fontSize: 11, color: "var(--c-ink-4)" }}>
            <Icon name="users" size={10}/> {p.interesados} interesados
          </span>
          <button className="btn btn-sm btn-primary">Expresar interés</button>
        </div>
      </div>
    </div>
  );
}

function ProjectDetail() {
  const p = window.PROYECTOS[2]; // Pacífico fintech
  return (
    <div className="grid-2">
      <div className="card">
        <div className="card-head">
          <h3>Ficha completa</h3>
          <span className="chip success">Publicado · {p.estado}</span>
        </div>
        <div className="card-body">
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 24, fontWeight: 600, marginBottom: 4 }}>{p.titulo}</div>
          <div style={{ fontSize: 12, color: "var(--c-ink-4)", marginBottom: 18 }}>por <b>{p.actor}</b> · publicado {p.fecha}</div>

          <FichaBlock label="Problema">
            En Colombia, 47% de los trabajadores informales carecen de historial crediticio, lo cual los excluye del sistema financiero formal. Esta brecha limita el desarrollo económico de 11.4M de personas.
          </FichaBlock>
          <FichaBlock label="Solución">
            Plataforma de scoring crediticio basada en data alternativa: comportamiento de pago de servicios públicos, patrones de remesas, actividad transaccional móvil y validación de identidad biométrica.
          </FichaBlock>
          <FichaBlock label="Mercado objetivo">
            Personas y micronegocios informales en Colombia (11.4M), Perú (8.2M) y Ecuador (4.1M). TAM ~$24B USD en créditos no atendidos por banca tradicional.
          </FichaBlock>
          <FichaBlock label="Equipo">
            <div style={{ display: "flex", gap: 16, marginTop: 6 }}>
              {[
                { n: "Andrés F. Lozano", r: "CEO · 12 años banca digital" },
                { n: "Camila Restrepo P.", r: "CTO · Ex-Tech Lead Bancolombia" },
                { n: "Mauricio Tovar L.", r: "Asesor · Banco República" },
              ].map(m => (
                <div key={m.n} style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 11.5 }}>
                  <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--c-primary)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600 }}>
                    {m.n.split(" ").map(x => x[0]).slice(0, 2).join("")}
                  </div>
                  <div>
                    <div style={{ fontWeight: 500 }}>{m.n}</div>
                    <div style={{ fontSize: 10, color: "var(--c-ink-4)" }}>{m.r}</div>
                  </div>
                </div>
              ))}
            </div>
          </FichaBlock>
          <FichaBlock label="Tracción">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 6 }}>
              <TractionStat label="Usuarios activos" v="142K" delta="+18% MoM"/>
              <TractionStat label="MRR" v="$340K" delta="+22% MoM"/>
              <TractionStat label="NPS" v="64"/>
              <TractionStat label="Default rate" v="3.8%" delta="-0.4 pp"/>
            </div>
          </FichaBlock>
          <FichaBlock label="Necesidad / Aliados">
            <ul style={{ margin: 0, paddingLeft: 16, fontSize: 12.5, lineHeight: 1.5, color: "var(--c-ink-2)" }}>
              <li>Capital Serie B · USD $8M para expansión Perú + Ecuador</li>
              <li>Alianzas con 2 bancos regionales para colocación</li>
              <li>Asesoría regulatoria multi-país</li>
            </ul>
          </FichaBlock>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div className="card">
          <div className="card-head"><h3>Control de visibilidad</h3></div>
          <div className="card-body">
            <div style={{ fontSize: 11, color: "var(--c-ink-4)", marginBottom: 8 }}>El publicador define qué actores pueden ver esta ficha:</div>
            {[
              { l: "Administradores Econexa", on: true, mand: true },
              { l: "Inversionistas verificados", on: true },
              { l: "Corporativos miembros", on: true },
              { l: "Aliados institucionales", on: true },
              { l: "Mentores certificados", on: false },
              { l: "Comunidad pública", on: false },
            ].map((opt, i) => (
              <label key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "7px 0", borderBottom: "1px solid var(--c-line-2)", fontSize: 12 }}>
                <span>{opt.l} {opt.mand && <span style={{ fontSize: 9, color: "var(--c-ink-5)" }}>(siempre)</span>}</span>
                <input type="checkbox" defaultChecked={opt.on} disabled={opt.mand}/>
              </label>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Pipeline · expresiones de interés</h3><span className="chip info">{p.interesados}</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {[
              { actor: "Capital Andino Ventures", etapa: "Reunión agendada", fecha: "30-may", color: "var(--c-success)" },
              { actor: "Ángeles del Caribe", etapa: "Due diligence", fecha: "22-may", color: "var(--c-primary)" },
              { actor: "Founderlist LATAM", etapa: "Material enviado", fecha: "20-may", color: "var(--c-accent)" },
              { actor: "Grupo Energía Norte", etapa: "Carta interés", fecha: "18-may", color: "var(--c-ink-4)" },
              { actor: "Inverandes Capital", etapa: "Carta interés", fecha: "16-may", color: "var(--c-ink-4)" },
            ].map((i, idx) => (
              <div key={idx} style={{ padding: "10px 14px", borderBottom: "1px solid var(--c-line-2)", display: "flex", alignItems: "center", gap: 10, fontSize: 12 }}>
                <span style={{ width: 6, height: 6, background: i.color, borderRadius: "50%" }}/>
                <span style={{ fontWeight: 500, flex: 1 }}>{i.actor}</span>
                <span style={{ fontSize: 10.5, color: "var(--c-ink-4)" }}>{i.etapa}</span>
                <span className="mono" style={{ fontSize: 10, color: "var(--c-ink-5)" }}>{i.fecha}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function FichaBlock({ label, children }) {
  return (
    <div style={{ marginBottom: 16, paddingBottom: 14, borderBottom: "1px solid var(--c-line-2)" }}>
      <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--c-primary)", fontWeight: 600, marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--c-ink-2)" }}>{children}</div>
    </div>
  );
}

function TractionStat({ label, v, delta }) {
  return (
    <div style={{ padding: 10, background: "var(--c-bg)", borderRadius: 6 }}>
      <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--c-ink-5)" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-serif)", fontSize: 18, fontWeight: 600, marginTop: 2 }}>{v}</div>
      {delta && <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--c-success)" }}>{delta}</div>}
    </div>
  );
}

function InteresesSeguimiento() {
  return (
    <div className="card">
      <div className="card-head"><h3>Seguimiento de expresiones de interés · efectividad del componente</h3></div>
      <table className="data">
        <thead><tr><th>Proyecto</th><th>Inversionista / aliado</th><th>Etapa</th><th>Tipo de interés</th><th className="num">Días en etapa</th><th className="num">Probabilidad</th></tr></thead>
        <tbody>
          {[
            { p: "Crédito Móvil", i: "Capital Andino Ventures", e: "Reunión agendada", t: "Inversión", d: 2, prob: 78 },
            { p: "AgroPredict", i: "Ángeles del Caribe", e: "Due diligence", t: "Inversión", d: 8, prob: 62 },
            { p: "AgroPredict", i: "Capital Andino Ventures", e: "Carta interés", t: "Inversión", d: 14, prob: 45 },
            { p: "TriajeIA", i: "Grupo Energía Norte", e: "Piloto en evaluación", t: "Alianza", d: 21, prob: 58 },
            { p: "CloudSoberano", i: "Capital Andino Ventures", e: "Material enviado", t: "Inversión", d: 4, prob: 71 },
            { p: "Wayuu Marketplace", i: "Founderlist LATAM", e: "Carta interés", t: "Inversión", d: 11, prob: 38 },
            { p: "DronAndes", i: "Corp. Innova Pacífico", e: "Cofinanciación gestionada", t: "Subvención", d: 6, prob: 84 },
          ].map((r, i) => (
            <tr key={i}>
              <td><span className="cell-strong">{r.p}</span></td>
              <td>{r.i}</td>
              <td><span className="chip info">{r.e}</span></td>
              <td>{r.t}</td>
              <td className="num mono">{r.d}d</td>
              <td className="num">
                <div style={{ display: "flex", alignItems: "center", gap: 8, justifyContent: "flex-end" }}>
                  <div className="bar" style={{ width: 60 }}><div className="fill success" style={{ width: `${r.prob}%` }}/></div>
                  <span className="mono" style={{ width: 30, textAlign: "right" }}>{r.prob}%</span>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function Moderacion() {
  const t = useToast();
  const [pending, setPending] = useState([
    { id: "MP-101", titulo: "FinSalud — Pagos médicos digitales", actor: "Bioandes Salud Digital", motivo: "Validación de equipo y tracción", fecha: "2026-05-26 11:42" },
    { id: "MP-102", titulo: "EduRural Conecta", actor: "Caribe Edutech", motivo: "Verificación financiera", fecha: "2026-05-25 18:12" },
    { id: "MP-103", titulo: "AgroData Quindío", actor: "Cafetera Analytics", motivo: "Pendiente firma representante legal", fecha: "2026-05-25 09:08" },
    { id: "MP-104", titulo: "Bucara Compute", actor: "Bucara Cloud", motivo: "Ajustes en sección de necesidades", fecha: "2026-05-24 16:38" },
  ]);
  return (
    <div className="card">
      <div className="card-head"><h3>Proyectos esperando aprobación del administrador</h3><span className="chip warn">{pending.length} pendientes</span></div>
      <div className="card-body" style={{ padding: 0 }}>
        {pending.map(p => (
          <div key={p.id} style={{ padding: 14, borderBottom: "1px solid var(--c-line-2)", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center" }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--c-ink-5)", background: "var(--c-line-2)", padding: "4px 8px", borderRadius: 4 }}>{p.id}</div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{p.titulo}</div>
              <div style={{ fontSize: 11, color: "var(--c-ink-4)" }}>{p.actor} · {p.fecha}</div>
              <div style={{ fontSize: 11.5, color: "var(--c-ink-3)", marginTop: 4 }}>Motivo: {p.motivo}</div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn btn-sm" onClick={() => { setPending(pending.filter(x => x.id !== p.id)); t.push("Solicitud devuelta al autor", "info"); }}><Icon name="edit" size={11}/> Pedir cambios</button>
              <button className="btn btn-sm" onClick={() => { setPending(pending.filter(x => x.id !== p.id)); t.push("Proyecto rechazado", "info"); }} style={{ color: "var(--c-danger)" }}><Icon name="x" size={11}/> Rechazar</button>
              <button className="btn btn-sm btn-primary" onClick={() => { setPending(pending.filter(x => x.id !== p.id)); t.push("Proyecto aprobado y publicado", "success"); }}><Icon name="check" size={11}/> Aprobar</button>
            </div>
          </div>
        ))}
        {pending.length === 0 && <div style={{ padding: 40, textAlign: "center", color: "var(--c-ink-5)" }}>Sin proyectos por moderar.</div>}
      </div>
    </div>
  );
}

window.Proyectos = Proyectos;