// Datasheety, Realizácie, Používatelia list + detail používateľa

// ─────────────────────────────────────────────
// Datasheets — full CRUD via WP bridge
// ─────────────────────────────────────────────

// Match categories actually present in wp_datasheets (tech/cert/manual/other)
// plus the aliases used by older admin UI (technical/certificate).
const DS_CATEGORIES = {
  tech:        { label: 'Technický list',         chip: 'navy' },
  technical:   { label: 'Technická dokumentácia', chip: 'navy' },
  manual:      { label: 'Návod na použitie',      chip: 'green' },
  cert:        { label: 'Certifikát',             chip: 'amber' },
  certificate: { label: 'Certifikát',             chip: 'amber' },
  other:       { label: 'Ostatné',                chip: 'gray' },
};
function categoryInfo(cat) {
  return DS_CATEGORIES[cat] || { label: cat || 'Ostatné', chip: 'gray' };
}

function DatasheetUploadModal({ onClose, onDone, notify }) {
  const [title, setTitle] = React.useState('');
  const [category, setCategory] = React.useState('technical');
  const [productId, setProductId] = React.useState('');
  const [productSearch, setProductSearch] = React.useState('');
  const [productResults, setProductResults] = React.useState([]);
  const [file, setFile] = React.useState(null);
  const [searching, setSearching] = React.useState(false);
  const [busy, setBusy] = React.useState(false);

  // Debounced product search
  React.useEffect(() => {
    if (!productSearch || productSearch.length < 2) { setProductResults([]); return; }
    const id = setTimeout(async () => {
      setSearching(true);
      const r = await API.listProducts({ search: productSearch, per_page: 10 });
      setSearching(false);
      if (r.ok) setProductResults(r.body.products || []);
    }, 300);
    return () => clearTimeout(id);
  }, [productSearch]);

  async function submit() {
    if (!title.trim()) return notify('error', 'Zadajte názov.');
    if (!productId) return notify('error', 'Vyberte produkt.');
    if (!file) return notify('error', 'Vyberte PDF súbor.');
    if (file.type !== 'application/pdf') return notify('error', 'Povolené sú len PDF súbory.');

    setBusy(true);
    const r = await API.uploadDatasheet({ file, title: title.trim(), category, product_id: productId });
    setBusy(false);
    if (r.ok || r.body.ok) {
      notify('success', 'Datasheet nahraný.');
      onDone();
      onClose();
    } else {
      notify('error', r.body.message || r.body.error || 'Upload zlyhal.');
    }
  }

  const selectedProduct = productResults.find(p => String(p.id) === String(productId));

  return (
    <Modal
      title="Nový datasheet"
      width={560}
      onClose={onClose}
      footer={
        <>
          <button className="btn" onClick={onClose} disabled={busy}>Zrušiť</button>
          <button className="btn btn-primary" onClick={submit} disabled={busy || !title.trim() || !productId || !file}>
            {busy ? 'Nahrávam…' : 'Nahrať'}
          </button>
        </>
      }
    >
      <div className="vstack" style={{gap:12}}>
        <div className="field">
          <label>Názov *</label>
          <input className="input" value={title} onChange={e => setTitle(e.target.value)} placeholder="Napr. Huawei SUN 2000-5KTL-M1 — Datasheet" autoFocus/>
        </div>

        <div className="field">
          <label>Kategória</label>
          <select className="select" value={category} onChange={e => setCategory(e.target.value)}>
            {['tech','manual','cert','other'].map(k => <option key={k} value={k}>{DS_CATEGORIES[k].label}</option>)}
          </select>
        </div>

        <div className="field">
          <label>Produkt *</label>
          {selectedProduct ? (
            <div className="hstack" style={{padding:'8px 10px', border:'1px solid var(--border)', borderRadius:6, background:'var(--blue-50)'}}>
              <div style={{flex:1}}>
                <div style={{fontWeight:500, fontSize:13}}>{selectedProduct.name}</div>
                <div className="small muted">{selectedProduct.sku || 'bez SKU'} · #{selectedProduct.id}</div>
              </div>
              <button type="button" className="btn btn-xs" onClick={() => { setProductId(''); setProductSearch(''); setProductResults([]); }}>Zmeniť</button>
            </div>
          ) : (
            <>
              <input
                className="input"
                placeholder="Napíšte aspoň 2 znaky — SKU alebo názov"
                value={productSearch}
                onChange={e => setProductSearch(e.target.value)}
              />
              {searching && <div className="small muted" style={{marginTop:4}}>Hľadám…</div>}
              {productResults.length > 0 && (
                <div style={{maxHeight:180, overflow:'auto', border:'1px solid var(--border)', borderRadius:6, marginTop:6, background:'#fff'}}>
                  {productResults.map(p => (
                    <div
                      key={p.id}
                      onClick={() => setProductId(p.id)}
                      style={{padding:'6px 10px', cursor:'pointer', borderBottom:'1px solid var(--border)', fontSize:12.5}}
                      onMouseEnter={e => e.currentTarget.style.background = 'var(--blue-50)'}
                      onMouseLeave={e => e.currentTarget.style.background = '#fff'}
                    >
                      <div style={{fontWeight:500}}>{p.name}</div>
                      <div className="small muted">{p.sku || 'bez SKU'} · #{p.id}</div>
                    </div>
                  ))}
                </div>
              )}
            </>
          )}
        </div>

        <div className="field">
          <label>PDF súbor *</label>
          <input
            type="file"
            accept="application/pdf"
            onChange={e => setFile(e.target.files?.[0] || null)}
            style={{fontSize:12.5}}
          />
          {file && <div className="small muted" style={{marginTop:4}}>📄 {file.name} · {(file.size / 1024 / 1024).toFixed(2)} MB</div>}
        </div>
      </div>
    </Modal>
  );
}

function Datasheets() {
  const [list, setList] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [search, setSearch] = React.useState('');
  const [catFilter, setCatFilter] = React.useState('');
  const [uploading, setUploading] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [editingId, setEditingId] = React.useState(null);
  const [editForm, setEditForm] = React.useState({ title: '', category: '' });
  const [busyId, setBusyId] = React.useState(null);
  const canEdit = window.hasPerm ? window.hasPerm('datasheets.edit') : false;

  async function reload() {
    setLoading(true);
    const r = await API.listDatasheets();
    setLoading(false);
    if (r.status === 503) { setError('not_configured'); return; }
    if (r.status === 404 || r.body.error === 'bridge_not_installed') { setError('bridge_missing'); return; }
    if (!r.ok) { setError(r.body.message || 'Chyba.'); return; }
    setError(null);
    setList(r.body.datasheets || []);
  }
  React.useEffect(() => { reload(); }, []);

  function startEdit(d) {
    setEditingId(d.id);
    setEditForm({ title: d.title || '', category: d.category || 'other' });
  }

  async function saveEdit(id) {
    setBusyId(id);
    const r = await API.updateDatasheet(id, editForm);
    setBusyId(null);
    if (r.ok) { setToast({ kind:'success', text:'Uložené.' }); setEditingId(null); reload(); }
    else      { setToast({ kind:'error', text: r.body.message || 'Chyba.' }); }
  }

  async function removeDs(d) {
    if (!confirm(`Zmazať datasheet "${d.title}"?\n\nSúbor ${d.filename} bude odstránený zo servera.`)) return;
    setBusyId(d.id);
    const r = await API.deleteDatasheet(d.id);
    setBusyId(null);
    if (r.ok) { setToast({ kind:'success', text:'Datasheet zmazaný.' }); reload(); }
    else      { setToast({ kind:'error', text: r.body.message || 'Chyba.' }); }
  }

  if (error === 'not_configured') {
    return (
      <AppShell active="datasheets" crumbs={['CRM','Technická dokumentácia']}>
        <div className="page-head"><div><h1>Datasheety</h1></div></div>
        <NotConnected integration="WordPress"/>
      </AppShell>
    );
  }
  if (error === 'bridge_missing') {
    return (
      <AppShell active="datasheets" crumbs={['CRM','Technická dokumentácia']}>
        <div className="page-head"><div><h1>Datasheety</h1></div></div>
        <div className="card" style={{padding:24, textAlign:'center', maxWidth:560, margin:'30px auto'}}>
          <div style={{fontSize:42}}>🧩</div>
          <h3>WP bridge plugin chýba alebo je starý</h3>
          <p className="muted">Aktualizujte <code>wp-content/mu-plugins/dd-crm-bridge.php</code> na najnovšiu verziu.</p>
        </div>
      </AppShell>
    );
  }

  // Filter + group by product
  const filtered = list.filter(d => {
    if (catFilter && d.category !== catFilter) return false;
    if (!search) return true;
    const s = search.toLowerCase();
    return (d.title || '').toLowerCase().includes(s) ||
           (d.product_name || '').toLowerCase().includes(s) ||
           (d.filename || '').toLowerCase().includes(s);
  });
  const groups = {};
  for (const d of filtered) {
    const key = d.product_id + '|' + (d.product_name || 'Neznámy produkt');
    if (!groups[key]) groups[key] = { product_id: d.product_id, product_name: d.product_name, product_url: d.product_url, items: [] };
    groups[key].items.push(d);
  }
  const groupArr = Object.values(groups);

  return (
    <AppShell active="datasheets" crumbs={['CRM','Technická dokumentácia']}>
      {toast && <Toast kind={toast.kind} onClose={() => setToast(null)}>{toast.text}</Toast>}
      {uploading && <DatasheetUploadModal onClose={() => setUploading(false)} onDone={reload} notify={(k,t) => setToast({kind:k, text:t})}/>}

      <div className="page-head">
        <div>
          <h1>Technická dokumentácia</h1>
          <p>{list.length} súborov · {groupArr.length} produktov</p>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={reload}><Ico.upload/>Obnoviť</button>
          {canEdit && <button className="btn btn-primary" onClick={() => setUploading(true)}><Ico.plus/>Nahrať PDF</button>}
        </div>
      </div>

      <div className="filters">
        <div style={{position:'relative', flex:1, maxWidth:340}}>
          <Ico.search style={{position:'absolute', left:10, top:9, color:'var(--ink-400)'}}/>
          <input className="input" placeholder="Názov, produkt, súbor…" style={{paddingLeft:30, width:'100%'}} value={search} onChange={e => setSearch(e.target.value)}/>
        </div>
        <select className="select" value={catFilter} onChange={e => setCatFilter(e.target.value)}>
          <option value="">Všetky kategórie</option>
          {['tech','manual','cert','other'].map(k => <option key={k} value={k}>{DS_CATEGORIES[k].label}</option>)}
        </select>
      </div>

      {loading ? (
        <div className="muted" style={{padding:20}}>Načítavam…</div>
      ) : groupArr.length === 0 ? (
        <div className="card" style={{padding:30, textAlign:'center', color:'var(--ink-500)'}}>Žiadne datasheety.</div>
      ) : (
        <div className="card" style={{overflow:'hidden'}}>
          {groupArr.map((g, gi) => (
            <div key={g.product_id + '-' + gi}>
              <div style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', background:'var(--blue-50)', borderTop: gi > 0 ? '1px solid var(--border)' : 'none'}}>
                <b style={{fontSize:13}}>{g.product_name || 'Neznámy produkt'}</b>
                <span className="small muted">({g.items.length})</span>
                {g.product_url && (
                  <a href={g.product_url} target="_blank" rel="noopener" className="small" style={{color:'var(--navy-700)', fontWeight:500, marginLeft:'auto'}}>
                    Produkt ↗
                  </a>
                )}
              </div>
              {g.items.map(d => {
                const cat = categoryInfo(d.category);
                const isEditing = editingId === d.id;
                return (
                  <div key={d.id} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 14px', borderTop:'1px solid var(--border)', opacity: busyId === d.id ? 0.5 : 1}}>
                    {isEditing ? (
                      <>
                        <select className="select" value={editForm.category} onChange={e => setEditForm(f => ({ ...f, category: e.target.value }))} style={{minWidth:160}}>
                          {['tech','manual','cert','other'].map(k => <option key={k} value={k}>{DS_CATEGORIES[k].label}</option>)}
                        </select>
                        <Ico.datasheet style={{color:'var(--ink-400)'}}/>
                        <input className="input" value={editForm.title} onChange={e => setEditForm(f => ({ ...f, title: e.target.value }))} style={{flex:1}}/>
                        <button className="btn btn-xs btn-primary" onClick={() => saveEdit(d.id)} disabled={busyId === d.id}>Uložiť</button>
                        <button className="btn btn-xs" onClick={() => setEditingId(null)}>Zrušiť</button>
                      </>
                    ) : (
                      <>
                        <span className={`chip ${cat.chip}`} style={{minWidth:160, justifyContent:'center'}}>{cat.label}</span>
                        <Ico.datasheet style={{color:'var(--ink-400)'}}/>
                        <div style={{flex:1, minWidth:0}}>
                          <div style={{fontWeight:500, fontSize:13, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{d.title}</div>
                          <div className="small muted">{d.filename}</div>
                        </div>
                        <a className="btn btn-xs" href={d.file_url} target="_blank" rel="noopener"><Ico.download/>Stiahnuť</a>
                        {canEdit && <button className="btn btn-xs" onClick={() => startEdit(d)}>Upraviť</button>}
                        {canEdit && <button className="btn btn-xs btn-danger" onClick={() => removeDs(d)} disabled={busyId === d.id}><Ico.x/></button>}
                      </>
                    )}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      )}
    </AppShell>
  );
}

function RealizationEditModal({ realization, isNew = false, onClose, onSaved, notify }) {
  // `current` is null while creating (no id yet). After create we switch to edit mode.
  const [current, setCurrent] = React.useState(isNew ? null : realization);
  const [form, setForm] = React.useState({
    nazov: realization?.nazov || '',
    popis: realization?.popis || '',
    typ:   realization?.typ   || 'firma',
  });
  const [busy, setBusy] = React.useState(null); // 'save' | 'upload' | 'delimg:<id>'
  const fileInputRef = React.useRef(null);

  function set(k, v) { setForm(prev => ({ ...prev, [k]: v })); }

  async function saveMeta() {
    if (!form.nazov.trim()) return notify('error', 'Zadajte názov.');
    setBusy('save');
    if (!current) {
      const r = await API.createRealization(form);
      if (r.status === 201 || r.ok) {
        // Fetch the freshly created one (with images array) and switch to edit mode
        const d = await API.getRealization(r.body.id);
        if (d.ok) setCurrent(d.body.realization);
        notify('success', 'Realizácia vytvorená. Teraz pridajte fotky.');
        onSaved();
      } else {
        notify('error', r.body.message || 'Nepodarilo sa vytvoriť.');
      }
    } else {
      const r = await API.updateRealization(current.id, form);
      if (r.ok) { notify('success', 'Uložené.'); onSaved(); }
      else      { notify('error', r.body.message || 'Nepodarilo sa uložiť.'); }
    }
    setBusy(null);
  }

  async function uploadFiles(files) {
    if (!current) return notify('error', 'Najprv uložte realizáciu.');
    if (!files || !files.length) return;
    setBusy('upload');
    const r = await API.uploadRealizationImages(current.id, files);
    if (r.ok && r.body.ok) {
      // Merge new images into current
      const updated = { ...current, images: [...(current.images || []), ...(r.body.added || [])] };
      setCurrent(updated);
      notify('success', `Nahrané: ${r.body.count} fotiek.`);
      onSaved();
    } else {
      notify('error', r.body.message || 'Upload zlyhal.');
    }
    setBusy(null);
    if (fileInputRef.current) fileInputRef.current.value = '';
  }

  async function deleteImg(img) {
    if (!current) return;
    if (!confirm('Zmazať túto fotku?')) return;
    setBusy('delimg:' + img.id);
    const r = await API.deleteRealizationImage(current.id, img.id);
    if (r.ok) {
      setCurrent({ ...current, images: (current.images || []).filter(i => i.id !== img.id) });
      notify('success', 'Fotka zmazaná.');
      onSaved();
    } else {
      notify('error', r.body.message || 'Nepodarilo sa zmazať.');
    }
    setBusy(null);
  }

  const title = current
    ? `Upraviť realizáciu #${current.id}`
    : 'Nová realizácia';

  return (
    <Modal
      title={title}
      width={720}
      onClose={onClose}
      footer={
        <>
          <button className="btn" onClick={onClose} disabled={busy === 'save' || busy === 'upload'}>
            {current ? 'Zavrieť' : 'Zrušiť'}
          </button>
          <button className="btn btn-primary" onClick={saveMeta} disabled={!!busy || !form.nazov.trim()}>
            {busy === 'save' ? 'Ukladám…' : (current ? 'Uložiť zmeny' : 'Vytvoriť')}
          </button>
        </>
      }
    >
      <div className="vstack" style={{gap:10}}>
        <div className="field">
          <label>Názov realizácie *</label>
          <input className="input" value={form.nazov} onChange={e => set('nazov', e.target.value)} autoFocus/>
        </div>
        <div className="field">
          <label>Typ</label>
          <select className="select" value={form.typ} onChange={e => set('typ', e.target.value)}>
            <option value="firma">Firemná realizácia</option>
            <option value="dom">Domová realizácia</option>
          </select>
        </div>
        <div className="field">
          <label>Popis</label>
          <textarea className="textarea" value={form.popis} onChange={e => set('popis', e.target.value)} rows={6} placeholder="Panely, meniče, výkon, lokalita, …"/>
        </div>

        {/* Fotky — dostupné len po vytvorení */}
        <div className="card" style={{padding:12}}>
          <div className="hstack" style={{marginBottom:8}}>
            <div className="small muted" style={{textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600, flex:1}}>
              Fotky {current ? `(${current.images?.length || 0})` : ''}
            </div>
            <button
              type="button"
              className="btn btn-sm"
              disabled={!current || busy === 'upload'}
              onClick={() => fileInputRef.current && fileInputRef.current.click()}
              title={!current ? 'Najprv uložte realizáciu' : ''}
            >
              {busy === 'upload' ? 'Nahrávam…' : <><Ico.upload/>Pridať fotky</>}
            </button>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/jpeg,image/png,image/webp,image/gif"
              multiple
              style={{display:'none'}}
              onChange={e => uploadFiles(Array.from(e.target.files || []))}
            />
          </div>
          {!current ? (
            <div className="small muted" style={{padding:14, textAlign:'center', border:'1px dashed var(--border-strong)', borderRadius:8}}>
              Najprv uložte metadáta realizácie, potom môžete nahrať fotky.
            </div>
          ) : (current.images || []).length === 0 ? (
            <div className="small muted" style={{padding:14, textAlign:'center', border:'1px dashed var(--border-strong)', borderRadius:8}}>
              Žiadne fotky. Kliknite na "Pridať fotky" a nahrajte JPG/PNG/WEBP.
            </div>
          ) : (
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(110px, 1fr))', gap:6}}>
              {current.images.map(img => (
                <div key={img.id} style={{position:'relative', borderRadius:6, overflow:'hidden', border:'1px solid var(--border)'}}>
                  <img src={img.url} alt="" style={{width:'100%', height:90, objectFit:'cover', display:'block'}}/>
                  <button
                    type="button"
                    className="btn btn-xs btn-danger"
                    style={{position:'absolute', top:4, right:4, padding:'0 4px', height:18, minWidth:18}}
                    onClick={() => deleteImg(img)}
                    disabled={busy === 'delimg:' + img.id}
                    title="Zmazať fotku"
                  >×</button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
}

function Realizations() {
  const [list, setList] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [filter, setFilter] = React.useState('all');
  const [editing, setEditing] = React.useState(null);
  const [creating, setCreating] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [busyId, setBusyId] = React.useState(null);
  const canEdit = window.hasPerm ? window.hasPerm('gallery.edit') : false;
  const canCreate = window.hasPerm ? window.hasPerm('gallery.create') : false;
  const canDelete = window.hasPerm ? window.hasPerm('gallery.delete') : false;

  async function reload() {
    setLoading(true);
    const r = await API.listRealizations();
    setLoading(false);
    if (r.status === 503) { setError('not_configured'); return; }
    if (r.status === 404 || r.body.error === 'bridge_not_installed') { setError('bridge_missing'); return; }
    if (!r.ok) { setError(r.body.message || 'Chyba.'); return; }
    setError(null);
    setList(r.body.realizations || []);
  }
  React.useEffect(() => { reload(); }, []);

  async function openEdit(item) {
    // Re-fetch full detail (with images) from server so we have fresh data
    const r = await API.getRealization(item.id);
    if (r.ok) setEditing(r.body.realization);
    else setToast({ kind:'error', text: r.body.message || 'Nepodarilo sa načítať detail.' });
  }

  async function remove(item) {
    if (!confirm(`Zmazať realizáciu "${item.nazov}" vrátane ${item.images?.length || 0} fotiek?`)) return;
    setBusyId(item.id);
    const r = await API.deleteRealization(item.id);
    setBusyId(null);
    if (r.ok) { setToast({ kind:'success', text:'Realizácia zmazaná.' }); reload(); }
    else      { setToast({ kind:'error', text: r.body.message || 'Nepodarilo sa zmazať.' }); }
  }

  if (error === 'not_configured') {
    return (
      <AppShell active="gallery" crumbs={['CRM','Realizácie']}>
        <div className="page-head"><div><h1>Realizácie</h1></div></div>
        <NotConnected integration="WordPress" message="Pre realizácie pripojte WordPress."/>
      </AppShell>
    );
  }
  if (error === 'bridge_missing') {
    return (
      <AppShell active="gallery" crumbs={['CRM','Realizácie']}>
        <div className="page-head"><div><h1>Realizácie</h1></div></div>
        <div className="card" style={{padding:24, textAlign:'center', maxWidth:560, margin:'30px auto'}}>
          <div style={{fontSize:42}}>🧩</div>
          <h3>WP bridge plugin chýba</h3>
          <p className="muted">Nahrajte <code>wp-plugin/dd-crm-bridge.php</code> do <code>wp-content/mu-plugins/</code>.</p>
        </div>
      </AppShell>
    );
  }

  const filtered = filter === 'all' ? list : list.filter(r => r.typ === filter);

  return (
    <AppShell active="gallery" crumbs={['CRM','Realizácie']}>
      {toast && <Toast kind={toast.kind} onClose={() => setToast(null)}>{toast.text}</Toast>}
      {editing && (
        <RealizationEditModal
          realization={editing}
          onClose={() => setEditing(null)}
          onSaved={reload}
          notify={(kind, text) => setToast({ kind, text })}
        />
      )}
      {creating && (
        <RealizationEditModal
          isNew
          realization={{ nazov: '', popis: '', typ: 'firma', images: [] }}
          onClose={() => setCreating(false)}
          onSaved={reload}
          notify={(kind, text) => setToast({ kind, text })}
        />
      )}

      <div className="page-head">
        <div>
          <h1>Realizácie</h1>
          <p>{list.length} projektov · {list.filter(r => r.typ === 'firma').length} firemných · {list.filter(r => r.typ === 'dom').length} domových</p>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={reload}><Ico.upload/>Obnoviť</button>
          {canCreate && <button className="btn btn-primary" onClick={() => setCreating(true)}><Ico.plus/>Nová realizácia</button>}
        </div>
      </div>

      <div className="filters">
        <div className="seg">
          <button className={filter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>Všetky</button>
          <button className={filter === 'firma' ? 'active' : ''} onClick={() => setFilter('firma')}>Firemné</button>
          <button className={filter === 'dom' ? 'active' : ''} onClick={() => setFilter('dom')}>Domové</button>
        </div>
      </div>

      {loading ? (
        <div className="muted" style={{padding:20}}>Načítavam…</div>
      ) : filtered.length === 0 ? (
        <div className="card" style={{padding:30, textAlign:'center', color:'var(--ink-500)'}}>Žiadne realizácie v tomto filtri.</div>
      ) : (
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:14}}>
          {filtered.map(r => (
            <div key={r.id} className="card" style={{overflow:'hidden', opacity: busyId === r.id ? 0.5 : 1}}>
              <div style={{
                height: 160,
                background: r.thumbnail_url
                  ? `url(${r.thumbnail_url}) center/cover no-repeat`
                  : 'linear-gradient(135deg, rgba(14,39,68,0.55), rgba(26,63,107,0.35)), repeating-conic-gradient(#0b1a2e 0 25%, #1a3f6b 0 50%)',
                position: 'relative',
              }}>
                <span
                  className={`chip ${r.typ === 'firma' ? 'navy' : 'green'}`}
                  style={{position:'absolute', top:10, left:10}}
                >
                  {r.typ === 'firma' ? 'Firemná' : 'Domová'}
                </span>
                {r.images && r.images.length > 0 && (
                  <span className="chip" style={{position:'absolute', top:10, right:10, background:'rgba(255,255,255,0.9)'}}>
                    {r.images.length} fotiek
                  </span>
                )}
              </div>
              <div style={{padding:'12px 14px'}}>
                <div style={{fontWeight:600, fontSize:14}}>{r.nazov}</div>
                {r.popis && <div className="small muted" style={{marginTop:6, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{r.popis}</div>}
                <div className="divider" style={{margin:'10px 0'}}/>
                <div className="hstack">
                  <div className="small muted">{formatDate ? formatDate(r.datum_vytvorenia) : (r.datum_vytvorenia || '').slice(0, 10)}</div>
                  <div className="hstack" style={{marginLeft:'auto'}}>
                    {canEdit && <button className="btn btn-xs" onClick={() => openEdit(r)}>Upraviť</button>}
                    {canDelete && <button className="btn btn-xs btn-danger" style={{marginLeft:4}} onClick={() => remove(r)} disabled={busyId === r.id}><Ico.x/></button>}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </AppShell>
  );
}

// ─────────────────────────────────────────────
// UsersList — Zákazníci z WooCommerce (real data)
// ─────────────────────────────────────────────
function UsersList() {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [search, setSearch] = React.useState('');
  const [filter, setFilter] = React.useState('all'); // all | b2b | b2c | pending
  const [page, setPage] = React.useState(1);

  async function reload() {
    setLoading(true);
    const params = { per_page: 25, page };
    if (search) params.search = search;
    const r = await API.listCustomers(params);
    setLoading(false);
    if (r.status === 503) { setError('not_configured'); return; }
    if (!r.ok) { setError(r.body.message || 'Chyba.'); return; }
    setError(null);
    setData(r.body);
  }

  React.useEffect(() => { reload(); /* eslint-disable-next-line */ }, [page]);
  React.useEffect(() => {
    const id = setTimeout(() => { setPage(1); reload(); }, 350);
    return () => clearTimeout(id);
    // eslint-disable-next-line
  }, [search]);

  if (error === 'not_configured') {
    return (
      <AppShell active="customers" crumbs={['CRM','Zákazníci']}>
        <div className="page-head"><div><h1>Zákazníci</h1></div></div>
        <NotConnected integration="WooCommerce"/>
      </AppShell>
    );
  }

  let customers = data?.customers || [];
  if (filter === 'b2b')     customers = customers.filter(c => c.is_company);
  if (filter === 'b2c')     customers = customers.filter(c => !c.is_company);
  if (filter === 'pending') customers = customers.filter(c => c.b2b_status === 'pending');

  const total = data?.total || 0;
  const totalPages = data?.totalPages || 1;

  return (
    <AppShell active="customers" crumbs={['CRM','Zákazníci']}>
      <div className="page-head">
        <div>
          <h1>Zákazníci</h1>
          <p>{total} zákazníkov · WooCommerce · B2B / B2C</p>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={reload}><Ico.upload/>Obnoviť</button>
        </div>
      </div>

      <div className="filters">
        <div style={{position:'relative', flex:1, maxWidth:340}}>
          <Ico.search style={{position:'absolute', left:10, top:9, color:'var(--ink-400)'}}/>
          <input className="input" placeholder="Meno, e-mail, firma, IČO…" style={{paddingLeft:30, width:'100%'}} value={search} onChange={e => setSearch(e.target.value)}/>
        </div>
        <div className="seg">
          <button className={filter === 'all'     ? 'active' : ''} onClick={() => setFilter('all')}>Všetci</button>
          <button className={filter === 'b2b'     ? 'active' : ''} onClick={() => setFilter('b2b')}>B2B</button>
          <button className={filter === 'b2c'     ? 'active' : ''} onClick={() => setFilter('b2c')}>B2C</button>
          <button className={filter === 'pending' ? 'active' : ''} onClick={() => setFilter('pending')}>Pending B2B</button>
        </div>
      </div>

      <div className="card" style={{overflow:'hidden'}}>
        {loading && <div style={{padding:20}} className="muted">Načítavam…</div>}
        {!loading && (
          <table className="tbl">
            <thead><tr>
              <th>Meno / Login</th><th>E-mail</th><th>Firma</th><th>IČO</th><th>Segment</th><th>Cenník</th><th style={{textAlign:'right'}}>Objednávky</th><th></th>
            </tr></thead>
            <tbody>
              {customers.length === 0 && (
                <tr><td colSpan={8} style={{textAlign:'center', padding:30, color:'var(--ink-500)'}}>Žiadni zákazníci.</td></tr>
              )}
              {customers.map(c => (
                <tr key={c.id}>
                  <td>
                    <div style={{color:'var(--navy-700)', fontWeight:500}}>{c.username || '—'}</div>
                    {(c.first_name || c.last_name) && <div className="small muted">{(c.first_name + ' ' + c.last_name).trim()}</div>}
                  </td>
                  <td>{c.email}</td>
                  <td>{c.company_name || c.billing_company || '—'}</td>
                  <td className="mono small">{c.company_id || '—'}</td>
                  <td>
                    {c.is_company ? <span className="chip navy">B2B</span> : <span className="chip gray">B2C</span>}
                    {c.b2b_status === 'pending' && <span className="chip amber" style={{marginLeft:4, padding:'0 5px', fontSize:10}}>pending</span>}
                  </td>
                  <td>{c.has_individual_prices ? <span className="chip green dot">Áno</span> : <span className="muted small">—</span>}</td>
                  <td style={{textAlign:'right'}} className="small">{c.orders_count != null ? c.orders_count : '—'}</td>
                  <td style={{textAlign:'right'}}><a className="btn btn-xs btn-primary" href={`#/customer?id=${c.id}`}>Detail</a></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        {totalPages > 1 && (
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 14px', borderTop:'1px solid var(--border)', fontSize:12}}>
            <span className="muted">Strana {page} z {totalPages} · {total} záznamov</span>
            <div className="hstack">
              <button className="btn btn-xs" disabled={page <= 1} onClick={() => setPage(p => Math.max(1, p - 1))}>← Prev</button>
              <button className="btn btn-xs" disabled={page >= totalPages} onClick={() => setPage(p => Math.min(totalPages, p + 1))}>Next →</button>
            </div>
          </div>
        )}
      </div>
    </AppShell>
  );
}

// ─────────────────────────────────────────────
// UserDetail — full editor for a single WC/WP customer
// ─────────────────────────────────────────────

function useCustomerQueryId() {
  const [id, setId] = React.useState(() => {
    const h = window.location.hash.split('?')[1] || '';
    return new URLSearchParams(h).get('id') || '';
  });
  React.useEffect(() => {
    const on = () => {
      const h = window.location.hash.split('?')[1] || '';
      setId(new URLSearchParams(h).get('id') || '');
    };
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  return id;
}

function UserDetail() {
  const id = useCustomerQueryId();
  const [customer, setCustomer] = React.useState(null);
  const [form, setForm] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [busy, setBusy] = React.useState(null);
  const [toast, setToast] = React.useState(null);
  const [tab, setTab] = React.useState('account'); // account | billing | shipping | company | security
  const [passwordModal, setPasswordModal] = React.useState(null); // {password}
  const canEdit = window.hasPerm ? window.hasPerm('users_customers.edit') : false;

  async function reload() {
    if (!id) { setError('Chýba ID.'); setLoading(false); return; }
    setLoading(true);
    const r = await API.getCustomer(id);
    setLoading(false);
    if (r.ok) {
      const c = r.body.customer;
      setCustomer(c);
      setForm({
        first_name: c.first_name || '',
        last_name:  c.last_name || '',
        email:      c.email || '',
        role:       c.role || 'customer',
        billing:    {
          first_name: c.first_name || '',
          last_name:  c.last_name || '',
          company:    c.billing_company || '',
          phone:      c.billing_phone || '',
          email:      c.email || '',
          address_1:  c.billing?.address_1 || '',
          address_2:  c.billing?.address_2 || '',
          city:       c.billing_city || '',
          postcode:   c.billing?.postcode || '',
          country:    c.billing?.country || 'SK',
          state:      c.billing?.state || '',
        },
        shipping: {
          first_name: c.shipping?.first_name || '',
          last_name:  c.shipping?.last_name || '',
          address_1:  c.shipping?.address_1 || '',
          address_2:  c.shipping?.address_2 || '',
          city:       c.shipping?.city || '',
          postcode:   c.shipping?.postcode || '',
          country:    c.shipping?.country || 'SK',
          phone:      c.shipping?.phone || '',
        },
        company_name:         c.company_name || '',
        company_id:           c.company_id || '',
        company_icdph:        c.company_icdph || '',
        register_as_company:  !!c.is_company,
        b2b_request_status:   c.b2b_status || '',
        individualny_cennik:  !!c.has_individual_prices,
      });
      setError('');
    } else {
      setError(r.body.message || 'Nepodarilo sa načítať zákazníka.');
    }
  }
  React.useEffect(() => { reload(); /* eslint-disable-next-line */ }, [id]);

  function setPath(path, value) {
    setForm(prev => {
      const next = { ...prev };
      const parts = path.split('.');
      let cur = next;
      for (let i = 0; i < parts.length - 1; i++) {
        cur[parts[i]] = { ...cur[parts[i]] };
        cur = cur[parts[i]];
      }
      cur[parts[parts.length - 1]] = value;
      return next;
    });
  }

  async function save() {
    setBusy('save');
    const payload = {
      first_name: form.first_name,
      last_name: form.last_name,
      email: form.email,
      role: form.role,
      billing: form.billing,
      shipping: form.shipping,
      company_name: form.company_name,
      company_id: form.company_id,
      company_icdph: form.company_icdph,
      register_as_company: form.register_as_company,
      b2b_request_status: form.b2b_request_status,
      individualny_cennik: form.individualny_cennik,
    };
    const r = await API.updateCustomer(id, payload);
    setBusy(null);
    if (r.ok) { setToast({ kind: 'success', text: 'Uložené.' }); reload(); }
    else      { setToast({ kind: 'error',   text: r.body.message || r.body.error || 'Chyba.' }); }
  }

  async function generatePassword() {
    if (!confirm('Vygenerovať nové heslo pre tohto zákazníka? Heslo sa zobrazí raz — uložte si ho.')) return;
    setBusy('pwd-gen');
    const r = await API.setCustomerPassword(id, null); // backend generuje
    setBusy(null);
    if (r.ok) { setPasswordModal({ password: r.body.password }); }
    else      { setToast({ kind:'error', text: r.body.message || 'Chyba.' }); }
  }

  async function sendReset() {
    if (!confirm(`Odoslať reset-password e-mail na ${customer.email}?`)) return;
    setBusy('reset');
    const r = await API.sendCustomerResetEmail(id);
    setBusy(null);
    if (r.ok) { setToast({ kind:'success', text: 'E-mail odoslaný.' }); }
    else      { setToast({ kind:'error',   text: r.body.message || 'Chyba.' }); }
  }

  if (loading) return <AppShell active="customers" crumbs={['CRM','Zákazníci','…']}><div style={{padding:20}} className="muted">Načítavam…</div></AppShell>;
  if (error) return (
    <AppShell active="customers" crumbs={['CRM','Zákazníci']}>
      <div className="card" style={{padding:24, color:'var(--red-500)'}}>{error}</div>
    </AppShell>
  );
  if (!customer || !form) return null;

  const displayName = (form.first_name + ' ' + form.last_name).trim() || customer.username || customer.email;

  return (
    <AppShell active="customers" crumbs={['CRM','Zákazníci', displayName]}>
      {toast && <Toast kind={toast.kind} onClose={() => setToast(null)}>{toast.text}</Toast>}
      {passwordModal && (
        <Modal
          title="Nové heslo bolo vygenerované"
          onClose={() => setPasswordModal(null)}
          footer={<button className="btn btn-primary" onClick={() => setPasswordModal(null)}>Zavrieť</button>}
          width={460}
        >
          <div className="small muted" style={{marginBottom:10}}>
            Odovzdajte heslo zákazníkovi cez bezpečný kanál (SMS, telefón). V logoch CRM sa neukladá.
          </div>
          <div className="hstack" style={{gap:8}}>
            <input className="input mono" value={passwordModal.password} readOnly style={{flex:1, fontSize:14}}/>
            <button className="btn btn-sm" onClick={() => navigator.clipboard && navigator.clipboard.writeText(passwordModal.password)}>Kopírovať</button>
          </div>
        </Modal>
      )}

      <div className="page-head">
        <div>
          <div className="hstack" style={{marginBottom:4}}>
            <h1 style={{margin:0}}>{displayName}</h1>
            {form.register_as_company && <span className="chip navy dot">B2B</span>}
            {form.individualny_cennik && <span className="chip green dot">Individuálny cenník</span>}
            {form.b2b_request_status === 'pending' && <span className="chip amber dot">B2B pending</span>}
            {form.b2b_request_status === 'denied' && <span className="chip red dot">B2B zamietnuté</span>}
          </div>
          <p>
            Login <b>{customer.username}</b> · #{customer.id}
            {customer.date_created && <> · registrovaný {formatDate(customer.date_created)}</>}
            {customer.orders_count != null && <> · {customer.orders_count} objednávok</>}
            {customer.total_spent && customer.total_spent !== '0.00' && <> · celkovo {formatCurrency(parseFloat(customer.total_spent))}</>}
          </p>
        </div>
        <div className="page-head-actions">
          <a href="#/customers" className="btn">← Späť</a>
          {canEdit && <a className="btn" href={`#/pricing`} onClick={(e) => { e.preventDefault(); window.location.hash = `#/pricing`; }}>Individuálne ceny</a>}
          {canEdit && <button className="btn btn-primary" onClick={save} disabled={busy === 'save'}>{busy === 'save' ? 'Ukladám…' : 'Uložiť zmeny'}</button>}
        </div>
      </div>

      <div className="tabs">
        <button className={tab === 'account' ? 'active' : ''} onClick={() => setTab('account')}>Účet</button>
        <button className={tab === 'billing' ? 'active' : ''} onClick={() => setTab('billing')}>Fakturačné údaje</button>
        <button className={tab === 'shipping' ? 'active' : ''} onClick={() => setTab('shipping')}>Dodacia adresa</button>
        <button className={tab === 'company' ? 'active' : ''} onClick={() => setTab('company')}>Firma / B2B</button>
        <button className={tab === 'security' ? 'active' : ''} onClick={() => setTab('security')}>Heslo / Bezpečnosť</button>
      </div>

      {tab === 'account' && (
        <div className="card">
          <div className="card-head"><h3>Kontaktné údaje</h3></div>
          <div className="card-body" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            <div className="field"><label>Meno</label><input className="input" value={form.first_name} onChange={e => setPath('first_name', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Priezvisko</label><input className="input" value={form.last_name} onChange={e => setPath('last_name', e.target.value)} disabled={!canEdit}/></div>
            <div className="field" style={{gridColumn:'span 2'}}><label>E-mail</label><input className="input" type="email" value={form.email} onChange={e => setPath('email', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Prihlasovacie meno</label><input className="input mono" value={customer.username} readOnly/></div>
            <div className="field">
              <label>Rola</label>
              <select className="select" value={form.role} onChange={e => setPath('role', e.target.value)} disabled={!canEdit}>
                <option value="customer">customer</option>
                <option value="firemny_zakaznik">firemny_zakaznik (B2B)</option>
                <option value="subscriber">subscriber</option>
              </select>
            </div>
          </div>
        </div>
      )}

      {tab === 'billing' && (
        <div className="card">
          <div className="card-head"><h3>Fakturačná adresa</h3></div>
          <div className="card-body" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            <div className="field"><label>Meno</label><input className="input" value={form.billing.first_name} onChange={e => setPath('billing.first_name', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Priezvisko</label><input className="input" value={form.billing.last_name} onChange={e => setPath('billing.last_name', e.target.value)} disabled={!canEdit}/></div>
            <div className="field" style={{gridColumn:'span 2'}}><label>Firma (billing_company)</label><input className="input" value={form.billing.company} onChange={e => setPath('billing.company', e.target.value)} disabled={!canEdit}/></div>
            <div className="field" style={{gridColumn:'span 2'}}><label>Adresa (riadok 1)</label><input className="input" value={form.billing.address_1} onChange={e => setPath('billing.address_1', e.target.value)} disabled={!canEdit}/></div>
            <div className="field" style={{gridColumn:'span 2'}}><label>Adresa (riadok 2)</label><input className="input" value={form.billing.address_2} onChange={e => setPath('billing.address_2', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Mesto</label><input className="input" value={form.billing.city} onChange={e => setPath('billing.city', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>PSČ</label><input className="input" value={form.billing.postcode} onChange={e => setPath('billing.postcode', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Krajina (ISO-2)</label><input className="input" value={form.billing.country} onChange={e => setPath('billing.country', e.target.value.toUpperCase())} maxLength={2} disabled={!canEdit}/></div>
            <div className="field"><label>Telefón</label><input className="input" value={form.billing.phone} onChange={e => setPath('billing.phone', e.target.value)} disabled={!canEdit}/></div>
            <div className="field" style={{gridColumn:'span 2'}}><label>Fakturačný e-mail (ak sa líši od účtu)</label><input className="input" value={form.billing.email} onChange={e => setPath('billing.email', e.target.value)} disabled={!canEdit}/></div>
          </div>
        </div>
      )}

      {tab === 'shipping' && (
        <div className="card">
          <div className="card-head">
            <h3>Dodacia adresa</h3>
            <button className="btn btn-sm" type="button" disabled={!canEdit} onClick={() => setForm(prev => ({ ...prev, shipping: {
              first_name: prev.billing.first_name,
              last_name:  prev.billing.last_name,
              address_1:  prev.billing.address_1,
              address_2:  prev.billing.address_2,
              city:       prev.billing.city,
              postcode:   prev.billing.postcode,
              country:    prev.billing.country,
              phone:      prev.billing.phone,
            }}))}>Skopírovať z fakturačnej</button>
          </div>
          <div className="card-body" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            <div className="field"><label>Meno</label><input className="input" value={form.shipping.first_name} onChange={e => setPath('shipping.first_name', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Priezvisko</label><input className="input" value={form.shipping.last_name} onChange={e => setPath('shipping.last_name', e.target.value)} disabled={!canEdit}/></div>
            <div className="field" style={{gridColumn:'span 2'}}><label>Adresa (riadok 1)</label><input className="input" value={form.shipping.address_1} onChange={e => setPath('shipping.address_1', e.target.value)} disabled={!canEdit}/></div>
            <div className="field" style={{gridColumn:'span 2'}}><label>Adresa (riadok 2)</label><input className="input" value={form.shipping.address_2} onChange={e => setPath('shipping.address_2', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Mesto</label><input className="input" value={form.shipping.city} onChange={e => setPath('shipping.city', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>PSČ</label><input className="input" value={form.shipping.postcode} onChange={e => setPath('shipping.postcode', e.target.value)} disabled={!canEdit}/></div>
            <div className="field"><label>Krajina (ISO-2)</label><input className="input" value={form.shipping.country} onChange={e => setPath('shipping.country', e.target.value.toUpperCase())} maxLength={2} disabled={!canEdit}/></div>
            <div className="field"><label>Telefón</label><input className="input" value={form.shipping.phone} onChange={e => setPath('shipping.phone', e.target.value)} disabled={!canEdit}/></div>
          </div>
        </div>
      )}

      {tab === 'company' && (
        <div className="card">
          <div className="card-head">
            <h3>Firemné údaje / B2B status</h3>
            <div className="small muted">user_meta: <code>register_as_company</code>, <code>company_name</code>, <code>company_id</code>, <code>company_icdph</code>, <code>b2b_request_status</code>, <code>individualny_cennik</code></div>
          </div>
          <div className="card-body" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            <div className="field" style={{gridColumn:'span 2'}}>
              <label className="checkbox">
                <input type="checkbox" checked={form.register_as_company} onChange={e => setPath('register_as_company', e.target.checked)} disabled={!canEdit}/>
                <span>Je firemný zákazník (register_as_company = 1)</span>
              </label>
            </div>
            <div className="field"><label>Názov firmy</label><input className="input" value={form.company_name} onChange={e => setPath('company_name', e.target.value)} disabled={!canEdit || !form.register_as_company}/></div>
            <div className="field"><label>IČO</label><input className="input mono" value={form.company_id} onChange={e => setPath('company_id', e.target.value)} disabled={!canEdit || !form.register_as_company}/></div>
            <div className="field"><label>IČ DPH</label><input className="input mono" value={form.company_icdph} onChange={e => setPath('company_icdph', e.target.value)} disabled={!canEdit || !form.register_as_company}/></div>
            <div className="field">
              <label>Stav B2B žiadosti</label>
              <select className="select" value={form.b2b_request_status} onChange={e => setPath('b2b_request_status', e.target.value)} disabled={!canEdit}>
                <option value="">— (nenastavené)</option>
                <option value="pending">pending</option>
                <option value="approved">approved</option>
                <option value="denied">denied</option>
              </select>
            </div>
            <div className="field" style={{gridColumn:'span 2'}}>
              <label className="checkbox">
                <input type="checkbox" checked={form.individualny_cennik} onChange={e => setPath('individualny_cennik', e.target.checked)} disabled={!canEdit}/>
                <span>Zákazník má individuálny cenník (individualny_cennik = 1)</span>
              </label>
              <div className="small muted" style={{marginTop:2}}>Tento flag je len informačný — skutočné ceny sa riadia metami <code>product_price_&lt;id&gt;</code>. Upravíte ich v <a href="#/pricing" style={{color:'var(--navy-700)'}}>Individuálnych cenníkoch</a>.</div>
            </div>
          </div>
        </div>
      )}

      {tab === 'security' && (
        <div className="vstack" style={{gap:14}}>
          <div className="card">
            <div className="card-head"><h3>Reset hesla — odoslať e-mail</h3></div>
            <div className="card-body">
              <p className="muted" style={{margin:'0 0 10px'}}>Pošle na <b>{customer.email}</b> rovnaký reset-password e-mail, aký používa WordPress "Zabudnuté heslo" formulár (vrátane vašej brandovanej šablóny z <code>functions.php</code>).</p>
              <button className="btn btn-primary" onClick={sendReset} disabled={!canEdit || busy === 'reset'}>
                {busy === 'reset' ? 'Odosielam…' : 'Odoslať reset-password e-mail'}
              </button>
            </div>
          </div>
          <div className="card">
            <div className="card-head"><h3>Vygenerovať nové heslo</h3></div>
            <div className="card-body">
              <p className="muted" style={{margin:'0 0 10px'}}>CRM vygeneruje náhodné 14-znakové heslo a zobrazí ho raz. Odovzdajte ho zákazníkovi cez bezpečný kanál (telefón, SMS).</p>
              <button className="btn btn-danger" onClick={generatePassword} disabled={!canEdit || busy === 'pwd-gen'}>
                {busy === 'pwd-gen' ? 'Generujem…' : 'Vygenerovať nové heslo'}
              </button>
            </div>
          </div>
        </div>
      )}
    </AppShell>
  );
}

Object.assign(window, { Datasheets, Realizations, UsersList, UserDetail });