/* global React, PORTAL */
const { useState, useEffect } = React;

const CAT_LABEL = { terms:'Voorwaarden', dpa:'Verwerkersovereenkomst', contract:'Contract', quote:'Offerte', policy:'Policy', other:'Other' };

function fmtSize(b) {
  if (!b) return '';
  if (b < 1048576) return (b/1024).toFixed(0) + ' KB';
  return (b/1048576).toFixed(1) + ' MB';
}

function Documents() {
  const [docs, setDocs]     = useState([]);
  const [filter, setFilter] = useState('all');

  useEffect(() => {
    PORTAL.get('/documents').then(setDocs).catch(()=>{});
  }, []);

  // Group by category
  const categories = [...new Set(docs.map(d=>d.category))];
  const filtered   = filter==='all' ? docs : docs.filter(d=>d.category===filter);

  function download(doc) {
    window.location = `/api/portal/documents/${doc.id}/download`;
  }

  return (
    <div>
      <h1 className="page-title">Documents</h1>
      <div className="page-subtitle">Contracts, terms, and documents shared with you</div>

      <div style={{display:'flex',gap:6,marginBottom:16,flexWrap:'wrap'}}>
        <button className={`btn ${filter==='all'?'btn--primary':'btn--ghost'}`} style={{fontSize:12,padding:'5px 12px'}} onClick={()=>setFilter('all')}>All</button>
        {categories.map(c=>(
          <button key={c} className={`btn ${filter===c?'btn--primary':'btn--ghost'}`} style={{fontSize:12,padding:'5px 12px'}} onClick={()=>setFilter(c)}>
            {CAT_LABEL[c]||c}
          </button>
        ))}
      </div>

      <div className="card" style={{margin:0}}>
        {filtered.length===0
          ? <div className="empty-state">No documents available</div>
          : <div style={{padding:'4px 20px 12px'}}>
            {filtered.map(doc=>(
              <div key={doc.id} className="doc-item">
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontWeight:500,fontSize:13}}>{doc.name}</div>
                  <div className="doc-meta">
                    <span className="badge" style={{marginRight:6}}>{CAT_LABEL[doc.category]||doc.category}</span>
                    {doc.version && <span style={{marginRight:6}}>v{doc.version}</span>}
                    {fmtSize(doc.file_size)}
                    {doc.viewed_at && <span style={{marginLeft:8,color:'var(--ok)'}}>✓ viewed</span>}
                  </div>
                  {doc.description && <div style={{fontSize:11,color:'var(--fg-subtle)',marginTop:3}}>{doc.description}</div>}
                </div>
                <button className="btn btn--ghost" style={{fontSize:12,padding:'5px 12px',flexShrink:0}} onClick={()=>download(doc)}>
                  Download
                </button>
              </div>
            ))}
          </div>
        }
      </div>
    </div>
  );
}
window.Documents = Documents;