// Shared small components

const Spark = ({ data, color = 'var(--accent)', w = 90, h = 28, fill = true }) => {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - ((v - min) / range) * h
  ]);
  const d = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const area = d + ` L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg width={w} height={h} className="spark">
      {fill && <path d={area} fill={color} opacity="0.12" />}
      <path d={d} stroke={color} strokeWidth="1.5" fill="none" />
    </svg>
  );
};

const Metric = ({ label, value, delta, dir, sub, sparkSeed = 1, color }) => {
  const data = MOCK.spark(sparkSeed);
  return (
    <div className="metric">
      <div className="metric-label">{label}</div>
      <div className="metric-value">{value}</div>
      <div className={`metric-delta ${dir}`}>
        <Icon name={dir === 'up' ? 'up' : 'down'} size={10} />
        <span>{delta}</span>
        <span style={{color: 'var(--text-4)', marginLeft: 4}}>{sub}</span>
      </div>
      <Spark data={data} color={color || (dir === 'up' ? 'var(--emerald)' : 'var(--rose)')} w={130} h={32} />
    </div>
  );
};

const SourceBadge = ({ src }) => {
  const map = {
    web:        { cls: 'cyan', label: 'web' },
    app:        { cls: 'violet', label: 'app' },
    offline:    { cls: 'plain', label: 'offline' },
    meta_ads:   { cls: 'violet', label: 'meta' },
    google_ads: { cls: 'amber', label: 'google' },
  };
  const m = map[src] || { cls: 'plain', label: src };
  return <span className={`badge ${m.cls}`}>{m.label}</span>;
};

const SevBadge = ({ sev }) => {
  const map = { CRITICAL: 'rose', HIGH: 'amber', MEDIUM: 'cyan', LOW: 'plain' };
  return <span className={`badge ${map[sev]}`}>{sev}</span>;
};

const StatusBadge = ({ status }) => {
  const map = {
    success:  { cls: 'green', label: 'ok' },
    deduped:  { cls: 'cyan',  label: 'dedup' },
    error:    { cls: 'rose',  label: 'err' },
    PENDING:  { cls: 'amber', label: 'pending' },
    ACCEPTED: { cls: 'green', label: 'accepted' },
    REJECTED: { cls: 'plain', label: 'rejected' },
  };
  const m = map[status] || { cls: 'plain', label: status };
  return <span className={`badge ${m.cls}`}>{m.label}</span>;
};

const AICallout = ({ children }) => (
  <div className="ai-callout">
    <div className="ai-icon" />
    <div><strong style={{color: '#c4b5fd', fontWeight: 600}}>AI insight</strong> · {children}</div>
  </div>
);

// Stacked area chart for event volume
const AreaChart = ({ h = 180 }) => {
  const w = 640, pad = 20;
  const series = [
    { name: 'web',        color: '#22D3EE', seed: 1, amp: 1.3 },
    { name: 'meta_ads',   color: '#8B5CF6', seed: 2, amp: 1.0 },
    { name: 'google_ads', color: '#F59E0B', seed: 3, amp: 0.7 },
    { name: 'app',        color: '#10B981', seed: 4, amp: 0.5 },
    { name: 'offline',    color: '#6B7489', seed: 5, amp: 0.25 },
  ];
  const n = 30;
  const data = series.map(s => MOCK.spark(s.seed, s.amp));
  // Stack
  const stacked = [];
  for (let i = 0; i < n; i++) {
    let acc = 0;
    const col = [];
    for (let s = 0; s < series.length; s++) { col.push(acc); acc += data[s][i]; col.push(acc); }
    stacked.push(col);
  }
  const maxY = Math.max(...stacked.map(c => c[c.length - 1]));
  const X = i => pad + (i / (n - 1)) * (w - pad * 2);
  const Y = v => h - pad - (v / maxY) * (h - pad * 2);

  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{display: 'block'}}>
      {[0, 0.25, 0.5, 0.75, 1].map(t => (
        <line key={t} x1={pad} x2={w-pad} y1={pad + t*(h-pad*2)} y2={pad + t*(h-pad*2)} stroke="#232A3B" strokeDasharray="2 3" />
      ))}
      {series.map((s, si) => {
        let d = '';
        for (let i = 0; i < n; i++) d += (i===0?'M':'L') + X(i) + ' ' + Y(stacked[i][si*2]);
        for (let i = n-1; i >= 0; i--) d += 'L' + X(i) + ' ' + Y(stacked[i][si*2+1]);
        d += 'Z';
        return <path key={s.name} d={d} fill={s.color} fillOpacity="0.22" stroke={s.color} strokeWidth="1" />;
      })}
    </svg>
  );
};

window.Spark = Spark;
window.Metric = Metric;
window.SourceBadge = SourceBadge;
window.SevBadge = SevBadge;
window.StatusBadge = StatusBadge;
window.AICallout = AICallout;
window.AreaChart = AreaChart;