// Bulk upload / CSV flow

function BulkUpload({ onClose }) {
  const [step, setStep] = React.useState(1); // 1=drop, 2=mapping, 3=processing, 4=done

  const sampleRows = [
    { url: "https://www.latent.space/p/scaling-laws-2026", title: "On the diminishing returns of larger LLMs", tags: "ai,scaling", collection: "AI & ML", status: "ok" },
    { url: "https://anthropic.com/news/mcp-stateful-2026", title: "MCP spec for stateful tools", tags: "mcp,claude", collection: "AI & ML", status: "ok" },
    { url: "https://every.to/p/the-taste-gap", title: "The taste gap", tags: "design,ai", collection: "Design Systems", status: "ok" },
    { url: "https://maggieappleton.com/garden/personal-kg", title: "Personal knowledge graph", tags: "pkm,kg", collection: "Research", status: "ok" },
    { url: "https://broken-link.example.com/x", title: "(could not fetch)", tags: "", collection: "Inbox", status: "warn" },
    { url: "https://stripe.com/blog/docs-2026", title: "Stripe's docs team plans 2026", tags: "docs", collection: "Long Reads", status: "ok" },
  ];

  return (
    <div className="main-inner" style={{maxWidth: 760}}>
      <div className="page-head">
        <div>
          <h1 className="page-title">Bulk import</h1>
          <p className="page-subtitle">CSV, Pocket export, Raindrop export, or browser bookmarks HTML</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost btn-sm" onClick={onClose}><I.Close className="icon icon-sm" /> Close</button>
        </div>
      </div>

      {/* Steps */}
      <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:24}}>
        {['Source', 'Mapping', 'Process', 'Review'].map((label, i) => (
          <React.Fragment key={i}>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <div style={{
                width:22, height:22, borderRadius:'50%',
                background: i+1 <= step ? 'var(--blue)' : 'var(--surface-3)',
                color: i+1 <= step ? '#fff' : 'var(--text-4)',
                display:'inline-flex', alignItems:'center', justifyContent:'center',
                fontSize:10, fontWeight:700, transition:'all var(--t-base) var(--ease)'
              }}>
                {i+1 < step ? <I.Check className="icon icon-xs" style={{stroke:'#fff', strokeWidth:3}} /> : i+1}
              </div>
              <span style={{fontSize:12, fontWeight: i+1 === step ? 600 : 500, color: i+1 <= step ? 'var(--text-1)' : 'var(--text-4)'}}>{label}</span>
            </div>
            {i < 3 && <div style={{flex:1, height:1, background: i+1 < step ? 'var(--blue)' : 'var(--border)'}}></div>}
          </React.Fragment>
        ))}
      </div>

      {step === 1 && (
        <>
          <div
            className="card fade-up"
            style={{
              padding:32, textAlign:'center', borderStyle:'dashed', cursor:'pointer',
              background:'var(--surface-2)',
            }}
            onClick={() => setStep(2)}
          >
            <div style={{width:48, height:48, borderRadius:12, background:'var(--blue-bg)', color:'var(--blue)', display:'inline-flex', alignItems:'center', justifyContent:'center', margin:'0 auto 14px'}}>
              <I.Upload className="icon" />
            </div>
            <div style={{fontSize:15, fontWeight:600, color:'var(--text-1)', marginBottom:4}}>Drop a file or paste URLs</div>
            <div style={{fontSize:12, color:'var(--text-3)', marginBottom:16}}>CSV, JSON, or Netscape bookmarks HTML · up to 50,000 rows</div>
            <button className="btn btn-primary btn-sm" onClick={(e)=>{e.stopPropagation();setStep(2);}}>Browse files</button>
          </div>

          <div style={{marginTop:20}}>
            <div style={{fontSize:10, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8}}>Or import from</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8}}>
              {[
                { name: "Pocket", desc: "ZIP export" },
                { name: "Raindrop", desc: "CSV / JSON" },
                { name: "Browser", desc: "HTML bookmarks" },
              ].map(s => (
                <button key={s.name} className="card" style={{padding:'12px 14px', textAlign:'left', cursor:'pointer'}}>
                  <div style={{fontSize:13, fontWeight:600, color:'var(--text-1)'}}>{s.name}</div>
                  <div style={{fontSize:11, color:'var(--text-4)', marginTop:2}}>{s.desc}</div>
                </button>
              ))}
            </div>
          </div>
        </>
      )}

      {step === 2 && (
        <div className="card fade-up" style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'14px 16px', borderBottom:'0.5px solid var(--border-sub)', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
            <div>
              <div style={{fontSize:13, fontWeight:600}}>pocket-export-2026.csv</div>
              <div style={{fontSize:11, color:'var(--text-4)'}}>847 rows detected · 6 columns</div>
            </div>
            <div style={{fontSize:11, color:'var(--green-text)', background:'var(--green-bg)', padding:'3px 8px', borderRadius:6, fontWeight:600}}>✓ Auto-mapped</div>
          </div>

          <div style={{padding:16}}>
            <div style={{fontSize:10, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:10}}>Column mapping</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr auto 1fr', gap:'10px 16px', alignItems:'center', fontSize:12}}>
              {[
                ['url', 'URL ✱'],
                ['title', 'Title'],
                ['time_added', 'Saved at'],
                ['tags', 'Tags'],
                ['status', 'Status'],
              ].map(([col, mapped]) => (
                <React.Fragment key={col}>
                  <div className="mono" style={{color:'var(--text-3)', fontSize:11}}>{col}</div>
                  <I.ArrowRight className="icon icon-xs" style={{color:'var(--text-4)'}} />
                  <select className="input" style={{height:30, fontSize:12}}>
                    <option>{mapped}</option>
                  </select>
                </React.Fragment>
              ))}
            </div>
          </div>

          <div style={{padding:16, borderTop:'0.5px solid var(--border-sub)', background:'var(--surface-2)'}}>
            <label style={{display:'flex', alignItems:'flex-start', gap:8, cursor:'pointer'}}>
              <div className="b-checkbox checked" style={{opacity:1, marginTop:2}}>
                <svg viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" /></svg>
              </div>
              <div>
                <div style={{fontSize:13, fontWeight:600, color:'var(--text-1)', display:'flex', alignItems:'center', gap:6}}>
                  <I.Sparkle className="icon icon-xs" style={{color:'var(--blue)'}} /> Use AI to extract metadata
                </div>
                <div style={{fontSize:11, color:'var(--text-3)', marginTop:2}}>Generate titles, summaries, and suggested collections for rows that are missing them. ~2 min for 847 rows.</div>
              </div>
            </label>
          </div>

          <div style={{padding:14, display:'flex', justifyContent:'space-between', borderTop:'0.5px solid var(--border-sub)'}}>
            <button className="btn btn-ghost btn-sm" onClick={()=>setStep(1)}>Back</button>
            <button className="btn btn-primary btn-sm" onClick={()=>setStep(3)}>Start import <I.ArrowRight className="icon icon-xs" /></button>
          </div>
        </div>
      )}

      {step === 3 && (
        <div className="card fade-up" style={{padding:24}}>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
            <div style={{width:24, height:24, borderRadius:7, background:'var(--blue-bg)', color:'var(--blue)', display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
              <I.Sparkle className="icon icon-sm" />
            </div>
            <div style={{fontSize:14, fontWeight:600}}>Importing & enriching with AI…</div>
          </div>
          <div style={{height:6, background:'var(--surface-3)', borderRadius:6, overflow:'hidden', marginBottom:8}}>
            <div style={{height:'100%', width:'68%', background:'var(--blue)', borderRadius:6, transition:'width 0.5s'}}></div>
          </div>
          <div style={{fontSize:11, color:'var(--text-4)', display:'flex', justifyContent:'space-between', marginBottom:24}}>
            <span>576 of 847 · ~38s remaining</span>
            <span className="mono">68%</span>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8}}>
            {[
              ['Fetched', '847', 'var(--green-text)'],
              ['Enriched', '576', 'var(--blue)'],
              ['Duplicates', '12', 'var(--amber-text)'],
              ['Failed', '3', 'var(--red-text)'],
            ].map(([l, n, c]) => (
              <div key={l} style={{padding:'10px 12px', background:'var(--surface-2)', borderRadius:8}}>
                <div style={{fontSize:18, fontWeight:700, color: c, fontFeatureSettings:"'tnum'"}}>{n}</div>
                <div style={{fontSize:10, fontWeight:600, color:'var(--text-4)', textTransform:'uppercase', letterSpacing:'0.06em'}}>{l}</div>
              </div>
            ))}
          </div>

          <div style={{textAlign:'right', marginTop:20}}>
            <button className="btn btn-primary btn-sm" onClick={() => setStep(4)}>Skip to review</button>
          </div>
        </div>
      )}

      {step === 4 && (
        <div className="card fade-up" style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'14px 16px', borderBottom:'0.5px solid var(--border-sub)', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
            <div>
              <div style={{fontSize:13, fontWeight:600, display:'flex', alignItems:'center', gap:6}}>
                <I.Check className="icon icon-sm" style={{color:'var(--green-text)'}} /> 832 imported, 12 duplicates skipped, 3 failed
              </div>
              <div style={{fontSize:11, color:'var(--text-4)'}}>Showing first 6 rows · scroll to see more</div>
            </div>
          </div>
          <div>
            {sampleRows.map((r, i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'10px 16px', borderBottom: i < sampleRows.length-1 ? '0.5px solid var(--border-sub)' : 'none', fontSize:12}}>
                {r.status === 'ok'
                  ? <span style={{width:14, height:14, borderRadius:'50%', background:'var(--green-bg)', color:'var(--green-text)', display:'inline-flex', alignItems:'center', justifyContent:'center'}}><I.Check className="icon" style={{width:9, height:9}} /></span>
                  : <span style={{width:14, height:14, borderRadius:'50%', background:'var(--amber-bg)', color:'var(--amber-text)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:9, fontWeight:700}}>!</span>
                }
                <span style={{flex:1, fontWeight:500, color:'var(--text-1)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r.title}</span>
                <span className="collection-chip"><I.Folder /> {r.collection}</span>
                <span className="mono" style={{fontSize:10, color:'var(--text-4)', maxWidth:160, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{r.url}</span>
              </div>
            ))}
          </div>
          <div style={{padding:14, display:'flex', justifyContent:'space-between', borderTop:'0.5px solid var(--border-sub)'}}>
            <button className="btn btn-ghost btn-sm" onClick={()=>setStep(1)}>Import more</button>
            <button className="btn btn-primary btn-sm" onClick={onClose}>Done <I.ArrowRight className="icon icon-xs" /></button>
          </div>
        </div>
      )}

      <div style={{height:48}} />
    </div>
  );
}

window.BulkUpload = BulkUpload;