// Shared small components

function StatusBadge({ status, t }) {
  // map status keys → class + label
  const cls = {
    confirmed: 'badge-confirmed',
    pending: 'badge-pending',
    cancelled: 'badge-cancelled',
    completed: 'badge-completed',
    new: 'badge-new',
    contacted: 'badge-confirmed',
    quoted: 'badge-pending',
    converted: 'badge-active',
    lost: 'badge-cancelled',
    available: 'badge-active',
    ontrip: 'badge-ontrip',
    maintenance: 'badge-maintenance',
    active: 'badge-active'
  }[status] || 'badge-completed';
  return <span className={`badge ${cls}`}>{t(status)}</span>;
}

// SVG line + area chart
function LineChart({ data, color = 'var(--navy)', area = true, height = 220, gold = false, animated = true }) {
  const w = 100, h = 40; // viewBox normalized
  const max = Math.max(...data.map(d => d.value));
  const min = Math.min(...data.map(d => d.value));
  const range = Math.max(max - min, 1);
  const padTop = 4, padBot = 6;
  const pts = data.map((d, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = padTop + (1 - (d.value - min) / range) * (h - padTop - padBot);
    return { x, y, ...d };
  });
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
  const areaPath = `${path} L ${w} ${h} L 0 ${h} Z`;

  // Smooth curve
  const smooth = (() => {
    let d = `M ${pts[0].x} ${pts[0].y}`;
    for (let i = 1; i < pts.length; i++) {
      const p0 = pts[i - 1], p1 = pts[i];
      const cpx = (p0.x + p1.x) / 2;
      d += ` C ${cpx} ${p0.y}, ${cpx} ${p1.y}, ${p1.x} ${p1.y}`;
    }
    return d;
  })();
  const smoothArea = `${smooth} L ${w} ${h} L 0 ${h} Z`;

  const stroke = gold ? 'var(--gold)' : color;
  const areaStart = gold ? 'rgba(200,146,42,.25)' : 'rgba(27,58,107,.18)';
  const areaEnd = gold ? 'rgba(200,146,42,0)' : 'rgba(27,58,107,0)';

  return (
    <div style={{ position: 'relative', width: '100%', height }}>
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height: '100%', overflow: 'visible' }}>
        <defs>
          <linearGradient id={`grad-${gold ? 'g' : 'n'}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={areaStart} />
            <stop offset="100%" stopColor={areaEnd} />
          </linearGradient>
        </defs>
        {/* grid */}
        {[0, 1, 2, 3].map(i => (
          <line key={i} x1="0" x2={w} y1={padTop + i * ((h - padTop - padBot) / 3)} y2={padTop + i * ((h - padTop - padBot) / 3)}
                stroke="var(--border)" strokeWidth=".15" vectorEffect="non-scaling-stroke" />
        ))}
        {area && <path d={smoothArea} fill={`url(#grad-${gold ? 'g' : 'n'})`} />}
        <path d={smooth} fill="none" stroke={stroke} strokeWidth="1.6" vectorEffect="non-scaling-stroke" strokeLinejoin="round" strokeLinecap="round" />
        {pts.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r=".7" fill="#fff" stroke={stroke} strokeWidth=".6" vectorEffect="non-scaling-stroke" />
        ))}
      </svg>
      {/* x labels */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: -4, display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--muted)', padding: '0 2px' }}>
        {data.length <= 10 ? data.map((d, i) => <span key={i}>{d.label}</span>) :
          [0, Math.floor(data.length/4), Math.floor(data.length/2), Math.floor(3*data.length/4), data.length - 1].map(i => <span key={i}>{data[i].label}</span>)}
      </div>
    </div>
  );
}

function MiniBarChart({ data, height = 60, color = 'var(--navy)' }) {
  const max = Math.max(...data);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height }}>
      {data.map((v, i) => (
        <div key={i} style={{
          flex: 1,
          height: `${(v / max) * 100}%`,
          background: color,
          borderRadius: '3px 3px 0 0',
          opacity: 0.5 + (i / data.length) * 0.5
        }} />
      ))}
    </div>
  );
}

window.StatusBadge = StatusBadge;
window.LineChart = LineChart;
window.MiniBarChart = MiniBarChart;