/* bits.jsx — atomic UI bits: icons, sparkline, etc. */

const Icon = ({ name, size=16, color, style, className }) => {
  const s = { width:size, height:size, color:color||'currentColor', flex:'none', ...style };
  const P = (paths) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
    style={s} className={className}>{paths}</svg>;

  switch(name){
    case 'home':      return P(<><path d="M3 11.5 12 4l9 7.5"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></>);
    case 'bolt':      return P(<><path d="M13 2 4 14h7l-1 8 9-12h-7z" fill="currentColor" stroke="none"/></>);
    case 'sun':       return P(<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></>);
    case 'cloudy':    return P(<><path d="M5 13a5 5 0 0 1 9.7-1.7A4 4 0 1 1 17 19H7a3.5 3.5 0 0 1-2-6.4z"/><path d="M3 4l1.5 1.5M9 3v2"/></>);
    case 'cloud':     return P(<><path d="M5 17a5 5 0 0 1 .7-9.9A6 6 0 0 1 18.5 9.5 4.5 4.5 0 1 1 18 18.5H7a4 4 0 0 1-2-1.5z"/></>);
    case 'battery':   return P(<><rect x="2" y="7" width="18" height="10" rx="2"/><path d="M22 11v2"/><rect x="4" y="9" width="11" height="6" fill="currentColor" stroke="none"/></>);
    case 'car':       return P(<><path d="M5 13l2-5h10l2 5"/><rect x="3" y="13" width="18" height="5" rx="1.5"/><circle cx="7.5" cy="18.5" r="1.4"/><circle cx="16.5" cy="18.5" r="1.4"/></>);
    case 'plug':      return P(<><path d="M9 2v5M15 2v5"/><path d="M6 7h12v3a6 6 0 0 1-12 0z"/><path d="M12 16v6"/></>);
    case 'flash':     return P(<><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></>);
    case 'grid':      return P(<><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></>);
    case 'chart':     return P(<><path d="M3 3v18h18"/><path d="M7 14l3-4 4 3 5-7"/></>);
    case 'gear':      return P(<><circle cx="12" cy="12" r="3"/><path d="M19.4 13.5 21 14a8 8 0 0 0 0-4l-1.6.5a7 7 0 0 0-.6-1.5l1.1-1.3a8 8 0 0 0-2.8-2.8l-1.3 1.1a7 7 0 0 0-1.5-.6L13.5 3a8 8 0 0 0-3 0l-.8 1.4a7 7 0 0 0-1.5.6L6.9 3.9A8 8 0 0 0 4 6.7l1.1 1.3a7 7 0 0 0-.6 1.5L3 10a8 8 0 0 0 0 4l1.6-.5a7 7 0 0 0 .6 1.5l-1.1 1.3a8 8 0 0 0 2.8 2.8l1.3-1.1a7 7 0 0 0 1.5.6l.5 1.4a8 8 0 0 0 3 0l.5-1.4a7 7 0 0 0 1.5-.6l1.3 1.1a8 8 0 0 0 2.8-2.8l-1.1-1.3a7 7 0 0 0 .6-1.5z"/></>);
    case 'bell':      return P(<><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5z"/><path d="M10 21h4"/></>);
    case 'search':    return P(<><circle cx="11" cy="11" r="7"/><path d="m20 20-4.3-4.3"/></>);
    case 'lightning': return P(<><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></>);
    case 'leaf':      return P(<><path d="M4 20c0-9 8-16 16-16-1 9-7 16-16 16z"/><path d="M4 20l9-9"/></>);
    case 'wallet':    return P(<><rect x="3" y="6" width="18" height="14" rx="2"/><path d="M3 10h18M16 14h2"/></>);
    case 'chevron':   return P(<><path d="m9 6 6 6-6 6"/></>);
    case 'expand':    return P(<><path d="M4 10V4h6M20 14v6h-6M14 4h6v6M10 20H4v-6"/></>);
    case 'wifi':      return P(<><path d="M2 8.8a16 16 0 0 1 20 0"/><path d="M5 12.5a11 11 0 0 1 14 0"/><path d="M8.5 16a6 6 0 0 1 7 0"/><circle cx="12" cy="19.5" r="1" fill="currentColor"/></>);
    case 'arrowup':   return P(<><path d="M12 19V5M5 12l7-7 7 7"/></>);
    case 'arrowdown': return P(<><path d="M12 5v14M5 12l7 7 7-7"/></>);
    case 'arrowr':    return P(<><path d="M5 12h14M12 5l7 7-7 7"/></>);
    case 'wind':      return P(<><path d="M3 8h12a3 3 0 1 0-3-3"/><path d="M3 12h17a3 3 0 1 1-3 3"/><path d="M3 16h10"/></>);
    case 'snow':      return P(<><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"/></>);
    case 'eye':       return P(<><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>);
    case 'pause':     return P(<><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></>);
    case 'play':      return P(<><path d="M6 4l14 8-14 8z" fill="currentColor"/></>);
    case 'thermo':    return P(<><path d="M14 14V4a2 2 0 1 0-4 0v10a4 4 0 1 0 4 0z"/></>);
    default: return null;
  }
};

/* ---- small sparkline ---- */
const Sparkline = ({ data, width=80, height=24, color="currentColor", area=true, stroke=1.4 }) => {
  if (!data || data.length<2) return null;
  const min = Math.min(...data), max = Math.max(...data);
  const range = (max-min) || 1;
  const pts = data.map((v,i)=>{
    const x = (i/(data.length-1)) * (width-2) + 1;
    const y = height - 2 - ((v-min)/range) * (height-4);
    return [x,y];
  });
  const d = pts.map((p,i)=> (i?'L':'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const dArea = d + ` L ${(width-1).toFixed(1)} ${(height-1).toFixed(1)} L 1 ${(height-1).toFixed(1)} Z`;
  return (
    <svg width={width} height={height} style={{display:'block',color}}>
      {area && <path d={dArea} fill="currentColor" opacity=".12"/>}
      <path d={d} fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
};

/* ---- diagonal stripe pattern as inline svg url ---- */
const stripePattern = (color, opacity=1) =>
  `url("data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 6 L6 0' stroke='${color}' stroke-opacity='${opacity}' stroke-width='1.2'/></svg>`
  )}")`;

Object.assign(window, { Icon, Sparkline, stripePattern });