// Palette · v2 shared icons + tiny components (ported from mockup 3.2)
const V2Icon = ({name, size=14, color='currentColor', strokeWidth=1.6}) => {
  const s = size;
  const props = {width:s, height:s, viewBox:'0 0 24 24', fill:'none', stroke:color, strokeWidth, strokeLinecap:'round', strokeLinejoin:'round'};
  switch(name){
    case 'doc': return <svg {...props}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>;
    case 'image': return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg>;
    case 'video': return <svg {...props}><rect x="3" y="5" width="14" height="14" rx="2"/><path d="m17 9 4-2v10l-4-2z"/></svg>;
    case 'audio': return <svg {...props}><path d="M9 18V6l11-3v12"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="15" r="3"/></svg>;
    case 'url': return <svg {...props}><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"/></svg>;
    case 'ppt': return <svg {...props}><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>;
    case 'plus': return <svg {...props}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
    case 'x': return <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
    case 'pin': return <svg {...props}><path d="M12 17v5"/><path d="M9 10.76V6h6v4.76l3 4.24H6z"/></svg>;
    case 'pencil': return <svg {...props}><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z"/></svg>;
    case 'eye': return <svg {...props}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'sparkles': return <svg {...props}><path d="M12 3v3M12 18v3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M3 12h3M18 12h3M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="2.5"/></svg>;
    case 'wand': return <svg {...props}><path d="m4 20 12-12"/><path d="M14 4v4M16 6h4M18 12v3M19.5 13.5h-3M6 18v2M5 19h2"/></svg>;
    case 'arrow-up': return <svg {...props}><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>;
    case 'arrow-swap': return <svg {...props}><path d="M7 7h13M7 7l4-4M7 7l4 4"/><path d="M17 17H4M17 17l-4-4M17 17l-4 4"/></svg>;
    case 'approx': return <svg {...props}><path d="M3 12c2-3 4-3 6 0s4 3 6 0 4-3 6 0"/></svg>;
    case 'arrow-down': return <svg {...props}><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>;
    case 'send': return <svg {...props}><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4z"/></svg>;
    case 'search': return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'chevron-down': return <svg {...props}><polyline points="6 9 12 15 18 9"/></svg>;
    case 'chevron-right': return <svg {...props}><polyline points="9 6 15 12 9 18"/></svg>;
    case 'grip': return <svg {...props}><circle cx="9" cy="6" r="1.2"/><circle cx="15" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/><circle cx="15" cy="18" r="1.2"/></svg>;
    case 'folder': return <svg {...props}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>;
    case 'check': return <svg {...props}><polyline points="20 6 9 17 4 12"/></svg>;
    case 'refresh': return <svg {...props}><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>;
    case 'more': return <svg {...props}><circle cx="6" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="18" cy="12" r="1.4"/></svg>;
    case 'spark': return <svg {...props}><path d="M12 2 14 10 22 12 14 14 12 22 10 14 2 12 10 10z"/></svg>;
    case 'play': return <svg {...props} fill="currentColor"><path d="M6 4v16l14-8z"/></svg>;
    case 'mail': return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case 'link': return <svg {...props}><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>;
    default: return null;
  }
};

const v2FileMeta = (kind) => ({
  pdf:   {icon:'doc',   tint:'#1A1A1A', label:'PDF'},
  doc:   {icon:'doc',   tint:'#1A1A1A', label:'DOC'},
  image: {icon:'image', tint:'#3A3630', label:'IMG'},
  video: {icon:'video', tint:'#1A1A1A', label:'VID'},
  audio: {icon:'audio', tint:'#5F594E', label:'AUD'},
  url:   {icon:'url',   tint:'#857E70', label:'URL'},
  ppt:   {icon:'ppt',   tint:'#3A3630', label:'PPT'},
}[kind] || {icon:'doc', tint:'#888', label:'FILE'});

const V2StatusPill = ({status, progress})=>{
  const map={
    not_analyzed:{label:'not analyzed',color:'#7B6A2A', bg:'rgba(255,182,0,.18)'},
    pending:{label:'pending',color:'#7B867F', bg:'#EAE6E1'},
    analyzing:{label:`analyzing · ${Math.round((progress||0)*100)}%`,color:'#006747', bg:'rgba(0,103,71,.10)'},
    analyzed:{label:'analyzed',color:'#004D35', bg:'rgba(0,103,71,.14)'},
    failed:{label:'failed',color:'#A33C16', bg:'rgba(217,69,69,.10)'},
    idle:{label:'idle',color:'#888', bg:'#EDEAE2'},
  };
  const s = map[status]||map.pending;
  return <span className="mono" style={{display:'inline-flex',alignItems:'center',gap:5,padding:'2px 7px',borderRadius:4,fontSize:9.5,letterSpacing:'.07em',textTransform:'uppercase',color:s.color,background:s.bg,fontWeight:600}}>
    {status==='analyzing' && <span style={{width:5,height:5,borderRadius:5,background:s.color,animation:'pulse 1.2s infinite'}}/>}
    {status==='not_analyzed' && <span style={{width:5,height:5,borderRadius:5,background:s.color}}/>}
    {s.label}
  </span>;
};

// Shared loading primitives — used everywhere we wait on the network.
const V2Spinner = ({size='md', color, style={}}) => (
  <span className={`v2-spinner ${size==='lg'?'lg':size==='sm'?'sm':''}`}
    style={{color: color || undefined, ...style}}/>
);

const V2Skeleton = ({w='100%', h=12, style={}}) => (
  <div className="v2-skeleton" style={{width:w, height:h, ...style}}/>
);

const V2LoadingOverlay = ({msg='Loading…'}) => (
  <div className="v2-overlay">
    <V2Spinner size="lg"/>
    <div className="v2-overlay-msg">{msg}</div>
  </div>
);

const V2EmptyHint = ({icon='sparkles', title, hint, action}) => (
  <div style={{padding:'56px 24px',textAlign:'center',color:'var(--muted)',animation:'v2-fade .25s ease-out'}}>
    <div style={{display:'inline-flex',width:48,height:48,borderRadius:24,
      background:'var(--paper-2)',border:'1px solid var(--rule)',
      alignItems:'center',justifyContent:'center',marginBottom:14,color:'var(--accent)'}}>
      <V2Icon name={icon} size={20}/>
    </div>
    <div style={{fontSize:14,fontWeight:600,color:'var(--ink)',marginBottom:6}}>{title}</div>
    {hint && <div style={{fontSize:12,lineHeight:1.55,maxWidth:380,margin:'0 auto 16px'}}>{hint}</div>}
    {action}
  </div>
);

window.V2Icon = V2Icon;
window.v2FileMeta = v2FileMeta;
window.V2StatusPill = V2StatusPill;
window.V2Spinner = V2Spinner;
window.V2Skeleton = V2Skeleton;
window.V2LoadingOverlay = V2LoadingOverlay;
window.V2EmptyHint = V2EmptyHint;