// A6 — Document uploader (admin). Drag-drop + live ingest progress + batch actions.
const A6Uploader = () => {
  const [dragOver, setDragOver] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const [filter, setFilter] = React.useState('alle');

  const docs = [
    { id: 1, name: 'Brandprocedure-2024.pdf', size: '2,4 MB', cat: 'Brandsikring', status: 'ready', phase: 'Klar', progress: 100, chunks: 184, uploaded: '2 min siden', approved: true },
    { id: 2, name: 'ATEX-vejledning-2025.pdf', size: '1,8 MB', cat: 'Sikkerhed', status: 'ingesting', phase: 'Genererer embeddings', progress: 62, chunks: null, uploaded: 'nu', approved: false },
    { id: 3, name: 'Kemi-datablade-bundle.zip', size: '18,2 MB', cat: 'Kemi', status: 'ingesting', phase: 'Chunker tekst', progress: 31, chunks: null, uploaded: 'nu', approved: false },
    { id: 4, name: 'Evakueringsplan-Aarhusvej-12.docx', size: '420 KB', cat: 'Brandsikring', status: 'queued', phase: 'I kø', progress: 0, chunks: null, uploaded: 'nu', approved: false },
    { id: 5, name: 'Nødstop-manual-v3.pdf', size: '680 KB', cat: 'Drift', status: 'ready', phase: 'Klar', progress: 100, chunks: 42, uploaded: '4 min siden', approved: true },
    { id: 6, name: 'Overenskomst-2025-FOA.pdf', size: '1,2 MB', cat: 'HR', status: 'failed', phase: 'OCR fejlede — ikke-læsbar PDF', progress: 100, chunks: 0, uploaded: '5 min siden', approved: false, error: true },
    { id: 7, name: 'Vagtskifte-protokol.xlsx', size: '54 KB', cat: 'Drift', status: 'ready', phase: 'Klar', progress: 100, chunks: 8, uploaded: '10 min siden', approved: false },
  ];

  const filtered = filter === 'alle' ? docs : docs.filter(d => d.status === filter);
  const toggle = (id) => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);

  const statusChip = (d) => {
    const map = {
      queued: { cls: 'chip neutral', icon: 'clock', label: 'I kø' },
      ingesting: { cls: 'chip blue', icon: 'refresh', label: 'Behandles' },
      ready: { cls: 'chip green', icon: 'check', label: 'Klar' },
      failed: { cls: 'chip red', icon: 'close', label: 'Fejlede' },
    }[d.status];
    return <span className={map.cls}><I name={map.icon} className="icon-sm" style={d.status === 'ingesting' ? { animation: 'spin 1s linear infinite' } : {}}/>{map.label}</span>;
  };

  return (
    <div className="vault" style={{ width: '100%', height: '100%', overflow: 'auto', padding: 24, background: 'var(--bg-0)' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
        <div>
          <h2 style={{ fontSize: 20, marginBottom: 2 }}>Dokumenter</h2>
          <p style={{ fontSize: 12, color: 'var(--fg-3)' }}>2.047 dokumenter · 18.412 chunks · sidste ingest nu</p>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost btn-sm"><I name="filter" className="icon-sm"/> Filtrér</button>
          <button className="btn btn-ghost btn-sm"><I name="folder" className="icon-sm"/> Kategorier</button>
          <button className="btn btn-primary btn-sm"><I name="upload" className="icon-sm"/> Upload</button>
        </div>
      </div>

      {/* Summary bar */}
      <div className="card" style={{ padding: '12px 16px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 16, fontSize: 12 }}>
        <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
          <span style={{ color: 'var(--fg-2)' }}>Batch-progress</span>
          <span className="mono" style={{ color: 'var(--fg-0)', fontWeight: 600 }}>5 ud af 7 klar</span>
        </div>
        <div style={{ flex: 1, height: 6, background: 'var(--bg-2)', borderRadius: 3, overflow: 'hidden' }}>
          <div style={{ width: '71%', height: '100%', background: 'linear-gradient(90deg, var(--mode-green), var(--mode-blue))', borderRadius: 3 }}/>
        </div>
        <span className="mono" style={{ color: 'var(--fg-2)' }}>~48 s tilbage</span>
      </div>

      {/* Dropzone */}
      <div
        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
        onDragLeave={() => setDragOver(false)}
        onDrop={(e) => { e.preventDefault(); setDragOver(false); }}
        style={{
          border: `2px dashed ${dragOver ? 'var(--primary)' : 'var(--line)'}`,
          background: dragOver ? 'color-mix(in oklch, var(--primary) 8%, var(--bg-1))' : 'var(--bg-1)',
          borderRadius: 12, padding: '28px 24px', marginBottom: 16,
          display: 'flex', alignItems: 'center', gap: 24,
          transition: 'all 0.15s',
        }}
      >
        <div style={{ width: 48, height: 48, borderRadius: 10, background: 'var(--primary-soft)', color: 'var(--primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I name="upload" size={22}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, color: 'var(--fg-0)', fontWeight: 500, marginBottom: 4 }}>Træk filer hertil eller klik for at vælge</div>
          <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>PDF · Word · Excel · PowerPoint · billeder (OCR) · video (transskription) · op til 500 MB pr. fil</div>
        </div>

        {/* Category + access */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 240 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="label" style={{ width: 72 }}>Kategori</span>
            <div className="input" style={{ height: 30, fontSize: 12, flex: 1 }}>
              <I name="folder" className="icon-sm" style={{ color: 'var(--fg-3)' }}/>
              <input defaultValue="Brandsikring" readOnly style={{ color: 'var(--fg-0)' }}/>
              <I name="chevronDown" className="icon-sm" style={{ color: 'var(--fg-3)' }}/>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="label" style={{ width: 72 }}>Adgang</span>
            <div style={{ display: 'flex', gap: 4, flex: 1 }}>
              {[
                { k: 'alle', l: 'Alle' },
                { k: 'kontrollant', l: 'Kontrollant' },
                { k: 'admin', l: 'Admin' },
              ].map((x, i) => (
                <button key={x.k} className={`btn btn-sm ${i === 0 ? 'btn-primary' : 'btn-soft'}`} style={{ flex: 1, fontSize: 11, height: 30 }}>{x.l}</button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Filter tabs + batch actions */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <div style={{ display: 'flex', gap: 2, background: 'var(--bg-2)', border: '1px solid var(--line-soft)', borderRadius: 7, padding: 2 }}>
          {[
            ['alle', 'Alle', 7], ['queued', 'I kø', 1], ['ingesting', 'Behandles', 2], ['ready', 'Klar', 3], ['failed', 'Fejlede', 1]
          ].map(([k, l, n]) => (
            <button key={k} onClick={() => setFilter(k)} style={{ padding: '6px 12px', borderRadius: 5, fontSize: 12, fontWeight: 500, color: filter === k ? 'var(--fg-0)' : 'var(--fg-2)', background: filter === k ? 'var(--bg-0)' : 'transparent' }}>
              {l} <span style={{ color: 'var(--fg-4)', marginLeft: 4 }}>{n}</span>
            </button>
          ))}
        </div>
        {selected.length > 0 ? (
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ fontSize: 12, color: 'var(--fg-2)' }}>{selected.length} valgt</span>
            <button className="btn btn-soft btn-sm"><I name="check" className="icon-sm"/> Godkend valgte</button>
            <button className="btn btn-danger btn-sm"><I name="trash" className="icon-sm"/> Slet valgte</button>
          </div>
        ) : (
          <div style={{ marginLeft: 'auto', position: 'relative' }}>
            <div className="input" style={{ height: 30, fontSize: 12, width: 220 }}>
              <I name="search" className="icon-sm" style={{ color: 'var(--fg-3)' }}/>
              <input placeholder="Søg efter filnavn..."/>
            </div>
          </div>
        )}
      </div>

      {/* Doc list */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '32px 1.8fr 120px 140px 120px 110px 40px', gap: 12, padding: '10px 14px', borderBottom: '1px solid var(--line-soft)', background: 'var(--bg-2)', fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', alignItems: 'center' }}>
          <input type="checkbox" style={{ accentColor: 'var(--primary)' }}/>
          <span>Navn</span>
          <span>Kategori</span>
          <span>Status</span>
          <span>Chunks</span>
          <span>Uploaded</span>
          <span></span>
        </div>
        {filtered.map(d => (
          <div key={d.id}>
            <div style={{ display: 'grid', gridTemplateColumns: '32px 1.8fr 120px 140px 120px 110px 40px', gap: 12, padding: '12px 14px', borderBottom: '1px solid var(--line-soft)', alignItems: 'center', fontSize: 13, background: selected.includes(d.id) ? 'color-mix(in oklch, var(--primary) 6%, var(--bg-1))' : 'var(--bg-1)' }}>
              <input type="checkbox" checked={selected.includes(d.id)} onChange={() => toggle(d.id)} style={{ accentColor: 'var(--primary)' }}/>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                <I name={d.error ? 'warn' : 'filePdf'} className="icon-lg" style={{ color: d.error ? 'var(--err)' : 'var(--fg-2)' }}/>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ color: 'var(--fg-0)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2, display: 'flex', gap: 8, alignItems: 'center' }}>
                    <span>{d.size}</span>
                    {d.approved && <span style={{ color: 'var(--mode-green)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><I name="check" className="icon-sm"/> Godkendt</span>}
                    {d.status === 'ingesting' && <span className="mono" style={{ color: 'var(--mode-blue)' }}>{d.phase} · {d.progress}%</span>}
                    {d.error && <span style={{ color: 'var(--err)' }}>{d.phase}</span>}
                  </div>
                </div>
              </div>
              <span className="chip neutral">{d.cat}</span>
              <div>
                {statusChip(d)}
                {d.status === 'ingesting' && (
                  <div style={{ height: 3, background: 'var(--bg-2)', borderRadius: 2, marginTop: 6, overflow: 'hidden' }}>
                    <div style={{ width: `${d.progress}%`, height: '100%', background: 'var(--mode-blue)' }}/>
                  </div>
                )}
              </div>
              <span className="mono" style={{ color: 'var(--fg-2)', fontSize: 12 }}>{d.chunks == null ? '—' : d.chunks}</span>
              <span style={{ color: 'var(--fg-3)', fontSize: 12 }}>{d.uploaded}</span>
              <button style={{ color: 'var(--fg-3)', padding: 4, borderRadius: 4 }}><I name="more" className="icon-sm"/></button>
            </div>
            {d.error && (
              <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--line-soft)', background: 'color-mix(in oklch, var(--err) 6%, var(--bg-1))', fontSize: 12, color: 'var(--fg-1)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <I name="warn" className="icon-sm" style={{ color: 'var(--err)' }}/>
                <span><strong style={{ color: 'var(--err)' }}>OCR fejlede.</strong> PDF indeholder scannede billeder uden tekstlag. Prøv OCR-foranalyse eller upload text-based version.</span>
                <button className="btn btn-soft btn-sm" style={{ marginLeft: 'auto' }}><I name="refresh" className="icon-sm"/> Prøv igen med OCR</button>
                <button className="btn btn-ghost btn-sm"><I name="trash" className="icon-sm"/></button>
              </div>
            )}
          </div>
        ))}
      </div>
      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
    </div>
  );
};
window.A6Uploader = A6Uploader;