/* 2.0 — Dashboard (hero) */

function Dashboard({ role, onNav }) {
  if (role === "emprendedor") return <DashboardEmprendedor onNav={onNav}/>;
  if (role === "inversionista") return <DashboardInversionista onNav={onNav}/>;
  return <DashboardAdmin onNav={onNav}/>;
}

function DashboardAdmin({ onNav }) {
  const K = window.KPIS;
  const trendCaracterizados = [4120, 4480, 4940, 5310, 5840, 6210, 6580, 6890, 7075];
  const trendConexiones = [780, 902, 1010, 1138, 1245, 1320, 1384, 1410, 1437];
  const trendDiagnosticos = [42, 48, 51, 55, 60, 63, 65, 67, 68];
  const trendInversion = [3.2, 4.8, 6.1, 7.4, 9.8, 11.2, 12.8, 13.9, 14.8];

  return (
    <div className="page" data-screen-label="01 Dashboard Admin">
      <div className="page-head">
        <div>
          <div className="meta">PANEL DE GOBERNANZA · COHORTE 2026-I · ACTUALIZADO HACE 2 MIN</div>
          <h1>Visión general del ecosistema</h1>
          <div className="sub">Indicadores agregados de caracterización, diagnósticos, articulación y resultados del programa nacional de innovación digital.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="filter" size={13}/> Cohorte · 2026-I</button>
          <button className="btn"><Icon name="map" size={13}/> Todo el país</button>
          <button className="btn btn-primary"><Icon name="download" size={13}/> Exportar reporte</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid-kpis">
        <KpiTile label="Actores caracterizados" value="7,075" delta="+12.4%" trend={trendCaracterizados}
          sub="Meta cohorte: 8,000 · 88%" progress={88}/>
        <KpiTile label="Diagnósticos finalizados" value="68.2%" delta="+4.1 pp" trend={trendDiagnosticos}
          sub="4,824 de 7,075 actores"/>
        <KpiTile label="Conexiones activas" value="1,437" delta="+23.1%" trend={trendConexiones}
          sub="184 generadas este mes"/>
        <KpiTile label="Inversión gestionada" value="$14.8M" delta="+6.9%" trend={trendInversion} accent
          sub="USD · YTD · +$1.2M este mes"/>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        {/* Tendencia */}
        <div className="card">
          <div className="card-head">
            <h3>Caracterización & conexiones · últimos 9 meses</h3>
            <div className="hint flex gap-12">
              <span className="flex items-center gap-8"><span style={{ width: 10, height: 2, background: "var(--c-primary)", display: "inline-block" }}/> Caracterizados</span>
              <span className="flex items-center gap-8"><span style={{ width: 10, height: 2, background: "var(--c-accent)", display: "inline-block" }}/> Conexiones</span>
            </div>
          </div>
          <div className="card-body">
            <LineChart
              series={[
                { values: trendCaracterizados.map(v => v / 10), color: "#1a3a6c" },
                { values: trendConexiones, color: "#c97a16" },
              ]}
              xLabels={["Sep","Oct","Nov","Dic","Ene","Feb","Mar","Abr","May"]}
              width={620}
              height={220}/>
          </div>
        </div>

        {/* Mix por tipo de actor */}
        <div className="card">
          <div className="card-head">
            <h3>Mix por tipo de actor</h3>
            <div className="hint">7,075 totales</div>
          </div>
          <div className="card-body" style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <Donut
              size={140}
              thickness={22}
              centerLabel="7,075"
              centerSub="actores"
              segments={window.TIPOS_ACTOR.slice(0, 8).map(t => ({ value: t.count, color: t.color }))}/>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 5, fontSize: 11.5 }}>
              {window.TIPOS_ACTOR.slice(0, 6).map(t => (
                <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ width: 8, height: 8, background: t.color, borderRadius: 2 }}/>
                  <span style={{ color: "var(--c-ink-2)", flex: 1 }}>{t.label}</span>
                  <span className="mono" style={{ color: "var(--c-ink-4)" }}>{t.count.toLocaleString()}</span>
                </div>
              ))}
              <div style={{ fontSize: 10.5, color: "var(--c-ink-5)", marginTop: 2 }}>+ {window.TIPOS_ACTOR.length - 6} categorías más</div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        {/* Distribución regional */}
        <div className="card">
          <div className="card-head">
            <h3>Distribución regional · top 8 departamentos</h3>
            <button className="btn btn-sm btn-ghost" onClick={() => onNav("caracterizacion")}>Ver mapa completo <Icon name="chev_r" size={11}/></button>
          </div>
          <div className="card-body">
            <HBarChart
              data={window.DEPARTAMENTOS.slice(0, 8).map(d => ({
                label: d.name,
                value: d.actores,
                color: d.region === "Andina" ? "#1a3a6c" :
                       d.region === "Caribe" ? "#c97a16" :
                       d.region === "Pacífica" ? "#1b7a4d" : "#5b3f9e"
              }))}
              format={v => v.toLocaleString()}/>
            <div style={{ display: "flex", gap: 14, marginTop: 14, fontSize: 11, color: "var(--c-ink-4)" }}>
              <Legend swatch="#1a3a6c" label="Andina"/>
              <Legend swatch="#c97a16" label="Caribe"/>
              <Legend swatch="#1b7a4d" label="Pacífica"/>
              <Legend swatch="#5b3f9e" label="Orinoquía/Amazonía"/>
            </div>
          </div>
        </div>

        {/* Alertas / pendientes */}
        <div className="card">
          <div className="card-head">
            <h3>Pendientes operativos</h3>
            <span className="chip warn"><span className="dot"/> 7 ítems</span>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <PendingItem icon="bank" tone="warn"
              title="11 proyectos esperan aprobación"
              detail="Banco de Proyectos · Revisión > 48h"
              cta="Revisar" onClick={() => onNav("proyectos")}/>
            <PendingItem icon="clipboard" tone="info"
              title="184 diagnósticos sin completar"
              detail="Línea base 2026-I · Recordatorio sugerido"
              cta="Enviar" onClick={() => onNav("diagnosticos")}/>
            <PendingItem icon="calendar" tone="info"
              title="Demo Day Bogotá · 12-jun"
              detail="187/240 inscritos · 53 cupos disponibles"
              cta="Gestionar" onClick={() => onNav("eventos")}/>
            <PendingItem icon="users" tone="success"
              title="14 solicitudes de conexión nuevas"
              detail="Hoy · 8 mentorías, 4 alianzas, 2 inversión"
              cta="Ver" onClick={() => onNav("networking")}/>
            <PendingItem icon="shield" tone="warn"
              title="Auditoría · 3 acciones inusuales"
              detail="Exportaciones masivas fuera de horario"
              cta="Auditar" onClick={() => onNav("auditoria")}/>
          </div>
        </div>
      </div>

      {/* Actividad reciente */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <h3>Actividad reciente del ecosistema</h3>
          <div className="hint">Últimas 24 horas</div>
        </div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="data">
            <thead>
              <tr>
                <th>Hora</th>
                <th>Actor</th>
                <th>Acción</th>
                <th>Detalle</th>
                <th>Tipo</th>
              </tr>
            </thead>
            <tbody>
              {window.AUDITORIA.slice(0, 7).map((a, i) => (
                <tr key={i}>
                  <td className="mono" style={{ color: "var(--c-ink-4)" }}>{a.ts.slice(11)}</td>
                  <td><span className="cell-strong">{a.usuario}</span></td>
                  <td>{a.accion}</td>
                  <td className="muted">{a.detalle}</td>
                  <td><span className="chip">{a.rol}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function KpiTile({ label, value, delta, sub, trend, accent, progress }) {
  const pos = !delta || !delta.startsWith("-");
  return (
    <div className="kpi">
      <div className="label">{label}</div>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
        <div className="value" style={accent ? { color: "var(--c-accent)" } : null}>{value}</div>
        {trend && <Sparkline values={trend} color={accent ? "#c97a16" : "#1a3a6c"} width={70} height={24}/>}
      </div>
      <div className="sub">
        {delta && <span className={`delta ${pos ? "pos" : "neg"}`}>{pos ? "▲" : "▼"} {delta}</span>}
        <span>·</span>
        <span>{sub}</span>
      </div>
      {progress != null && (
        <div className="bar" style={{ marginTop: 4 }}>
          <div className={`fill ${accent ? "accent" : ""}`} style={{ width: `${progress}%` }}/>
        </div>
      )}
    </div>
  );
}

function Legend({ swatch, label }) {
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
    <span style={{ width: 8, height: 8, background: swatch, borderRadius: 2 }}/>{label}
  </span>;
}

function PendingItem({ icon, tone, title, detail, cta, onClick }) {
  const toneBg = { warn: "var(--c-warning-50)", info: "var(--c-primary-50)", success: "var(--c-success-50)" }[tone];
  const toneFg = { warn: "var(--c-warning)", info: "var(--c-primary)", success: "var(--c-success)" }[tone];
  return (
    <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--c-line-2)", display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{ width: 32, height: 32, borderRadius: 6, background: toneBg, color: toneFg, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={icon} size={15}/>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--c-ink)" }}>{title}</div>
        <div style={{ fontSize: 11, color: "var(--c-ink-4)" }}>{detail}</div>
      </div>
      <button className="btn btn-sm" onClick={onClick}>{cta} <Icon name="chev_r" size={10}/></button>
    </div>
  );
}

// ───── Emprendedor ─────
function DashboardEmprendedor({ onNav }) {
  return (
    <div className="page" data-screen-label="01 Dashboard Emprendedor">
      <div className="page-head">
        <div>
          <div className="meta">MI PERFIL · MERCADIA LOGÍSTICA · STARTUP · CRECIMIENTO</div>
          <h1>Bienvenida, Juliana</h1>
          <div className="sub">Tu hoja de ruta personalizada, conexiones recientes y oportunidades calificadas para Mercadia Logística.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="edit" size={13}/> Editar perfil</button>
          <button className="btn btn-primary"><Icon name="upload" size={13}/> Publicar proyecto</button>
        </div>
      </div>

      <div className="grid-kpis">
        <KpiTile label="Madurez digital" value="3.4 / 5" sub="+1.3 vs línea base" delta="+1.3 pts"/>
        <KpiTile label="Conexiones activas" value="47" sub="3 nuevas esta semana" delta="+3"/>
        <KpiTile label="Horas de mentoría" value="18" sub="con 4 mentores · este trimestre"/>
        <KpiTile label="Interés en proyecto" value="14" sub="inversionistas · AgroPredict" accent/>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-head"><h3>Tu hoja de ruta · 2026-I</h3><span className="chip success"><span className="dot"/> En progreso</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            <RoadStep done={true} title="Diagnóstico de madurez digital" detail="Completado 12-mar · 2.1/5 línea base" />
            <RoadStep done={true} title="Caracterización completa de perfil" detail="100% · 24 campos verificados" />
            <RoadStep done={true} title="Sesión de mentoría · Producto" detail="Alma L. Restrepo · 02-abr · 60min" />
            <RoadStep current={true} title="Validación de modelo financiero" detail="Plantilla SaaS · sesión agendada con S. Ríos" />
            <RoadStep title="Conexión con 3 inversionistas Serie A" detail="2/3 reuniones realizadas" />
            <RoadStep title="Diagnóstico de cierre (ex-post)" detail="Pendiente · ventana jun-jul" />
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Oportunidades para ti</h3><div className="hint">match ≥ 80%</div></div>
          <div className="card-body" style={{ padding: 0 }}>
            <OpportunityCard match={94} title="Demo Day Bogotá 2026-I" tag="Evento" detail="12-jun · 60 inversionistas registrados" onClick={() => onNav("eventos")}/>
            <OpportunityCard match={88} title="Capital Andino Ventures" tag="Inversionista" detail="Cheques 200K-2M USD · enfoque LogTech" onClick={() => onNav("networking")}/>
            <OpportunityCard match={84} title="Grupo Energía Norte · reto IoT" tag="Innovación abierta" detail="Piloto remunerado · vence 28-jun" onClick={() => onNav("proyectos")}/>
            <OpportunityCard match={81} title="Taller · Pitch para inversionistas" tag="Formación" detail="28-may · 2h · virtual" onClick={() => onNav("eventos")}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function RoadStep({ done, current, title, detail }) {
  return (
    <div style={{ display: "flex", gap: 12, padding: "12px 16px", borderBottom: "1px solid var(--c-line-2)" }}>
      <div style={{
        width: 22, height: 22, borderRadius: "50%",
        background: done ? "var(--c-success)" : current ? "#fff" : "#fff",
        border: done ? "none" : current ? "2px solid var(--c-primary)" : "1.5px dashed var(--c-line)",
        color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0
      }}>
        {done && <Icon name="check" size={13}/>}
        {current && <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--c-primary)" }}/>}
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, fontWeight: current ? 600 : 500, color: done ? "var(--c-ink-3)" : "var(--c-ink)" }}>{title}</div>
        <div style={{ fontSize: 11, color: "var(--c-ink-4)" }}>{detail}</div>
      </div>
      {current && <span className="chip info">Activo</span>}
    </div>
  );
}

function OpportunityCard({ match, title, tag, detail, onClick }) {
  return (
    <div style={{ display: "flex", gap: 12, padding: "12px 16px", borderBottom: "1px solid var(--c-line-2)", alignItems: "center", cursor: "pointer" }} onClick={onClick}>
      <div style={{
        minWidth: 44, padding: "4px 8px", borderRadius: 6,
        background: "var(--c-primary-50)", color: "var(--c-primary)",
        fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, textAlign: "center"
      }}>{match}%</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--c-ink)" }}>{title}</div>
        <div style={{ fontSize: 11, color: "var(--c-ink-4)" }}>
          <span className="chip" style={{ marginRight: 6 }}>{tag}</span>
          {detail}
        </div>
      </div>
      <Icon name="chev_r" size={14}/>
    </div>
  );
}

// ───── Inversionista ─────
function DashboardInversionista({ onNav }) {
  return (
    <div className="page" data-screen-label="01 Dashboard Inversionista">
      <div className="page-head">
        <div>
          <div className="meta">CAPITAL ANDINO VENTURES · FONDO · ÁNGEL Y SEMILLA</div>
          <h1>Pipeline & oportunidades de inversión</h1>
          <div className="sub">Proyectos calificados según tus tesis (Fintech, AgriTech, IoT industrial · Andina y Caribe · etapas Pre-seed a Serie A).</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="filter" size={13}/> Tesis activa</button>
          <button className="btn btn-primary"><Icon name="bank" size={13}/> Explorar banco</button>
        </div>
      </div>

      <div className="grid-kpis">
        <KpiTile label="Proyectos en pipeline" value="47" sub="14 calificados esta semana" delta="+14"/>
        <KpiTile label="Reuniones agendadas" value="8" sub="próximos 14 días"/>
        <KpiTile label="Inversiones cerradas" value="$3.4M" sub="USD · YTD · 4 rondas" accent delta="+$1.2M"/>
        <KpiTile label="Match promedio" value="78%" sub="ranking tesis Q2"/>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-head"><h3>Proyectos recomendados · match alto</h3><div className="hint">algoritmo de matching · tesis Q2</div></div>
          <div className="card-body" style={{ padding: 0 }}>
            <OpportunityCard match={96} title="Crédito Móvil — Scoring alternativo" tag="Fintech" detail="Pacífico Fintech · Serie B · $8M" onClick={() => onNav("proyectos")}/>
            <OpportunityCard match={89} title="AgroPredict — IA cosechas" tag="AgriTech" detail="Cafetera Analytics · Seed · $400K" onClick={() => onNav("proyectos")}/>
            <OpportunityCard match={82} title="CloudSoberano" tag="Cloud" detail="Bucara Cloud · Crecimiento · $2.5M" onClick={() => onNav("proyectos")}/>
            <OpportunityCard match={78} title="TriajeIA — Salud digital" tag="HealthTech" detail="Bioandes · Seed · $600K" onClick={() => onNav("proyectos")}/>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Tu tesis de inversión</h3><button className="btn btn-sm btn-ghost"><Icon name="edit" size={11}/> Editar</button></div>
          <div className="card-body">
            <ThesisRow label="Sectores" tags={["Fintech", "AgriTech", "IoT industrial", "LogTech"]}/>
            <ThesisRow label="Etapas" tags={["Pre-seed", "Seed", "Serie A"]}/>
            <ThesisRow label="Ticket" tags={["$200K – $2M USD"]}/>
            <ThesisRow label="Geografía" tags={["Región Andina", "Región Caribe"]}/>
            <ThesisRow label="Tracción mínima" tags={["MRR ≥ $20K USD", "Equipo ≥ 4"]}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function ThesisRow({ label, tags }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 12, padding: "8px 0", borderBottom: "1px solid var(--c-line-2)" }}>
      <div style={{ fontSize: 11, color: "var(--c-ink-4)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, paddingTop: 4 }}>{label}</div>
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
        {tags.map(t => <span key={t} className="chip">{t}</span>)}
      </div>
    </div>
  );
}

// Expose shared helpers used in other module files
window.Dashboard = Dashboard;
window.KpiTile = KpiTile;
window.Legend = Legend;