/* ============================================================
   TDS Errors view — backend drill drawer
   Opens from a backend × env matrix cell. Drill path:
   matrix cell → grouped patterns → raw rows (grep-able, copyable).
   Raw rows come from the paginated /api/statistics/errors
   endpoint, fetched per category (≤3 per backend) through
   mapLimitSettled(cap 2). Free-text grep is client-side over the
   loaded pages — server stays ILIKE-free.
   ============================================================ */

const { useState: edUseState, useEffect: edUseEffect, useMemo: edUseMemo, useRef: edUseRef } = React;

function EvDrawerEventRow({ r, openId, setOpenId, copiedKey, copy }) {
  const isOpen = openId === r.id;
  const copied = copiedKey === r.id;
  return (
    <React.Fragment>
      <div className={"ev-de-row" + (isOpen ? ' is-open' : '')} onClick={() => setOpenId(isOpen ? null : r.id)}>
        <span className="tabular ev-de-time" title={r.createdAt + ' (UTC)'}>{evFmtTime(r.createdAt)}</span>
        <span className="mono ev-de-feat">{r.feature}</span>
        <span className="ev-de-step">{EV_STEP_LABEL[r.step] || r.step}</span>
        <span className="mono ev-de-msg">{r.errorCode ? r.errorCode + ' · ' : ''}{r.errorMessage}</span>
      </div>
      {isOpen && (
        <div className="ev-de-expand">
          <div className="fp-expand-head">
            <span className="fp-expand-label">
              {r.brand} · {r.team} · {r.step} · {r.populationJobId} · {r.createdAt} (UTC)
            </span>
            <button className={"tds-copy-btn " + (copied ? 'is-copied' : '')}
              onClick={(e) => { e.stopPropagation(); copy(r.errorMessage, r.id); }}>
              {copied ? 'Copied' : 'Copy'}
            </button>
          </div>
          <pre className="fp-code">{r.errorMessage}</pre>
        </div>
      )}
    </React.Fragment>
  );
}

function EvErrorDrawer({ sel, range, filters, patterns, onClose }) {
  const open = !!sel;
  const backend = sel ? EV_BACKENDS.find((b) => b.id === sel.backendId) : null;
  const cats = sel ? (sel.category ? [sel.category] : backend.cats) : [];

  const [q, setQ] = edUseState('');
  const [state, setState] = edUseState({ rows: [], total: 0, hasMore: false, loading: true, loadingMore: false, error: null });
  const pageRef = edUseRef(0);

  const load = (page, append) => {
    setState((s) => ({ ...s, loading: !append, loadingMore: append, error: append ? null : s.error }));
    const api = window.TDS_ERRORS_API;
    const base = { page, size: 50, feature: filters.feature, step: filters.step, team: filters.team, brand: filters.brand };
    api.mapLimitSettled(cats, 2, (cat) => api.loadRawErrors(sel.env, range, { ...base, category: cat }))
      .then((results) => {
        const ok = results.filter((r) => r.status === 'fulfilled').map((r) => r.value);
        const failed = results.find((r) => r.status === 'rejected');
        const rows = ok.flatMap((r) => r.rows).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
        setState((s) => ({
          rows: append ? s.rows.concat(rows) : rows,
          total: ok.reduce((n, r) => n + r.totalCount, 0),
          hasMore: ok.some((r) => r.hasMore),
          loading: false, loadingMore: false,
          error: ok.length === 0 && failed ? ((failed.reason && failed.reason.message) || 'Unavailable') : null,
        }));
      });
  };

  edUseEffect(() => {
    if (!open) return;
    setQ('');
    pageRef.current = 0;
    setState({ rows: [], total: 0, hasMore: false, loading: true, loadingMore: false, error: null });
    load(0, false);
  }, [open, sel && sel.env, sel && sel.backendId, sel && sel.category]);

  edUseEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  // Focus the grep box WITHOUT scrolling. autoFocus fired while the drawer was
  // still translated off-screen (mid slide-in), and browsers scroll
  // overflow:hidden ancestors to reveal a focused element — which shifted the
  // entire artboard sideways and left a drawer-wide white band on the right.
  const searchRef = edUseRef(null);
  edUseEffect(() => {
    if (!open) return;
    const id = setTimeout(() => {
      if (searchRef.current) searchRef.current.focus({ preventScroll: true });
    }, 0);
    return () => clearTimeout(id);
  }, [open]);

  const [copiedKey, setCopiedKey] = edUseState(null);
  const [openId, setOpenId] = edUseState(null);
  const copy = (text, key) => {
    try { navigator.clipboard.writeText(text); } catch (e) {}
    setCopiedKey(key); setTimeout(() => setCopiedKey(null), 1400);
  };

  const ql = q.trim().toLowerCase();
  const matchQ = (s) => !ql || (s || '').toLowerCase().includes(ql);
  const visibleRows = edUseMemo(
    () => state.rows.filter((r) => matchQ(r.errorMessage) || matchQ(r.errorCode)),
    [state.rows, ql]
  );
  const visiblePatterns = edUseMemo(
    () => (patterns || []).filter((p) => matchQ(p.message) || matchQ(p.errorCode)),
    [patterns, ql]
  );

  return (
    <React.Fragment>
      <div className={"tds-drawer-scrim " + (open ? 'is-open' : '')} onClick={onClose} />
      <aside className={"tds-drawer ev-drawer " + (open ? 'is-open' : '')} aria-hidden={!open}>
        {open && (
          <div className="tds-drawer-inner">
            <div className="tds-drawer-head">
              <div>
                <div className="tds-drawer-eyebrow">
                  <span className={"tds-env-badge is-" + sel.env.toLowerCase()}>{sel.env}</span>
                  <span className="tds-drawer-arrow">›</span>
                  <span className="ev-drawer-sys">{backend.label}</span>
                  {sel.category && (
                    <React.Fragment>
                      <span className="tds-drawer-arrow">›</span>
                      <span className={"fp-cat-badge " + evCat(sel.category).cls}>{evCat(sel.category).label}</span>
                    </React.Fragment>
                  )}
                </div>
                <h2 className="tds-drawer-title">
                  {state.loading ? 'Loading…' : state.total + ' error' + (state.total !== 1 ? 's' : '')}
                </h2>
                <div className="ev-drawer-sub tabular">
                  {evFmtTime(range.from)} – {evFmtTime(range.to)} · {EV_TZ}
                </div>
              </div>
              <button className="tds-btn tds-btn-ghost tds-btn-icon" onClick={onClose} aria-label="Close">×</button>
            </div>

            <div className="tds-drawer-list">
              <div className="ev-drawer-search-wrap">
                <input
                  ref={searchRef}
                  className="ev-search mono"
                  type="text"
                  placeholder="grep messages & codes…"
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                />
                {q && <button className="tds-input-clear" onClick={() => setQ('')} aria-label="Clear search">×</button>}
              </div>
              {ql && (
                <div className="ev-drawer-qnote">
                  Matching over grouped patterns and the {state.rows.length} loaded raw row{state.rows.length !== 1 ? 's' : ''} — load more below to widen the net.
                </div>
              )}

              {state.error && (
                <div className="ev-empty">
                  <div className="mono" style={{ marginBottom: 8 }}>{state.error}</div>
                  <button type="button" className="tds-btn" onClick={() => load(0, false)}>↻ Retry</button>
                </div>
              )}

              {!state.error && (
                <React.Fragment>
                  <div className="tds-drawer-section-head">Grouped patterns</div>
                  <EvPatterns groups={visiblePatterns} showEnv={false} />

                  <div className="tds-drawer-section-head">Raw events <span className="ev-drawer-secsub">newest first · click to expand</span></div>
                  {state.loading && (
                    <div className="ev-de" aria-busy="true">
                      <div className="ev-de-row ev-de-head">
                        <span>Time</span><span>Feature</span><span>Step</span><span>Message</span>
                      </div>
                      {[0, 1, 2, 3, 4].map((i) => (
                        <div key={i} className="ev-de-row" style={{ cursor: 'default' }}>
                          <span className="ev-skel" /><span className="ev-skel" /><span className="ev-skel" />
                          <span className="ev-skel" style={{ width: (85 - i * 9) + '%' }} />
                        </div>
                      ))}
                    </div>
                  )}
                  {!state.loading && visibleRows.length === 0 && (
                    <div className="ev-empty">{ql ? 'No loaded rows match “' + q + '”.' : 'No raw events for this selection.'}</div>
                  )}
                  {!state.loading && visibleRows.length > 0 && (
                    <div className="ev-de">
                      <div className="ev-de-row ev-de-head">
                        <span>Time</span><span>Feature</span><span>Step</span><span>Message</span>
                      </div>
                      {visibleRows.map((r) => (
                        <EvDrawerEventRow key={r.id} r={r} openId={openId} setOpenId={setOpenId} copiedKey={copiedKey} copy={copy} />
                      ))}
                    </div>
                  )}
                  {!state.loading && (state.hasMore || state.rows.length > 0) && (
                    <div className="ev-de-foot">
                      <span className="tabular ev-events-count">{state.rows.length} of {state.total} loaded</span>
                      {state.hasMore && (
                        <button type="button" className="tds-btn" disabled={state.loadingMore}
                          onClick={() => { pageRef.current += 1; load(pageRef.current, true); }}>
                          {state.loadingMore ? 'Loading…' : 'Load 50 more'}
                        </button>
                      )}
                    </div>
                  )}
                </React.Fragment>
              )}
            </div>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

window.EvErrorDrawer = EvErrorDrawer;