(() => {
const { Icon, Badge } = window.TaskFlowDesignSystem_dd53c2;

/* Chart primitives for the dashboards. Same shapes as the product's
   analytics reference — capsule bars, a time heat grid, a segmented
   category bar and KPI tiles with an open-arrow. */

function KpiTile({ label, value, icon, delta, tone = "teal", onOpen }) {
  const [hover, setHover] = React.useState(false);
  const tint = {
    teal: ["var(--teal-100)", "var(--teal-600)"], mint: ["var(--mint-100)", "var(--mint-600)"],
    gold: ["var(--gold-100)", "var(--gold-600)"], coral: ["var(--coral-100)", "var(--coral-600)"],
    leaf: ["var(--leaf-100)", "var(--leaf-600)"],
  }[tone];
  const up = (delta || "").trim().startsWith("+");
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", flexDirection: "column", gap: 12, padding: 16, borderRadius: "var(--radius-xl)",
        background: "var(--surface-glass)", backdropFilter: "var(--blur-glass)", WebkitBackdropFilter: "var(--blur-glass)",
        border: "1px solid var(--border-glass)", boxShadow: hover ? "var(--glow-teal)" : "var(--shadow-glass)",
        transform: hover ? "var(--lift-hover)" : "none", transition: "var(--transition-float)", minWidth: 0,
      }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ font: "var(--text-caption)", color: "var(--text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
        <span style={{ marginLeft: "auto" }}>
          <button type="button" onClick={onOpen} aria-label={`Buka ${label}`}
            style={{
              width: 26, height: 26, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: onOpen ? "pointer" : "default",
              borderRadius: "50%", border: "1px solid var(--border-glass)", background: hover ? "var(--gradient-teal)" : "var(--white)",
              transition: "var(--transition-control)",
            }}>
            <Icon name="arrow-up-right" size={14} color={hover ? "var(--white)" : "var(--text-muted)"} />
          </button>
        </span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 38, height: 38, flex: "0 0 auto", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-md)", background: tint[0] }}>
          <Icon name={icon} size={19} color={tint[1]} />
        </span>
        <span style={{ font: "var(--fw-extrabold) 30px/1 var(--font-display)", color: "var(--text-strong)", letterSpacing: "var(--ls-tight)" }}>{value}</span>
      </div>
      {delta && (
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 4, height: 20, padding: "0 8px", borderRadius: "var(--radius-pill)",
            background: up ? "var(--leaf-600)" : "var(--red-600)", color: "var(--white)",
            font: "var(--fw-bold) var(--fs-micro)/1 var(--font-body)",
          }}>{delta}</span>
          <span style={{ font: "var(--text-caption)", color: "var(--text-faint)" }}>vs bulan lalu</span>
        </div>
      )}
    </div>
  );
}

/* Capsule bar chart. series: [{ label, value, secondary }] */
function CapsuleBars({ series = [], max, height = 210, unit = "", legend = [] }) {
  const phone = useBreakpoint() === "mobile";
  const [active, setActive] = React.useState(null);
  const raw = max || Math.max(1, ...series.map((s) => s.value));
  const top = Math.ceil(raw / 4) * 4; // keeps the four axis steps even
  const peak = series.reduce((a, b) => (b.value > (a ? a.value : -1) ? b : a), null);
  const shown = active != null ? series[active] : peak;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, minWidth: 0 }}>
      {legend.length > 0 && (
        <div style={{ display: "flex", gap: 16, justifyContent: "flex-end", flexWrap: "wrap" }}>
          {legend.map(([label, color]) => (
            <span key={label} style={{ display: "inline-flex", alignItems: "center", gap: 6, font: "var(--text-caption)", color: "var(--text-muted)" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: color }} />{label}
            </span>
          ))}
        </div>
      )}
      <div style={{ display: "flex", gap: 12, minWidth: 0 }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height, paddingBottom: 22 }}>
          {[4, 3, 2, 1, 0].map((i) => (
            <span key={i} style={{ font: "var(--fw-semibold) var(--fs-micro)/1 var(--font-mono)", color: "var(--text-faint)" }}>
              {Math.round((top / 4) * i)}{unit}
            </span>
          ))}
        </div>
        <div style={{ position: "relative", flex: 1, minWidth: 0, display: "flex", alignItems: "flex-end", gap: phone ? 3 : 6, height, overflow: "hidden" }}>
          {shown && !phone && (
            <div style={{
              position: "absolute", left: 0, top: 0, zIndex: 2, padding: "10px 12px", borderRadius: "var(--radius-md)",
              background: "var(--surface-glass-strong)", backdropFilter: "var(--blur-glass)", WebkitBackdropFilter: "var(--blur-glass)",
              border: "1px solid var(--border-glass)", boxShadow: "var(--shadow-glass)", display: "flex", flexDirection: "column", gap: 6, pointerEvents: "none",
            }}>
              <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{shown.label}</span>
              <span style={{ font: "var(--fw-extrabold) 22px/1 var(--font-display)", color: "var(--text-strong)" }}>{shown.value}{unit}</span>
              {shown.note && <Badge tone="solidLeaf" size="sm">{shown.note}</Badge>}
            </div>
          )}
          {series.map((s, i) => {
            const h = Math.max(4, Math.round(((s.value / top) * (height - 34))));
            const on = active === i || (active == null && shown === s);
            return (
              <div key={s.label} onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)}
                style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", alignItems: "center", gap: 8, cursor: "default" }}>
                <div style={{ position: "relative", width: "100%", maxWidth: phone ? 14 : 22, height: height - 30, display: "flex", alignItems: "flex-end" }}>
                  <span style={{ position: "absolute", inset: 0, borderRadius: "var(--radius-pill)", background: "var(--neutral-100)" }} />
                  <span style={{
                    position: "relative", width: "100%", height: h, borderRadius: "var(--radius-pill)",
                    background: on ? "var(--gradient-teal)" : "linear-gradient(180deg,var(--teal-400),var(--teal-600))",
                    boxShadow: on ? "0 6px 18px -6px rgba(19,168,140,.75)" : "none", transition: "var(--transition-float)",
                  }} />
                  {on && <span style={{ position: "absolute", left: "50%", bottom: h + 6, width: 8, height: 8, marginLeft: -4, borderRadius: "50%", background: "var(--gold-500)" }} />}
                </div>
                <span style={{ font: "var(--fw-semibold) var(--fs-micro)/1 var(--font-mono)", color: on ? "var(--teal-700)" : "var(--text-faint)" }}>{s.label}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* Time-of-day × weekday heat grid. cells: { [row]: number[] } */
function HeatGrid({ rows = [], cols = [], values = [], max }) {
  const top = max || Math.max(1, ...values.flat());
  const shade = (v) => {
    if (!v) return ["var(--neutral-100)", "transparent"];
    const r = v / top;
    if (r > 0.75) return ["var(--teal-600)", "0 4px 12px -4px rgba(19,168,140,.6)"];
    if (r > 0.5) return ["var(--teal-500)", "none"];
    if (r > 0.25) return ["var(--leaf-400)", "none"];
    return ["var(--teal-200)", "none"];
  };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
      {rows.map((label, r) => (
        <div key={label} style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 64, flex: "0 0 auto", font: "var(--fw-semibold) var(--fs-micro)/1 var(--font-mono)", color: "var(--text-faint)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols.length},1fr)`, gap: 6, flex: 1, minWidth: 0 }}>
            {cols.map((c, i) => {
              const v = (values[r] || [])[i] || 0;
              const [bg, sh] = shade(v);
              return <span key={c + i} title={`${label} · ${c} · ${v} task`} style={{ height: 26, borderRadius: 8, background: bg, boxShadow: sh }} />;
            })}
          </div>
        </div>
      ))}
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ width: 64, flex: "0 0 auto" }} />
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols.length},1fr)`, gap: 6, flex: 1, minWidth: 0 }}>
          {cols.map((c, i) => (
            <span key={c + i} style={{ textAlign: "center", font: "var(--fw-bold) var(--fs-micro)/1 var(--font-body)", color: "var(--text-faint)" }}>{c}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* Segmented share bar with a legend underneath. parts: [{label,value,color}] */
function ShareBar({ parts = [], total }) {
  const sum = total || parts.reduce((a, p) => a + p.value, 0) || 1;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, minWidth: 0 }}>
      <div style={{ display: "flex", gap: 4, height: 12 }}>
        {parts.map((p) => (
          <span key={p.label} title={`${p.label}: ${p.value}`} style={{ flex: Math.max(p.value, 0.4), borderRadius: "var(--radius-pill)", background: p.color }} />
        ))}
      </div>
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
        {parts.map((p) => (
          <span key={p.label} style={{ display: "inline-flex", alignItems: "center", gap: 6, font: "var(--text-caption)", color: "var(--text-muted)" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: p.color }} />
            {p.label} <b style={{ color: "var(--text-strong)" }}>{Math.round((p.value / sum) * 100)}%</b>
          </span>
        ))}
      </div>
    </div>
  );
}

/* Two-endpoint route strip (pipeline hand-off). */
function RouteStrip({ fromLabel, fromMeta, toLabel, toMeta, progress = 50 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
      <span style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
        <span style={{ font: "var(--fw-bold) var(--fs-sm)/1.2 var(--font-body)", color: "var(--text-strong)" }}>{fromLabel}</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, font: "var(--text-caption)", color: "var(--text-muted)" }}>
          <Icon name="map-pin" size={12} color="var(--text-faint)" />{fromMeta}
        </span>
      </span>
      <span style={{ position: "relative", flex: 1, minWidth: 90, height: 12, display: "flex", alignItems: "center" }}>
        <span style={{ position: "absolute", left: 0, right: 0, borderTop: "2px dashed var(--teal-300)" }} />
        <span style={{
          position: "absolute", left: `calc(${Math.min(94, Math.max(2, progress))}% - 11px)`, width: 22, height: 22, borderRadius: "50%",
          background: "var(--gradient-teal)", boxShadow: "var(--shadow-float)", display: "inline-flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name="check" size={12} color="var(--white)" />
        </span>
      </span>
      <span style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0, textAlign: "right" }}>
        <span style={{ font: "var(--fw-bold) var(--fs-sm)/1.2 var(--font-body)", color: "var(--text-strong)" }}>{toLabel}</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, font: "var(--text-caption)", color: "var(--text-muted)" }}>
          <Icon name="map-pin" size={12} color="var(--text-faint)" />{toMeta}
        </span>
      </span>
    </div>
  );
}

Object.assign(window, { KpiTile, CapsuleBars, HeatGrid, ShareBar, RouteStrip });
})();