// DashboardCards.jsx — Eng Intelligence metrics + chart stubs
function Metric({ label, value, unit, delta, trend }) {
  return (
    <div className="card metric">
      <div className="label">{label}</div>
      <div className="value tabular">
        {value}{unit && <span className="unit">{unit}</span>}
      </div>
      {delta && (
        <div className={`delta ${trend === 'down' ? 'down' : 'up'}`}>
          <Icon name={trend === 'down' ? 'TrendDownIcon' : 'TrendUpIcon'} size={12} weight="bold" />
          {delta}
        </div>
      )}
    </div>
  );
}

function AreaChart({ color = 'var(--chart-1-line)', fill = 'var(--chart-1-area)', points }) {
  // points: array of 0..1 floats
  const w = 560, h = 160, pad = 4;
  const step = (w - pad * 2) / (points.length - 1);
  const px = points.map((v, i) => [pad + i * step, h - pad - v * (h - pad * 2)]);
  const line = px.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
  const area = `${line} L${px[px.length-1][0].toFixed(1)},${h - pad} L${px[0][0].toFixed(1)},${h - pad} Z`;
  return (
    <svg className="chart" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="areaGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity=".24" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75].map(y => (
        <line key={y} x1={pad} x2={w - pad} y1={h * y} y2={h * y} stroke="var(--neutral-100)" strokeDasharray="2 3" />
      ))}
      <path d={area} fill="url(#areaGrad)" />
      <path d={line} stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function BarChart({ data }) {
  const w = 560, h = 160, pad = 10;
  const bw = (w - pad * 2) / data.length - 6;
  const max = Math.max(...data.map(d => d.v));
  return (
    <svg className="chart" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      {data.map((d, i) => {
        const bh = (d.v / max) * (h - pad * 2 - 18);
        const x = pad + i * ((w - pad * 2) / data.length) + 3;
        const y = h - pad - bh - 14;
        return (
          <g key={i}>
            <rect x={x} y={y} width={bw} height={bh} rx="2" fill="var(--brand-500)" opacity={0.85} />
            <text x={x + bw/2} y={h - pad} fontSize="9" fill="var(--text-neutral-subtle)" textAnchor="middle" fontFamily="var(--font-mono)">{d.l}</text>
          </g>
        );
      })}
    </svg>
  );
}

Object.assign(window, { Metric, AreaChart, BarChart });