// crm-library.jsx — Document Library (Product Literature & Blank Forms)

function LibraryView({ user, showToast }) {
  const [tab,      setTab]      = useState('literature');
  const [docs,     setDocs]     = useState([]);
  const [loading,  setLoading]  = useState(true);
  const [search,   setSearch]   = useState('');
  const [deleting, setDeleting] = useState(null);

  // Inline edit state
  const [editing,  setEditing]  = useState(null);  // doc.id being edited
  const [editName, setEditName] = useState('');
  const [editDesc, setEditDesc] = useState('');
  const [saving,   setSaving]   = useState(false);

  // Upload form state (admin only)
  const [showUpload, setShowUpload] = useState(false);
  const [upName,     setUpName]     = useState('');
  const [upDesc,     setUpDesc]     = useState('');
  const [upFile,     setUpFile]     = useState(null);
  const [uploading,  setUploading]  = useState(false);
  const fileRef = useRef(null);

  const isAdmin = user.isAdmin;

  const load = async () => {
    setLoading(true);
    try {
      const data = await CRM.LibraryAPI.getAll();
      setDocs(data);
    } catch (e) {
      showToast('Failed to load library: ' + e.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(); }, []);

  const tabDocs = docs.filter(d =>
    d.category === tab &&
    (!search || d.name.toLowerCase().includes(search.toLowerCase()) ||
                (d.description || '').toLowerCase().includes(search.toLowerCase()) ||
                d.fileName.toLowerCase().includes(search.toLowerCase()))
  );

  const fmtSz = (bytes) => {
    if (!bytes) return '—';
    if (bytes < 1024)    return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / 1048576).toFixed(1) + ' MB';
  };

  const fmtDate = (dt) => dt ? new Date(dt).toLocaleDateString() : '—';

  const doUpload = async () => {
    if (!upName.trim()) return showToast('Please enter a document name.', 'error');
    if (!upFile)        return showToast('Please select a file.', 'error');
    setUploading(true);
    try {
      const doc = await CRM.LibraryAPI.upload(upName.trim(), tab, upDesc.trim() || null, upFile);
      setDocs(prev => [...prev, doc]);
      setUpName(''); setUpDesc(''); setUpFile(null);
      setShowUpload(false);
      showToast(`"${doc.name}" uploaded successfully.`, 'success');
    } catch (e) {
      showToast('Upload failed: ' + e.message, 'error');
    } finally {
      setUploading(false);
    }
  };

  const startEdit = (doc) => {
    setEditing(doc.id);
    setEditName(doc.name);
    setEditDesc(doc.description || '');
  };

  const cancelEdit = () => { setEditing(null); setEditName(''); setEditDesc(''); };

  const doSave = async (doc) => {
    if (!editName.trim()) return showToast('Name cannot be blank.', 'error');
    setSaving(true);
    try {
      const updated = await CRM.LibraryAPI.update(doc.id, editName.trim(), editDesc.trim() || null);
      setDocs(prev => prev.map(d => d.id === doc.id ? updated : d));
      cancelEdit();
      showToast('Document updated.', 'success');
    } catch (e) {
      showToast('Save failed: ' + e.message, 'error');
    } finally {
      setSaving(false);
    }
  };

  const doDelete = async (doc) => {
    if (!confirm(`Delete "${doc.name}"? This cannot be undone.`)) return;
    setDeleting(doc.id);
    try {
      await CRM.LibraryAPI.delete(doc.id);
      setDocs(prev => prev.filter(d => d.id !== doc.id));
      showToast(`"${doc.name}" deleted.`, 'success');
    } catch (e) {
      showToast('Delete failed: ' + e.message, 'error');
    } finally {
      setDeleting(null);
    }
  };

  const tabLabel = tab === 'literature' ? 'Product Literature' : 'Blank Forms';

  return (
    <div>
      {/* Tabs + action */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
        <div className="tabs" style={{ marginBottom: 0, border: 'none' }}>
          {[
            { id: 'literature', label: '📄 Product Literature' },
            { id: 'forms',      label: '📋 Blank Forms'        },
          ].map(t => (
            <button key={t.id}
              className={`tab-btn${tab === t.id ? ' active' : ''}`}
              onClick={() => { setTab(t.id); setSearch(''); setShowUpload(false); }}>
              {t.label}
              <span style={{ marginLeft: 6, fontSize: 11, fontWeight: 400, color: 'var(--g400)' }}>
                ({docs.filter(d => d.category === t.id).length})
              </span>
            </button>
          ))}
        </div>
        {isAdmin && (
          <button className="btn btn-primary btn-sm"
            onClick={() => setShowUpload(v => !v)}>
            {showUpload ? '✕ Cancel' : '+ Upload'}
          </button>
        )}
      </div>

      {/* Upload panel (admin only) */}
      {isAdmin && showUpload && (
        <div className="card card-pad" style={{ marginBottom: 20 }}>
          <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--navy)', marginBottom: 14 }}>
            Upload to {tabLabel}
          </div>
          <div className="fg fg-2" style={{ marginBottom: 0 }}>
            <div className="field">
              <label>Document Name *</label>
              <input value={upName} onChange={e => setUpName(e.target.value)}
                placeholder="e.g. GT8 Dual Product Sheet" />
            </div>
            <div className="field">
              <label>Description</label>
              <input value={upDesc} onChange={e => setUpDesc(e.target.value)}
                placeholder="Optional short description" />
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
            <input ref={fileRef} type="file" style={{ display: 'none' }}
              onChange={e => setUpFile(e.target.files[0] || null)} />
            <button className="btn btn-ghost btn-sm" onClick={() => fileRef.current?.click()}>
              📁 {upFile ? upFile.name : 'Choose file…'}
            </button>
            {upFile && (
              <span style={{ fontSize: 12, color: 'var(--g400)' }}>{fmtSz(upFile.size)}</span>
            )}
            <button className="btn btn-primary btn-sm" onClick={doUpload}
              disabled={uploading || !upFile || !upName.trim()}
              style={{ marginLeft: 'auto' }}>
              {uploading ? 'Uploading…' : 'Upload'}
            </button>
          </div>
        </div>
      )}

      {/* Search */}
      <div className="search-bar">
        <input className="search-input"
          placeholder={`Search ${tabLabel.toLowerCase()}…`}
          value={search} onChange={e => setSearch(e.target.value)} />
      </div>

      {/* Document list */}
      {loading ? (
        <div className="empty"><div className="empty-icon">⏳</div><div className="empty-text">Loading…</div></div>
      ) : tabDocs.length === 0 ? (
        <div className="empty">
          <div className="empty-icon">{tab === 'literature' ? '📄' : '📋'}</div>
          <div className="empty-text">
            {search ? 'No documents match your search.' : `No ${tabLabel.toLowerCase()} uploaded yet.`}
            {isAdmin && !search && (
              <div style={{ marginTop: 12 }}>
                <button className="btn btn-ghost btn-sm" onClick={() => setShowUpload(true)}>
                  + Upload the first one
                </button>
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="card">
          <table className="tbl">
            <thead>
              <tr>
                <th>Name</th>
                <th>Description</th>
                <th>File</th>
                <th>Size</th>
                <th>Uploaded By</th>
                <th>Date</th>
                <th style={{ width: 100 }}></th>
              </tr>
            </thead>
            <tbody>
              {tabDocs.map(doc => {
                const isEditing = editing === doc.id;
                return (
                  <tr key={doc.id} style={{ cursor: 'default', background: isEditing ? 'var(--off)' : undefined }}>
                    {isEditing ? (
                      <>
                        {/* Inline edit — name + description inputs */}
                        <td style={{ paddingTop: 8, paddingBottom: 8 }}>
                          <input
                            value={editName}
                            onChange={e => setEditName(e.target.value)}
                            onKeyDown={e => { if (e.key === 'Enter') doSave(doc); if (e.key === 'Escape') cancelEdit(); }}
                            autoFocus
                            style={{ width: '100%', border: '1.5px solid var(--navy)', borderRadius: 5, padding: '6px 10px', fontSize: 13, fontFamily: 'var(--font)', outline: 'none' }}
                          />
                        </td>
                        <td style={{ paddingTop: 8, paddingBottom: 8 }}>
                          <input
                            value={editDesc}
                            onChange={e => setEditDesc(e.target.value)}
                            onKeyDown={e => { if (e.key === 'Enter') doSave(doc); if (e.key === 'Escape') cancelEdit(); }}
                            placeholder="Optional description"
                            style={{ width: '100%', border: '1.5px solid var(--g200)', borderRadius: 5, padding: '6px 10px', fontSize: 13, fontFamily: 'var(--font)', outline: 'none' }}
                          />
                        </td>
                        <td colSpan={3} style={{ color: 'var(--g400)', fontSize: 12 }}>{doc.fileName}</td>
                        <td>
                          <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                            <button className="btn btn-primary btn-xs" onClick={() => doSave(doc)} disabled={saving}>
                              {saving ? '…' : '✓ Save'}
                            </button>
                            <button className="btn btn-ghost btn-xs" onClick={cancelEdit} disabled={saving}>
                              Cancel
                            </button>
                          </div>
                        </td>
                      </>
                    ) : (
                      <>
                        <td style={{ fontWeight: 600, color: 'var(--navy)' }}>{doc.name}</td>
                        <td style={{ color: 'var(--g400)', fontWeight: 400 }}>{doc.description || '—'}</td>
                        <td style={{ color: 'var(--g600)', fontWeight: 400, fontSize: 12, fontFamily: 'monospace' }}>
                          {doc.fileName}
                        </td>
                        <td style={{ color: 'var(--g400)', fontWeight: 400 }}>{fmtSz(doc.fileSize)}</td>
                        <td style={{ color: 'var(--g400)', fontWeight: 400 }}>{doc.uploadedByName}</td>
                        <td style={{ color: 'var(--g400)', fontWeight: 400 }}>{fmtDate(doc.createdAt)}</td>
                        <td>
                          <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                            <a href={CRM.LibraryAPI.downloadUrl(doc.id)}
                              className="btn btn-ghost btn-xs"
                              download={doc.fileName}
                              style={{ textDecoration: 'none' }}>
                              ⬇ Download
                            </a>
                            {isAdmin && (
                              <>
                                <button className="btn btn-ghost btn-xs" onClick={() => startEdit(doc)}>
                                  ✏ Edit
                                </button>
                                <button className="btn btn-xs"
                                  style={{ background: '#FEF2F2', color: '#991B1B', border: '1px solid #FECACA' }}
                                  disabled={deleting === doc.id}
                                  onClick={() => doDelete(doc)}>
                                  {deleting === doc.id ? '…' : '🗑'}
                                </button>
                              </>
                            )}
                          </div>
                        </td>
                      </>
                    )}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { LibraryView });