(() => {
  const { useState, useEffect, apiFetch, fmtDate, SC } = window.DC;

  const SERVER_STATE_COLORS = {
    ok: SC.ok,
    warning: "#fbbf24",
    critical: "#fb7185",
    down: SC.error,
  };

  const SITE_STATE_COLORS = {
    ok: SC.ok,
    slow: "#fbbf24",
    down: SC.error,
  };

  const fmtAgo = (value) => {
    if (!value) return "—";
    const diffMs = Math.max(0, Date.now() - new Date(value).getTime());
    const diffMinutes = Math.floor(diffMs / 60000);

    if (diffMinutes < 1) return "hace <1 min";
    if (diffMinutes < 60) return `hace ${diffMinutes} min`;

    const diffHours = Math.floor(diffMinutes / 60);
    if (diffHours < 24) return `hace ${diffHours} h`;

    return `hace ${Math.floor(diffHours / 24)} d`;
  };

  const fmtShortTime = (value) =>
    value
      ? new Date(value).toLocaleTimeString("es-PE", { hour: "2-digit", minute: "2-digit" })
      : "—";

  const lastValue = (values, fallback = 0) =>
    Array.isArray(values) && values.length > 0 ? values[values.length - 1] : fallback;

  function DashboardPill({ tone = "#64748b", children }) {
    return (
      <span
        className="tag"
        style={{
          borderColor: `${tone}55`,
          color: tone,
          background: `${tone}12`,
        }}
      >
        {children}
      </span>
    );
  }

  function SummaryCard({ label, value, tone = "#e2e8f0", meta, helper }) {
    return (
      <div className="dashboard-summary-card">
        <div className="dashboard-summary-label">{label}</div>
        <div className="dashboard-summary-value" style={{ color: tone }}>{value}</div>
        {meta && <div className="dashboard-summary-meta">{meta}</div>}
        {helper && <div className="dashboard-summary-helper">{helper}</div>}
      </div>
    );
  }

  function DashboardTabs({ tabs, activeTab, onChange }) {
    return (
      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-body" style={{ padding: 12 }}>
          <div className="nav-tabs-wrap settings-tabs-wrap internal-tabs-wrap">
            <div className="nav-tabs settings-tabs internal-tabs">
              {tabs.map((tab) => (
                <button
                  key={tab.key}
                  type="button"
                  onClick={() => onChange(tab.key)}
                  className={`nav-tab${activeTab === tab.key ? " active" : ""}`}
                  title={tab.label}
                >
                  <span className="nav-tab-icon" aria-hidden="true">{tab.icon}</span>
                  <span className="nav-tab-text">{tab.label}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  function buildPolyline(values, width, height, padding, maxValue) {
    if (!Array.isArray(values) || values.length === 0) return "";
    if (values.length === 1) {
      const y = height - padding - ((Number(values[0]) || 0) / Math.max(1, maxValue)) * (height - padding * 2);
      return `${padding},${y} ${width - padding},${y}`;
    }

    return values.map((value, index) => {
      const x = padding + (index * (width - padding * 2)) / (values.length - 1);
      const y = height - padding - ((Number(value) || 0) / Math.max(1, maxValue)) * (height - padding * 2);
      return `${x},${y}`;
    }).join(" ");
  }

  function MultiTrendChart({ title, subtitle, labels = [], series = [] }) {
    const width = 640;
    const height = 220;
    const padding = 22;
    const flatValues = series.flatMap((item) => item.values || []);
    const maxValue = Math.max(1, ...flatValues.map((item) => Number(item) || 0));
    const hasData = series.some((item) => Array.isArray(item.values) && item.values.some((value) => Number(value) > 0));
    const lastLabel = labels.length ? fmtShortTime(labels[labels.length - 1]) : "—";
    const firstLabel = labels.length ? fmtShortTime(labels[0]) : "—";

    return (
      <div className="dashboard-chart-card">
        <div className="dashboard-section-head">
          <div>
            <div className="dashboard-section-title">{title}</div>
            {subtitle && <div className="dashboard-section-subtitle">{subtitle}</div>}
          </div>
          <DashboardPill tone="#64748b">{firstLabel} → {lastLabel}</DashboardPill>
        </div>

        <div className="dashboard-chart-shell">
          <svg viewBox={`0 0 ${width} ${height}`} className="dashboard-chart-svg" preserveAspectRatio="none">
            {[0, 0.25, 0.5, 0.75, 1].map((ratio) => {
              const y = padding + ratio * (height - padding * 2);
              return (
                <line
                  key={ratio}
                  x1={padding}
                  x2={width - padding}
                  y1={y}
                  y2={y}
                  stroke="#1e2a3a"
                  strokeDasharray="3 6"
                />
              );
            })}
            {series.map((item) => (
              <polyline
                key={item.key}
                fill="none"
                stroke={item.color}
                strokeWidth="3"
                strokeLinejoin="round"
                strokeLinecap="round"
                points={buildPolyline(item.values || [], width, height, padding, maxValue)}
              />
            ))}
          </svg>
          {!hasData && (
            <div className="dashboard-chart-empty">
              Sin datos suficientes todavía para esta ventana de tiempo.
            </div>
          )}
        </div>

        <div className="dashboard-chart-legend">
          {series.map((item) => {
            const latest = Array.isArray(item.values) && item.values.length > 0 ? item.values[item.values.length - 1] : 0;
            return (
              <div key={item.key} className="dashboard-legend-item">
                <span className="dashboard-legend-dot" style={{ background: item.color }} />
                <span className="dashboard-legend-label">{item.label}</span>
                <strong style={{ color: item.color }}>{item.suffix ? `${latest}${item.suffix}` : latest}</strong>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  function DashboardView({ toast }) {
    const [rangeHours, setRangeHours] = useState(6);
    const [liveMode, setLiveMode] = useState(true);
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState(null);
    const [activeTab, setActiveTab] = useState(() => {
      try {
        return window.localStorage.getItem("dc:tabs:dashboard") || "overview";
      } catch (_error) {
        return "overview";
      }
    });

    const loadDashboard = async (silent = false) => {
      if (!silent) setLoading(true);
      const response = await apiFetch(`/monitor/dashboard?hours=${rangeHours}`);
      if (response.error) {
        if (!silent) toast(response.error || "No se pudo cargar el dashboard", "err");
      } else {
        setData(response);
      }
      if (!silent) setLoading(false);
    };

    useEffect(() => {
      loadDashboard();
    }, [rangeHours]);

    useEffect(() => {
      if (!liveMode) return undefined;
      const intervalId = setInterval(() => loadDashboard(true), 15000);
      return () => clearInterval(intervalId);
    }, [liveMode, rangeHours]);

    const summary = data?.summary || {};
    const trends = data?.trends || {};
    const resourcesTrend = trends.resources || {};
    const sitesTrend = trends.sites || {};
    const activityTrend = trends.activity || {};
    const topSchools = data?.top_problem_schools || [];
    const downServers = data?.down_servers || [];
    const serverMap = data?.server_map || [];
    const incidents = data?.recent_incidents || [];
    const alerts = data?.recent_alerts || [];
    const scheduler = data?.scheduler || {};
    const tabs = [
      { key: "overview", label: "Resumen", icon: "📊" },
      { key: "trends", label: "Tendencias", icon: "📈" },
      { key: "alerts", label: "Alertas", icon: "📣" },
      { key: "servers", label: "Servidores", icon: "🖥" },
    ];

    useEffect(() => {
      if (!tabs.some((tab) => tab.key === activeTab)) {
        setActiveTab("overview");
      }
    }, [activeTab, tabs]);

    useEffect(() => {
      try {
        window.localStorage.setItem("dc:tabs:dashboard", activeTab);
      } catch (_error) {}
    }, [activeTab]);

    return (
      <div className="dashboard-layout">
        <div className="card">
          <div className="card-head">
            <span>📈 Dashboard operativo</span>
            <div className="dashboard-toolbar">
              <div className="dashboard-range-group">
                {[1, 6, 24].map((hours) => (
                  <button
                    key={hours}
                    onClick={() => setRangeHours(hours)}
                    className={`btn btn-ghost btn-sm${rangeHours === hours ? " active-toggle" : ""}`}
                    style={rangeHours === hours ? { borderColor: "#00e5ff", color: "#00e5ff" } : undefined}
                  >
                    {hours}h
                  </button>
                ))}
              </div>
              <button
                onClick={() => setLiveMode((prev) => !prev)}
                className="btn btn-ghost btn-sm"
                style={liveMode ? { borderColor: "#22d3a5", color: "#22d3a5" } : undefined}
              >
                {liveMode ? "En vivo" : "Pausado"}
              </button>
              <button onClick={() => loadDashboard()} disabled={loading} className="btn btn-ghost btn-sm">
                {loading ? "Actualizando..." : "Actualizar"}
              </button>
            </div>
          </div>
          <div className="card-body">
            <div className="alert alert-info" style={{ marginBottom: 14 }}>
              Vista inicial en tiempo real para detectar rápido qué servidor está caído, qué colegios están lentos y cómo evoluciona la salud general. Se refresca sola cada 15 segundos.
            </div>

            <div className="dashboard-status-strip">
              <DashboardPill tone="#22d3ee">Ventana: {rangeHours}h</DashboardPill>
              <DashboardPill tone={liveMode ? SC.ok : "#64748b"}>{liveMode ? "Auto refresh 15s" : "Auto refresh pausado"}</DashboardPill>
              <DashboardPill tone="#64748b">Último snapshot: {summary.last_snapshot_at ? fmtDate(summary.last_snapshot_at) : "—"}</DashboardPill>
              <DashboardPill tone="#64748b">Último check web: {summary.last_site_check_at ? fmtDate(summary.last_site_check_at) : "—"}</DashboardPill>
              <DashboardPill tone={scheduler.enabled ? SC.ok : "#fbbf24"}>{scheduler.enabled ? "Scheduler activo" : "Scheduler inactivo"}</DashboardPill>
            </div>

            <div className="dashboard-summary-grid">
              <SummaryCard
                label="Servidores OK"
                value={`${summary.servers_ok || 0}/${summary.servers_total || 0}`}
                tone={summary.servers_down ? "#fbbf24" : SC.ok}
                meta={`${summary.servers_warning || 0} warning · ${summary.servers_critical || 0} críticos`}
                helper={`${summary.servers_down || 0} con caída visible`}
              />
              <SummaryCard
                label="Colegios sanos"
                value={`${summary.sites_ok || 0}/${summary.sites_total || 0}`}
                tone={(summary.sites_down || 0) > 0 ? "#fbbf24" : SC.ok}
                meta={`${summary.sites_slow || 0} lentos`}
                helper={`${summary.sites_down || 0} caídos o timeout`}
              />
              <SummaryCard
                label="Incidentes abiertos"
                value={summary.active_incidents || 0}
                tone={(summary.critical_incidents || 0) > 0 ? SC.error : (summary.active_incidents || 0) > 0 ? "#fbbf24" : SC.ok}
                meta={`${summary.critical_incidents || 0} críticos`}
                helper="Detectados por monitor y checks"
              />
              <SummaryCard
                label="Promedio CPU"
                value={`${lastValue(resourcesTrend.cpu_avg)}%`}
                tone="#22d3ee"
                meta={`RAM ${lastValue(resourcesTrend.ram_avg)}%`}
                helper={`Disco ${lastValue(resourcesTrend.disk_avg)}%`}
              />
              <SummaryCard
                label="Actividad"
                value={activityTrend.incidents?.reduce((acc, item) => acc + item, 0) || 0}
                tone="#a78bfa"
                meta={`${activityTrend.alerts?.reduce((acc, item) => acc + item, 0) || 0} alertas`}
                helper={`${activityTrend.remediations?.reduce((acc, item) => acc + item, 0) || 0} remediaciones`}
              />
            </div>
          </div>
        </div>

        <DashboardTabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />

        {activeTab === "overview" && (
          <div className="dashboard-focus-grid">
            <div className="card">
              <div className="card-head">
                <span>🏫 Colegios más lentos o caídos</span>
                <span style={{ color: "#94a3b8", fontSize: 11 }}>{topSchools.length} visibles</span>
              </div>
              <div className="card-body">
                <div className="dashboard-list">
                  {topSchools.length === 0 && <div style={{ color: "#94a3b8", fontSize: 12 }}>No hay colegios degradados en el último barrido.</div>}
                  {topSchools.map((site) => {
                    const tone = SITE_STATE_COLORS[site.dashboard_state] || "#94a3b8";
                    return (
                      <div key={`${site.server_id}-${site.domain}`} className="dashboard-row">
                        <div className="dashboard-row-main">
                          <div className="dashboard-row-title" style={{ color: "#22d3ee" }}>{site.domain}</div>
                          <div className="dashboard-row-meta">
                            {site.server_label} · {site.virt_user} · HTTP {site.http_status || 0} · DNS {site.dns_ok ? "ok" : "fail"} · SSL {Number.isFinite(site.ssl_valid_days) ? `${site.ssl_valid_days}d` : "n/d"}
                          </div>
                        </div>
                        <div className="dashboard-row-side">
                          <strong style={{ color: tone }}>{site.response_ms || 0}ms</strong>
                          <DashboardPill tone={tone}>{site.status}</DashboardPill>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            <div className="card">
              <div className="card-head">
                <span>🚨 Servidores en caída o riesgo</span>
                <span style={{ color: "#94a3b8", fontSize: 11 }}>{downServers.length} visibles</span>
              </div>
              <div className="card-body">
                <div className="dashboard-list">
                  {downServers.length === 0 && <div className="alert alert-success">No hay servidores en estado crítico ahora mismo.</div>}
                  {downServers.map((server) => {
                    const tone = SERVER_STATE_COLORS[server.dashboard_state] || "#94a3b8";
                    return (
                      <div key={server.id} className="dashboard-row">
                        <div className="dashboard-row-main">
                          <div className="dashboard-row-title">{server.label}</div>
                          <div className="dashboard-row-meta">
                            {server.host} · {server.down_sites || 0} caídos · {server.slow_sites || 0} lentos · {server.active_incidents || 0} incidentes
                          </div>
                        </div>
                        <div className="dashboard-row-side">
                          <strong style={{ color: tone }}>{server.monitor_status || server.dashboard_state}</strong>
                          <DashboardPill tone={tone}>{server.dashboard_state}</DashboardPill>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === "trends" && (
          <div className="dashboard-chart-grid">
            <MultiTrendChart
              title="Recursos promedio por servidor"
              subtitle="CPU, RAM y Disco agregados de los snapshots recientes"
              labels={resourcesTrend.labels}
              series={[
                { key: "cpu", label: "CPU", color: "#22d3ee", values: resourcesTrend.cpu_avg || [], suffix: "%" },
                { key: "ram", label: "RAM", color: "#c084fc", values: resourcesTrend.ram_avg || [], suffix: "%" },
                { key: "disk", label: "Disco", color: "#22d3a5", values: resourcesTrend.disk_avg || [], suffix: "%" },
              ]}
            />
            <MultiTrendChart
              title="Salud de colegios"
              subtitle="Cantidad de checks web OK, lentos o caídos en la ventana seleccionada"
              labels={sitesTrend.labels}
              series={[
                { key: "ok", label: "OK", color: SITE_STATE_COLORS.ok, values: sitesTrend.ok || [] },
                { key: "slow", label: "Lentos", color: SITE_STATE_COLORS.slow, values: sitesTrend.slow || [] },
                { key: "down", label: "Caídos", color: SITE_STATE_COLORS.down, values: sitesTrend.down || [] },
              ]}
            />
            <MultiTrendChart
              title="Actividad operativa"
              subtitle="Incidentes abiertos, alertas disparadas y remediaciones ejecutadas"
              labels={activityTrend.labels}
              series={[
                { key: "incidents", label: "Incidentes", color: "#fb7185", values: activityTrend.incidents || [] },
                { key: "alerts", label: "Alertas", color: "#fbbf24", values: activityTrend.alerts || [] },
                { key: "remediations", label: "Remediaciones", color: "#22d3ee", values: activityTrend.remediations || [] },
              ]}
            />
          </div>
        )}

        {activeTab === "alerts" && (
          <div className="dashboard-feed-grid">
            <div className="card">
              <div className="card-head">📣 Alertas recientes</div>
              <div className="card-body">
                <div className="dashboard-list">
                  {alerts.length === 0 && <div style={{ color: "#94a3b8", fontSize: 12 }}>Sin alertas recientes.</div>}
                  {alerts.map((alert) => (
                    <div key={alert.id} className="dashboard-row dashboard-row-compact">
                      <div className="dashboard-row-main">
                        <div className="dashboard-row-title">{alert.server_label || `Srv ${alert.server_id}`}</div>
                        <div className="dashboard-row-meta">{fmtAgo(alert.created_at)}</div>
                      </div>
                      <DashboardPill tone={alert.type?.includes("site") ? "#fbbf24" : SC.error}>{alert.type}</DashboardPill>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="card">
              <div className="card-head">🧾 Incidentes activos</div>
              <div className="card-body">
                <div className="dashboard-list">
                  {incidents.length === 0 && <div style={{ color: "#94a3b8", fontSize: 12 }}>Sin incidentes abiertos.</div>}
                  {incidents.map((incident) => {
                    const tone = incident.severity === "critical" ? SC.error : "#fbbf24";
                    return (
                      <div key={incident.id} className="dashboard-row dashboard-row-compact">
                        <div className="dashboard-row-main">
                          <div className="dashboard-row-title">{incident.title}</div>
                          <div className="dashboard-row-meta">{incident.server_label || "Global"} · {fmtAgo(incident.last_seen_at)}</div>
                        </div>
                        <DashboardPill tone={tone}>{incident.severity}</DashboardPill>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === "servers" && (
          <div className="card">
            <div className="card-head">
              <span>🖥 Mapa operativo por servidor</span>
              <span style={{ color: "#94a3b8", fontSize: 11 }}>{serverMap.length} monitoreados</span>
            </div>
            <div className="card-body">
              <div className="alert alert-info" style={{ marginBottom: 14 }}>
                Cada tarjeta resume la salud actual del servidor, cuántos colegios tiene degradados y el estado de los servicios clave sin necesidad de entrar al detalle completo.
              </div>
              <div className="dashboard-server-grid">
                {serverMap.map((server) => {
                  const tone = SERVER_STATE_COLORS[server.dashboard_state] || "#94a3b8";
                  return (
                    <div key={server.id} className="dashboard-server-card" style={{ "--dashboard-tone": tone }}>
                      <div className="dashboard-server-top">
                        <div>
                          <div className="dashboard-server-name">{server.label}</div>
                          <div className="dashboard-server-host">{server.host}</div>
                        </div>
                        <DashboardPill tone={tone}>{server.dashboard_state}</DashboardPill>
                      </div>

                      <div className="dashboard-server-metrics">
                        <div className="dashboard-server-box">
                          <span>CPU</span>
                          <strong style={{ color: "#22d3ee" }}>{server.cpu_pct ?? "—"}%</strong>
                        </div>
                        <div className="dashboard-server-box">
                          <span>RAM</span>
                          <strong style={{ color: "#c084fc" }}>{server.ram_pct ?? "—"}%</strong>
                        </div>
                        <div className="dashboard-server-box dashboard-server-box-wide">
                          <span>Colegios sanos</span>
                          <strong style={{ color: server.degraded_sites ? "#fbbf24" : SC.ok }}>{server.healthy_sites}/{server.total_sites || 0}</strong>
                        </div>
                      </div>

                      <div className="dashboard-server-health">
                        <div className="dashboard-server-health-head">
                          <span>Salud web</span>
                          <strong>{server.site_health_pct || 0}%</strong>
                        </div>
                        <div className="dashboard-server-health-track">
                          <div className="dashboard-server-health-fill" style={{ width: `${server.site_health_pct || 0}%` }} />
                        </div>
                      </div>

                      <div className="dashboard-server-signals">
                        <DashboardPill tone={server.down_sites ? SC.error : "#64748b"}>caídos: {server.down_sites || 0}</DashboardPill>
                        <DashboardPill tone={server.slow_sites ? "#fbbf24" : "#64748b"}>lentos: {server.slow_sites || 0}</DashboardPill>
                        <DashboardPill tone={server.active_incidents ? "#fb7185" : "#64748b"}>incidentes: {server.active_incidents || 0}</DashboardPill>
                      </div>

                      <div className="dashboard-server-services">
                        {[
                          ["Apache", server.apache],
                          ["PHP-FPM", server.php_fpm],
                          ["MariaDB", server.mariadb],
                        ].map(([label, status]) => {
                          const normalized = String(status || "unknown").toLowerCase();
                          const serviceTone = ["active", "running"].includes(normalized)
                            ? SC.ok
                            : ["failed", "inactive", "dead", "error"].includes(normalized)
                              ? SC.error
                              : "#64748b";
                          return (
                            <div key={label} className="dashboard-service-pill">
                              <span className="dashboard-service-dot" style={{ background: serviceTone }} />
                              <span>{label}</span>
                              <strong style={{ color: serviceTone }}>{status || "—"}</strong>
                            </div>
                          );
                        })}
                      </div>

                      <div className="dashboard-server-footer">
                        <span>Snapshot: {server.last_snapshot_at ? `${fmtDate(server.last_snapshot_at)} · ${fmtAgo(server.last_snapshot_at)}` : "sin datos"}</span>
                        <span>Load: <strong style={{ color: "#e2e8f0" }}>{server.load_avg || "—"}</strong></span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  window.DCViews = window.DCViews || {};
  window.DCViews.DashboardView = DashboardView;
})();