// Shared icons and helpers (expects React global)

const Icon = ({ name, size = 14 }) => {
  const s = size;
  const props = {
    width: s, height: s, viewBox: "0 0 16 16", fill: "none",
    stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch(name){
    case "search": return <svg {...props}><circle cx="7" cy="7" r="5"/><path d="M11 11l3 3"/></svg>;
    case "dash": return <svg {...props}><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></svg>;
    case "fire": return <svg {...props}><path d="M8 14c2.5 0 4-1.8 4-4 0-2-1.5-3-2-4.5C9.5 6 9 7 8 7S6 5 6 3c-1.5 1.5-3 3-3 6 0 2.8 2 5 5 5z"/></svg>;
    case "cut": return <svg {...props}><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><path d="M5.5 10.5L14 3M10.5 10.5L2 3"/></svg>;
    case "magic": return <svg {...props}><path d="M3 13l8-8M10 5l1-1M12 7l1-1M8 3l1-1"/><circle cx="11" cy="5" r=".5" fill="currentColor"/></svg>;
    case "folder": return <svg {...props}><path d="M2 4a1 1 0 011-1h3l1 1.5h6a1 1 0 011 1V12a1 1 0 01-1 1H3a1 1 0 01-1-1V4z"/></svg>;
    case "grid": return <svg {...props}><rect x="2" y="2" width="5" height="5"/><rect x="9" y="2" width="5" height="5"/><rect x="2" y="9" width="5" height="5"/><rect x="9" y="9" width="5" height="5"/></svg>;
    case "account": return <svg {...props}><circle cx="8" cy="6" r="2.5"/><path d="M3 14c1-3 3-4 5-4s4 1 5 4"/></svg>;
    case "calendar": return <svg {...props}><rect x="2" y="3" width="12" height="11" rx="1"/><path d="M2 6h12M5 2v3M11 2v3"/></svg>;
    case "chart": return <svg {...props}><path d="M2 13V3M2 13h12M5 10V8M8 10V6M11 10V4"/></svg>;
    case "bell": return <svg {...props}><path d="M4 11V7a4 4 0 018 0v4l1 2H3l1-2zM6 13a2 2 0 004 0"/></svg>;
    case "play": return <svg {...props}><path d="M4 3l9 5-9 5V3z" fill="currentColor"/></svg>;
    case "pause": return <svg {...props}><rect x="4" y="3" width="3" height="10"/><rect x="9" y="3" width="3" height="10"/></svg>;
    case "more": return <svg {...props}><circle cx="4" cy="8" r="1" fill="currentColor"/><circle cx="8" cy="8" r="1" fill="currentColor"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>;
    case "up": return <svg {...props}><path d="M4 10l4-4 4 4"/></svg>;
    case "down": return <svg {...props}><path d="M4 6l4 4 4-4"/></svg>;
    case "right": return <svg {...props}><path d="M6 4l4 4-4 4"/></svg>;
    case "ext": return <svg {...props}><path d="M9 3h4v4M13 3L7 9M13 9v3a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1h3"/></svg>;
    case "download": return <svg {...props}><path d="M8 3v7M5 7l3 3 3-3M3 13h10"/></svg>;
    case "filter": return <svg {...props}><path d="M2 3h12l-4 5v5l-4-2V8L2 3z"/></svg>;
    case "eye": return <svg {...props}><path d="M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z"/><circle cx="8" cy="8" r="2"/></svg>;
    case "heart": return <svg {...props}><path d="M8 13S2 9.5 2 5.5A3 3 0 018 4a3 3 0 016 1.5C14 9.5 8 13 8 13z"/></svg>;
    case "chat": return <svg {...props}><path d="M14 8a5 5 0 01-5 5H6l-3 2v-3a5 5 0 015-5h1a5 5 0 015 5z" transform="rotate(180 8 8)"/></svg>;
    case "share": return <svg {...props}><circle cx="4" cy="8" r="2"/><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><path d="M5.5 7l5-2M5.5 9l5 2"/></svg>;
    case "hook": return <svg {...props}><path d="M8 2v8M8 10a3 3 0 103 3"/></svg>;
    case "music": return <svg {...props}><path d="M6 12V4l7-1v8"/><circle cx="4.5" cy="12" r="1.5"/><circle cx="11.5" cy="11" r="1.5"/></svg>;
    case "sparkle": return <svg {...props}><path d="M8 2v5M8 9v5M2 8h5M9 8h5" strokeWidth="1.2"/></svg>;
    case "layers": return <svg {...props}><path d="M8 2l6 3-6 3-6-3 6-3zM2 8l6 3 6-3M2 11l6 3 6-3"/></svg>;
    case "check": return <svg {...props}><path d="M3 8l3 3 7-7"/></svg>;
    case "clock": return <svg {...props}><circle cx="8" cy="8" r="6"/><path d="M8 4v4l2.5 2"/></svg>;
    case "send": return <svg {...props}><path d="M14 2L2 7l5 2 2 5 5-12zM7 9l3-3"/></svg>;
    case "settings": return <svg {...props}><circle cx="8" cy="8" r="2"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.5 1.5M11.5 11.5L13 13M3 13l1.5-1.5M11.5 4.5L13 3"/></svg>;
    case "plus": return <svg {...props}><path d="M8 3v10M3 8h10"/></svg>;
    case "close": return <svg {...props}><path d="M4 4l8 8M12 4l-8 8"/></svg>;
    case "link": return <svg {...props}><path d="M7 9a3 3 0 014 0l2-2a3 3 0 10-4-4L8 4M9 7a3 3 0 01-4 0l-2 2a3 3 0 104 4l1-1"/></svg>;
    case "copy": return <svg {...props}><rect x="5" y="5" width="9" height="9" rx="1"/><path d="M10 5V3a1 1 0 00-1-1H3a1 1 0 00-1 1v6a1 1 0 001 1h2"/></svg>;
    case "trend": return <svg {...props}><path d="M2 12l4-4 3 3 5-7M10 4h3v3"/></svg>;
    case "target": return <svg {...props}><circle cx="8" cy="8" r="5"/><circle cx="8" cy="8" r="2"/></svg>;
    case "tag": return <svg {...props}><path d="M2 8V3h5l7 7-5 5-7-7z"/><circle cx="5.5" cy="5.5" r=".5" fill="currentColor"/></svg>;
    case "zap": return <svg {...props}><path d="M9 1L3 9h5l-1 6 6-8H8l1-6z"/></svg>;
    default: return <svg {...props}/>;
  }
};

// 平台徽标 fixed
const PF = ({ type }) => {
  const map = { douyin: "抖", xhs: "红", ks: "快", sph: "视" };
  return <span className={`pf ${type}`}>{map[type]}</span>;
};

// Mini bar chart
const MiniBars = ({ data, color = "var(--cyan)", height = 28 }) => {
  const max = Math.max(...data, 1);
  return (
    <div style={{ display:"flex", gap:2, alignItems:"flex-end", height }}>
      {data.map((v,i)=>(
        <div key={i} style={{ flex:1, height:`${(v/max)*100}%`, background: color, opacity: 0.3 + 0.7*(v/max), borderRadius: 1, minHeight: 2 }}/>
      ))}
    </div>
  );
};

// Mini line chart
const MiniLine = ({ data, color = "var(--cyan)", width = 180, height = 40, fill = true }) => {
  if (!data || data.length === 0) return <svg width={width} height={height} style={{ display:"block" }}/>;
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const step = width / Math.max(data.length - 1, 1);
  const pts = data.map((v,i)=>`${i*step},${height - ((v-min)/range)*(height-4) - 2}`).join(" ");
  return (
    <svg width={width} height={height} style={{ display:"block" }}>
      {fill && <polyline points={`0,${height} ${pts} ${width},${height}`} fill={color} opacity={0.15}/>}
      <polyline points={pts} fill="none" stroke={color} strokeWidth={1.5}/>
    </svg>
  );
};

// Sparkline grid (engagement curve)
const CurveChart = ({ data, width = 520, height = 140, markers = [], color = "var(--cyan)" }) => {
  if (!data || data.length === 0) return <svg width={width} height={height} style={{ display:"block" }}/>;
  const max = Math.max(...data), min = 0;
  const range = max - min || 1;
  const step = width / Math.max(data.length - 1, 1);
  const pts = data.map((v,i)=>`${i*step},${height - ((v-min)/range)*(height-12) - 6}`).join(" ");
  return (
    <svg width={width} height={height} style={{ display:"block" }}>
      <defs>
        <linearGradient id="cg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.35"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,1,2,3].map(i=>(
        <line key={i} x1="0" x2={width} y1={i*height/3} y2={i*height/3} stroke="var(--line-1)" strokeDasharray="2 3"/>
      ))}
      <polyline points={`0,${height} ${pts} ${width},${height}`} fill="url(#cg)"/>
      <polyline points={pts} fill="none" stroke={color} strokeWidth={1.6}/>
      {markers.map((m,i)=>{
        const x = (m.t/100)*width;
        const v = data[Math.round((m.t/100)*(data.length-1))];
        const y = height - ((v-min)/range)*(height-12) - 6;
        return (
          <g key={i}>
            <line x1={x} x2={x} y1={0} y2={height} stroke={m.color||"var(--orange)"} strokeWidth="1" strokeDasharray="3 2" opacity="0.6"/>
            <circle cx={x} cy={y} r={3.5} fill={m.color||"var(--orange)"}/>
            <circle cx={x} cy={y} r={6} fill="none" stroke={m.color||"var(--orange)"} opacity="0.3"/>
          </g>
        );
      })}
    </svg>
  );
};

Object.assign(window, { Icon, PF, MiniBars, MiniLine, CurveChart });