/* Auditoría — Registro de acciones */

function Auditoria({ role }) {
  const [filter, setFilter] = useState({ rol: "", accion: "", q: "" });
  const [range, setRange] = useState("24h");

  // Build extended audit log
  const extended = useMemo(() => {
    const base = [...window.AUDITORIA];
    // Generate more synthetic entries
    const actions = ["Inició sesión", "Cerró sesión", "Actualizó perfil", "Aprobó proyecto", "Rechazó proyecto", "Envió mensaje", "Aceptó conexión", "Rechazó conexión", "Exportó listado", "Completó diagnóstico", "Editó diagnóstico", "Publicó proyecto", "Publicó evento", "Subió recurso", "Configuró convocatoria"];
    const roles = ["Administrador", "Emprendedor", "Startup", "Inversionista", "Mentor", "MiPyme", "Cámara", "Academia"];
    const users = ["admin@econexa.gov.co", "j.restrepo@mercadia.co", "team@cafetera.ai", "invest@capandino.vc", "alma@mentoring.co", "hub@ccquindio.org", "innovacion@uba.edu.co", "contact@bucaracloud.co", "info@bioandes.co", "sebas@rios.expert"];
    const details = ["Campo: empleados, ingresos", "Proyecto p07 · Wayuu", "Mentoría · a02 Bioandes · 45min", "Actores · 1284 registros · XLSX", "Solicitud de a14 Grupo Energía", "Demo Day · 12-jun", "d2 · Madurez Digital cierre", "Reglas: madurez≥4 ∧ sector=Fintech", "p04 · Aulas Caribe", "SSO · MFA exitoso", "Convenio académico · UBA"];
    for (let i = 0; i < 18; i++) {
      const h = 13 - Math.floor(i / 4);
      const m = String(Math.floor(Math.random() * 60)).padStart(2, "0");
      const s = String(Math.floor(Math.random() * 60)).padStart(2, "0");
      base.push({
        ts: `2026-05-26 ${String(h).padStart(2, "0")}:${m}:${s}`,
        usuario: users[Math.floor(Math.random() * users.length)],
        rol: roles[Math.floor(Math.random() * roles.length)],
        accion: actions[Math.floor(Math.random() * actions.length)],
        detalle: details[Math.floor(Math.random() * details.length)],
        ip: `${Math.floor(Math.random() * 200)}.${Math.floor(Math.random() * 200)}.x.x`
      });
    }
    return base.sort((a, b) => b.ts.localeCompare(a.ts));
  }, []);

  const filtered = extended.filter(a => {
    if (filter.rol && a.rol !== filter.rol) return false;
    if (filter.accion && !a.accion.toLowerCase().includes(filter.accion.toLowerCase())) return false;
    if (filter.q && !(a.usuario.toLowerCase().includes(filter.q.toLowerCase()) || a.detalle.toLowerCase().includes(filter.q.toLowerCase()))) return false;
    return true;
  });

  const accionesPorRol = useMemo(() => {
    const counts = {};
    extended.forEach(a => { counts[a.rol] = (counts[a.rol] || 0) + 1; });
    return Object.entries(counts).sort((a, b) => b[1] - a[1]);
  }, [extended]);

  return (
    <div className="page" data-screen-label="Auditoría">
      <div className="page-head">
        <div>
          <div className="meta">REGISTRO DE ACCIONES · TRAZABILIDAD COMPLETA</div>
          <h1>Auditoría</h1>
          <div className="sub">Registro inmutable de todas las acciones realizadas en la plataforma. Cada evento incluye fecha, hora, usuario, rol, acción y detalle. Cumple políticas de gobernanza de datos y Ley 1581 de 2012.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="download" size={13}/> CSV ({filtered.length})</button>
          <button className="btn"><Icon name="download" size={13}/> PDF firmado</button>
        </div>
      </div>

      <div className="grid-kpis">
        <KpiTile label="Eventos registrados (24h)" value={extended.length.toString()} sub="184 usuarios activos hoy" delta="+8%"/>
        <KpiTile label="Acciones críticas" value="14" sub="Aprobaciones, exportaciones, ediciones" delta="+2"/>
        <KpiTile label="Exportaciones de datos" value="7" sub="2 grandes (&gt;1k registros)" accent/>
        <KpiTile label="Anomalías detectadas" value="3" sub="Revisar accesos fuera de horario"/>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card-head"><h3>Distribución de acciones por rol</h3></div>
          <div className="card-body">
            <HBarChart
              data={accionesPorRol.map(([rol, count]) => ({ label: rol, value: count }))}
              format={v => v}/>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Eventos por hora · hoy</h3></div>
          <div className="card-body">
            <LineChart
              series={[{ values: [12, 8, 4, 2, 1, 2, 8, 18, 34, 42, 38, 47, 52, 48, 41, 36, 28, 22, 18, 12, 8, 6, 5, 4], color: "#1a3a6c" }]}
              xLabels={["0","","","","4","","","","8","","","","12","","","","16","","","","20","","","24"]}
              width={620}
              height={180}/>
          </div>
        </div>
      </div>

      <div className="filterbar" style={{ marginBottom: 12 }}>
        <div className="field"><label>Rango</label>
          <select value={range} onChange={e => setRange(e.target.value)}>
            <option value="1h">Última hora</option>
            <option value="24h">Últimas 24h</option>
            <option value="7d">7 días</option>
            <option value="30d">30 días</option>
            <option value="custom">Personalizado</option>
          </select>
        </div>
        <div className="field"><label>Rol</label>
          <select value={filter.rol} onChange={e => setFilter({ ...filter, rol: e.target.value })}>
            <option value="">Todos</option>
            {accionesPorRol.map(([r]) => <option key={r}>{r}</option>)}
          </select>
        </div>
        <div className="field"><label>Acción contiene</label>
          <input value={filter.accion} onChange={e => setFilter({ ...filter, accion: e.target.value })} placeholder="aprobó, exportó…"/>
        </div>
        <div className="field"><label>Buscar</label>
          <input value={filter.q} onChange={e => setFilter({ ...filter, q: e.target.value })} placeholder="usuario, detalle, IP…"/>
        </div>
        <button className="btn btn-sm btn-ghost" onClick={() => setFilter({ rol: "", accion: "", q: "" })} style={{ alignSelf: "flex-end", marginBottom: 1 }}><Icon name="x" size={11}/> Limpiar</button>
        <span className="count">{filtered.length} eventos</span>
      </div>

      <div className="card">
        <table className="data">
          <thead><tr>
            <th>Timestamp</th>
            <th>Usuario</th>
            <th>Rol</th>
            <th>Acción</th>
            <th>Detalle</th>
            <th>IP</th>
            <th>Trazabilidad</th>
          </tr></thead>
          <tbody>
            {filtered.slice(0, 30).map((a, i) => (
              <tr key={i}>
                <td className="mono" style={{ fontSize: 11, color: "var(--c-ink-3)" }}>{a.ts}</td>
                <td><span className="cell-strong">{a.usuario}</span></td>
                <td><span className="chip">{a.rol}</span></td>
                <td>
                  <span style={{ fontWeight: 500 }}>{a.accion}</span>
                  {(a.accion.includes("Exportó") || a.accion.includes("Aprobó") || a.accion.includes("Rechazó")) && <span className="chip warn" style={{ marginLeft: 6, fontSize: 9.5 }}>crítica</span>}
                </td>
                <td className="muted text-xs">{a.detalle}</td>
                <td className="mono text-xs">{a.ip}</td>
                <td><button className="btn btn-sm btn-ghost"><Icon name="eye" size={11}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: 16, padding: 14, background: "var(--c-primary-50)", borderRadius: 8, fontSize: 12, color: "var(--c-ink-3)", display: "flex", gap: 12, alignItems: "flex-start" }}>
        <div style={{ width: 32, height: 32, borderRadius: 6, background: "var(--c-primary)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
          <Icon name="shield" size={16}/>
        </div>
        <div>
          <div style={{ fontWeight: 600, color: "var(--c-primary)", marginBottom: 3 }}>Política de retención y privacidad</div>
          Todos los registros de auditoría se almacenan de forma inmutable por 5 años para cumplir con las políticas institucionales de gobernanza. Los datos personales se anonimizan parcialmente al exportar (IP truncada). Solo los administradores con rol Auditor pueden consultar el log completo. Cumple Ley 1581 de 2012 (Habeas Data) y Decreto 1377 de 2013.
        </div>
      </div>
    </div>
  );
}

window.Auditoria = Auditoria;