/* ============================================================
   docs-screen.jsx — document list / picker (before Setup)
   ============================================================ */

function DocsScreen() {
  const [org, setOrg] = useState(null);
  const [docs, setDocs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const { setCurrentDocId } = useApp();

  const reload = async () => {
    setLoading(true); setErr(null);
    try {
      const o = await fetchMyOrg();
      if (!o) throw new Error('Geen organisatie gevonden — probeer uit te loggen en opnieuw in te loggen.');
      setOrg(o);
      const list = await fetchDocs(o.id);
      setDocs(list);
    } catch (e) {
      setErr(e.message || String(e));
    } finally {
      setLoading(false);
    }
  };

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

  const onCreate = async () => {
    if (!org) return;
    setBusy(true);
    try {
      const title = prompt('Titel van de nieuwe aanbesteding:', 'Nieuwe aanbesteding');
      if (!title) { setBusy(false); return; }
      const row = await createDoc(org.id, title);
      setCurrentDocId(row.id);
    } catch (e) {
      alert('Kon document niet maken: ' + (e.message || e));
    } finally {
      setBusy(false);
    }
  };

  const onOpen = (id) => setCurrentDocId(id);

  const onDelete = async (id, title) => {
    if (!confirm(`"${title}" definitief verwijderen? Dit kan niet ongedaan worden gemaakt.`)) return;
    try {
      await deleteDocRemote(id);
      reload();
    } catch (e) {
      alert('Kon niet verwijderen: ' + (e.message || e));
    }
  };

  if (loading) {
    return <div className="docs-wrap"><div className="auth-loading"><div className="auth-spinner"/><div>Documenten laden…</div></div></div>;
  }

  return (
    <div className="docs-wrap">
      <div className="docs-inner">
        <div className="docs-head">
          <div>
            <div className="docs-title">Jouw aanbestedingen</div>
            <div className="docs-sub">{org?.name || ''} — {docs.length} document{docs.length === 1 ? '' : 'en'}</div>
          </div>
          <button className="btn btn-primary" onClick={onCreate} disabled={busy}>
            + Nieuwe aanbesteding
          </button>
        </div>

        {err && <div className="auth-error" style={{marginBottom: 16}}>{err}</div>}

        {docs.length === 0 && !err && (
          <div className="docs-empty">
            <div className="docs-empty-icon">📄</div>
            <div className="docs-empty-title">Nog geen aanbestedingen</div>
            <div className="docs-empty-sub">Klik op "Nieuwe aanbesteding" om te beginnen.</div>
          </div>
        )}

        <div className="docs-list">
          {docs.map(d => (
            <div key={d.id} className="doc-card" onClick={() => onOpen(d.id)}>
              <div className="doc-card-body">
                <div className="doc-card-title">{d.title}</div>
                <div className="doc-card-meta">
                  Laatst bewerkt {fmtDate(d.updated_at)}
                </div>
              </div>
              <button className="doc-card-del"
                      onClick={(e) => { e.stopPropagation(); onDelete(d.id, d.title); }}
                      title="Verwijderen">×</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function fmtDate(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  const now = new Date();
  const diff = (now - d) / 1000;
  if (diff < 60) return 'zojuist';
  if (diff < 3600) return Math.floor(diff/60) + ' min geleden';
  if (diff < 86400) return Math.floor(diff/3600) + ' uur geleden';
  if (diff < 86400*7) return Math.floor(diff/86400) + ' dag' + (diff<86400*2?'':'en') + ' geleden';
  return d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'short', year: 'numeric' });
}

Object.assign(window, { DocsScreen });