/* 2.6 — Eventos, Talleres y Formularios */

function Eventos({ role }) {
  const [tab, setTab] = useState("calendario");
  return (
    <div className="page" data-screen-label="2.6 Eventos">
      <div className="page-head">
        <div>
          <div className="meta">MÓDULO 2.6 · EVENTOS, TALLERES & FORMULARIOS</div>
          <h1>Eventos & talleres</h1>
          <div className="sub">Publicación de eventos presenciales y virtuales, formularios a la medida, notificaciones y seguimiento de asistencia.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="download" size={13}/> Reporte asistencia</button>
          <button className="btn btn-primary"><Icon name="plus" size={13}/> Publicar evento</button>
        </div>
      </div>

      <div className="grid-kpis">
        <KpiTile label="Eventos realizados YTD" value="38" sub="22 presenciales · 16 virtuales"/>
        <KpiTile label="Asistencia total" value="4,218" sub="Promedio 111 por evento" delta="+18%"/>
        <KpiTile label="Satisfacción promedio" value="4.6/5" sub="847 encuestas post-evento" accent/>
        <KpiTile label="Eventos próximos" value="7" sub="Próximos 30 días"/>
      </div>

      <div className="tabs">
        <div className={`tab ${tab === "calendario" ? "active" : ""}`} onClick={() => setTab("calendario")}>Próximos eventos <span className="badge">7</span></div>
        <div className={`tab ${tab === "detalle" ? "active" : ""}`} onClick={() => setTab("detalle")}>Detalle de evento</div>
        <div className={`tab ${tab === "formulario" ? "active" : ""}`} onClick={() => setTab("formulario")}>Formulario a la medida</div>
        <div className={`tab ${tab === "notif" ? "active" : ""}`} onClick={() => setTab("notif")}>Notificaciones</div>
      </div>

      {tab === "calendario" && <Calendario/>}
      {tab === "detalle" && <DetalleEvento/>}
      {tab === "formulario" && <FormBuilder/>}
      {tab === "notif" && <Notificaciones/>}
    </div>
  );
}

function Calendario() {
  return (
    <div className="grid-3">
      {window.EVENTOS.map(e => {
        const pct = Math.round((e.inscritos / e.capacidad) * 100);
        return (
          <div key={e.id} className="card" style={{ display: "flex", flexDirection: "column" }}>
            <div style={{
              padding: 16, color: "#fff",
              background: e.tipo === "Virtual" ? "linear-gradient(135deg, #2563b5, #1a3a6c)" :
                          e.tipo === "Híbrido" ? "linear-gradient(135deg, #7c5a1f, #c97a16)" :
                          "linear-gradient(135deg, #1b7a4d, #0f5a3a)"
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, opacity: 0.85, textTransform: "uppercase", letterSpacing: "0.08em" }}>{e.tipo}</span>
                <span className={`chip ${e.estado === "cerrado" ? "warn" : "success"}`}>{e.estado}</span>
              </div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 17, fontWeight: 600, lineHeight: 1.25, marginBottom: 8 }}>{e.nombre}</div>
              <div style={{ display: "flex", gap: 14, fontSize: 11, opacity: 0.92 }}>
                <span><Icon name="calendar" size={10}/> {e.fecha}</span>
                <span><Icon name="map" size={10}/> {e.ciudad}</span>
              </div>
            </div>
            <div style={{ padding: 14, flex: 1, display: "flex", flexDirection: "column", gap: 10 }}>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5, marginBottom: 4 }}>
                  <span style={{ color: "var(--c-ink-3)" }}>Capacidad</span>
                  <span className="mono"><b>{e.inscritos}</b>/{e.capacidad} · {pct}%</span>
                </div>
                <div className="bar"><div className={`fill ${pct > 90 ? "accent" : "success"}`} style={{ width: `${pct}%` }}/></div>
              </div>
              <div style={{ marginTop: "auto", display: "flex", gap: 6, paddingTop: 10, borderTop: "1px solid var(--c-line-2)" }}>
                <button className="btn btn-sm" style={{ flex: 1, justifyContent: "center" }}><Icon name="eye" size={11}/> Detalle</button>
                <button className="btn btn-sm btn-primary" style={{ flex: 1, justifyContent: "center" }}><Icon name="users" size={11}/> Asistentes</button>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function DetalleEvento() {
  const e = window.EVENTOS[0];
  return (
    <div className="grid-2">
      <div className="card">
        <div className="card-head">
          <h3>Demo Day Cohorte Bogotá 2026-I</h3>
          <span className="chip success"><span className="dot"/> Abierto · {e.inscritos}/{e.capacidad}</span>
        </div>
        <div className="card-body">
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, fontWeight: 600, marginBottom: 4 }}>Demo Day · Cohorte Bogotá 2026-I</div>
          <div style={{ fontSize: 12, color: "var(--c-ink-4)", marginBottom: 18 }}>Encuentro presencial · 12 jun 2026 · Auditorio CCB Chapinero</div>

          <FichaBlock label="Descripción">
            Encuentro de cierre de cohorte donde 18 startups graduadas presentan sus pitches frente a 60 inversionistas, corporativos y aliados estratégicos del ecosistema andino.
          </FichaBlock>
          <FichaBlock label="Agenda">
            <table className="data" style={{ marginTop: 4 }}>
              <tbody>
                {[
                  { h: "08:30", t: "Registro y welcome coffee" },
                  { h: "09:00", t: "Apertura · Resultados del programa 2026-I" },
                  { h: "09:30", t: "Bloque 1 · 6 pitches (LogTech, AgriTech)" },
                  { h: "10:45", t: "Networking & matching guiado" },
                  { h: "11:30", t: "Bloque 2 · 6 pitches (FinTech, HealthTech)" },
                  { h: "12:45", t: "Almuerzo · mesas temáticas con inversionistas" },
                  { h: "14:00", t: "Bloque 3 · 6 pitches (EdTech, IndustryTech)" },
                  { h: "15:15", t: "Panel · Tendencias 2026 en deep tech andino" },
                  { h: "16:00", t: "Cierre y entrega de premios cohorte" },
                ].map((a, i) => (
                  <tr key={i}><td className="mono" style={{ width: 70 }}>{a.h}</td><td>{a.t}</td></tr>
                ))}
              </tbody>
            </table>
          </FichaBlock>
          <FichaBlock label="Requisitos para asistencia">
            <ul style={{ margin: 0, paddingLeft: 16, fontSize: 12.5, lineHeight: 1.6 }}>
              <li>Perfil caracterizado al 100% en Econexa</li>
              <li>Pertenecer a cohorte activa o ser aliado del ecosistema</li>
              <li>Confirmar asistencia con al menos 48h de anticipación</li>
            </ul>
          </FichaBlock>
          <FichaBlock label="Campos a la medida (organizador)">
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              <span className="chip">Sector de interés</span>
              <span className="chip">Requerimientos alimentarios</span>
              <span className="chip">Necesita transporte</span>
              <span className="chip">Pitch o asistente</span>
              <span className="chip">Empresa que representa</span>
            </div>
          </FichaBlock>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div className="card">
          <div className="card-head"><h3>Mix de inscritos</h3></div>
          <div className="card-body">
            <HBarChart data={[
              { label: "Startups", value: 78, color: "#1a3a6c" },
              { label: "Inversionistas", value: 42, color: "#a83a5b" },
              { label: "Corporativos", value: 24, color: "#8b3a3a" },
              { label: "Mentores", value: 18, color: "#b8771a" },
              { label: "Academia", value: 14, color: "#5b3f9e" },
              { label: "Públicos", value: 11, color: "#4a5568" },
            ]} format={v => v}/>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Notificaciones programadas</h3></div>
          <div className="card-body" style={{ padding: 0 }}>
            {[
              { t: "Recordatorio T-7 días", canal: "Email + Push", fecha: "5-jun · 09:00", estado: "programada" },
              { t: "Recordatorio T-48h", canal: "Email", fecha: "10-jun · 09:00", estado: "programada" },
              { t: "Logística (ubicación, agenda)", canal: "Email", fecha: "11-jun · 16:00", estado: "programada" },
              { t: "Encuesta post-evento", canal: "Email + Push", fecha: "12-jun · 18:00", estado: "programada" },
              { t: "Convocatoria inicial", canal: "Email + Plataforma", fecha: "15-may", estado: "enviada" },
            ].map((n, i) => (
              <div key={i} style={{ padding: 11, borderBottom: "1px solid var(--c-line-2)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12 }}>
                <div>
                  <div style={{ fontWeight: 500 }}>{n.t}</div>
                  <div style={{ fontSize: 10.5, color: "var(--c-ink-4)" }}>{n.canal} · {n.fecha}</div>
                </div>
                <span className={`chip ${n.estado === "enviada" ? "success" : "info"}`}>{n.estado}</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 FormBuilder() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 16 }}>
      <div className="card">
        <div className="card-head"><h3>Tipos de campo</h3></div>
        <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {[
            { i: "edit", l: "Texto corto" }, { i: "edit", l: "Párrafo" },
            { i: "check", l: "Opción única" }, { i: "check", l: "Selección múltiple" },
            { i: "calendar", l: "Fecha" }, { i: "users", l: "Asistentes adicionales" },
            { i: "upload", l: "Cargar archivo" }, { i: "check", l: "Aceptar términos" },
          ].map((f, i) => (
            <button key={i} className="btn" style={{ justifyContent: "flex-start", padding: "8px 10px" }}>
              <Icon name={f.i} size={12}/> {f.l}
            </button>
          ))}
        </div>
      </div>
      <div className="card">
        <div className="card-head"><h3>Formulario de registro · Demo Day Bogotá 2026-I</h3><button className="btn btn-sm btn-primary"><Icon name="check" size={11}/> Publicar</button></div>
        <div className="card-body" style={{ background: "var(--c-bg)", padding: 28 }}>
          <div style={{ maxWidth: 600, margin: "0 auto", background: "#fff", padding: 28, borderRadius: 10, border: "1px solid var(--c-line)" }}>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 20, fontWeight: 600, marginBottom: 6 }}>Confirma tu asistencia</div>
            <div style={{ fontSize: 12, color: "var(--c-ink-4)", marginBottom: 18 }}>12 jun 2026 · Bogotá · 187/240 inscritos</div>

            {[
              { l: "Nombre completo", req: true, t: "input" },
              { l: "Organización que representas", req: true, t: "input" },
              { l: "Rol", req: true, t: "select", opts: ["Startup founder", "Inversionista", "Mentor", "Corporativo", "Academia", "Otro"] },
              { l: "Sector de interés", req: false, t: "multi", opts: ["FinTech", "AgriTech", "HealthTech", "LogTech", "EdTech", "Industry 4.0"] },
              { l: "¿Vas a presentar pitch?", req: true, t: "radio", opts: ["Sí, soy parte de cohorte", "No, asisto como observador"] },
              { l: "Restricciones alimentarias", req: false, t: "input" },
              { l: "¿Necesitas transporte desde aeropuerto?", req: false, t: "radio", opts: ["Sí", "No"] },
            ].map((f, i) => (
              <div key={i} style={{ marginBottom: 14 }}>
                <label style={{ display: "block", fontSize: 12, fontWeight: 500, marginBottom: 5 }}>
                  {f.l}{f.req && <span style={{ color: "var(--c-danger)" }}> *</span>}
                </label>
                {f.t === "input" && <input className="input"/>}
                {f.t === "select" && (
                  <select className="select"><option>Selecciona…</option>{f.opts.map(o => <option key={o}>{o}</option>)}</select>
                )}
                {f.t === "radio" && (
                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                    {f.opts.map(o => <label key={o} style={{ display: "flex", gap: 6, fontSize: 12 }}><input type="radio" name={`r-${i}`}/> {o}</label>)}
                  </div>
                )}
                {f.t === "multi" && (
                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                    {f.opts.map(o => <label key={o} style={{ display: "flex", gap: 6, fontSize: 12 }}><input type="checkbox"/> {o}</label>)}
                  </div>
                )}
              </div>
            ))}
            <label style={{ display: "flex", gap: 6, fontSize: 11.5, color: "var(--c-ink-3)", marginBottom: 16 }}>
              <input type="checkbox"/> Acepto la política de tratamiento de datos personales · Ley 1581 de 2012.
            </label>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>Confirmar inscripción</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Notificaciones() {
  return (
    <div className="card">
      <div className="card-head"><h3>Notificaciones enviadas · últimos 30 días</h3><span className="chip info">12,418 envíos</span></div>
      <table className="data">
        <thead><tr><th>Fecha</th><th>Evento / Campaña</th><th>Canal</th><th className="num">Enviados</th><th className="num">Abiertos</th><th className="num">Click</th><th className="num">Confirm.</th></tr></thead>
        <tbody>
          {[
            { f: "2026-05-24", e: "Demo Day Bogotá · Convocatoria", c: "Email + Push", env: 2412, ab: 1842, cl: 718, co: 187 },
            { f: "2026-05-22", e: "Webinar regulatorio fintech", c: "Email", env: 1218, ab: 942, cl: 624, co: 884 },
            { f: "2026-05-20", e: "Hackatón Caribe · Recordatorio", c: "Push", env: 384, ab: 312, cl: 198, co: 150 },
            { f: "2026-05-18", e: "Encuentro Eje Cafetero", c: "Email", env: 718, ab: 542, cl: 248, co: 98 },
            { f: "2026-05-15", e: "Bootcamp IA Salud · Inicio inscripciones", c: "Email + Plataforma", env: 1842, ab: 1402, cl: 624, co: 67 },
            { f: "2026-05-12", e: "Convocatoria capital semilla Caribe", c: "Email", env: 488, ab: 384, cl: 218, co: 64 },
          ].map((r, i) => (
            <tr key={i}>
              <td className="mono">{r.f}</td>
              <td><span className="cell-strong">{r.e}</span></td>
              <td><span className="chip">{r.c}</span></td>
              <td className="num mono">{r.env.toLocaleString()}</td>
              <td className="num mono">{r.ab.toLocaleString()}<div className="cell-sub">{Math.round(r.ab / r.env * 100)}%</div></td>
              <td className="num mono">{r.cl.toLocaleString()}<div className="cell-sub">{Math.round(r.cl / r.env * 100)}%</div></td>
              <td className="num mono" style={{ color: "var(--c-success)", fontWeight: 600 }}>{r.co.toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

window.Eventos = Eventos;