// Shared building blocks for drill levels — KPI strip, mini chart, ranking row, etc.

function KpiCards({ items }) {
  return (
    <div className="cf-kpis">
      {items.map((k, i) => (
        <div key={i} className={"cf-kpi" + (k.featured ? " featured" : "")}>
          {k.featured && <div className="glow" />}
          <div className="label">{k.icon}{k.label}</div>
          <div className="value">{k.value}</div>
          {k.delta && (
            <div className={"delta " + (k.delta.dir === "up" ? "up" : k.delta.dir === "down" ? "down" : "")}>
              {k.delta.dir === "up" && <I.ArrowUp size={12} />}
              {k.delta.dir === "down" && <I.ArrowDown size={12} />}
              {k.delta.text}
            </div>
          )}
          {k.sub && <div className="sub">{k.sub}</div>}
        </div>
      ))}
    </div>
  );
}

// Compact horizontal-bar ranking
function RankingList({ rows, max, metric, onClick, selectedIso, limit }) {
  const CF = window.CF;
  const display = limit ? rows.slice(0, limit) : rows;
  return (
    <div className="cf-clist">
      {display.map((c, i) => (
        <div
          key={c.iso || c.id || i}
          className={"cf-crow" + (selectedIso && (c.iso || c.id) === selectedIso ? " selected" : "")}
          onClick={onClick ? () => onClick(c) : undefined}
          style={{cursor: onClick ? "pointer" : "default"}}
        >
          <span className="rank">{String(i + 1).padStart(2, "0")}</span>
          <span className="name">
            {c.name}
            {c.eu && <span className="eu">UE</span>}
            {c.continent && <span style={{color:"var(--xn-fg-4)", fontSize:11, marginLeft:6}}>{c.continent}</span>}
          </span>
          <span className="val">{CF.fmtVal(c.value, metric)}</span>
          <div className="bar"><span style={{width: `${(c.value / max) * 100}%`}} /></div>
        </div>
      ))}
    </div>
  );
}

// Sparkline-style mini chart for KPI cards or compact panels
function MiniLine({ series, width = 240, height = 56, color = "var(--xn-blue-500)" }) {
  if (!series || series.length < 2) return null;
  const max = Math.max(...series.map(p => p.value));
  const min = Math.min(...series.map(p => p.value));
  const range = (max - min) || 1;
  const path = series.map((p, i) => {
    const x = (i / (series.length - 1)) * (width - 8) + 4;
    const y = height - 4 - ((p.value - min) / range) * (height - 12);
    return `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(" ");
  const area = path + ` L ${width - 4} ${height - 4} L 4 ${height - 4} Z`;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{display:"block"}}>
      <path d={area} fill={color} opacity="0.1" />
      <path d={path} fill="none" stroke={color} strokeWidth="2" />
      {series.map((p, i) => {
        const x = (i / (series.length - 1)) * (width - 8) + 4;
        const y = height - 4 - ((p.value - min) / range) * (height - 12);
        if (i !== series.length - 1) return null;
        return <circle key={i} cx={x} cy={y} r="3" fill="white" stroke={color} strokeWidth="2" />;
      })}
    </svg>
  );
}

// Source/data badge
function SourceTag({ label, kind = "ext" }) {
  return (
    <span className={"cf-source-tag " + kind}>
      {kind === "xnova" && <span className="cf-source-dot" />}
      {label}
    </span>
  );
}

window.KpiCards = KpiCards;
window.RankingList = RankingList;
window.MiniLine = MiniLine;
window.SourceTag = SourceTag;