/* global React */
// ============================================================
// TesoreriaFlow — faithful HTML/CSS recreation of the Meefi
// accounts table (Tesorería). A focus "spotlight" walks down
// the list one account at a time: the active row stays sharp
// while every other row is blurred + dimmed, and the list
// scrolls smoothly to keep the active row centered.
// Unique global prefix (TZF_) to avoid cross-file collisions.
// ============================================================
const { useState: tzfUseState, useRef: tzfUseRef, useEffect: tzfUseEffect } = React;

const TZF_ACCOUNTS = [
  { n: "Principal",             c: "Acct ••0008 · USD", b: "$11,136.99" },
  { n: "Proveedores",           c: "Acct ••0001 · USD", b: "$3,600.01" },
  { n: "Banco BBVA",            c: "Acct ••0014 · USD", b: "$0.00" },
  { n: "Multi-Procesador Test", c: "Acct ••0027 · USD", b: "$10,000.00" },
  { n: "Nómina STP",            c: "Sin cuenta USD",    b: "$0.00" },
  { n: "Nómina ASP",            c: "Acct ••0030 · USD", b: "$0.00" },
  { n: "Prueba",                c: "Acct ••0043 · USD", b: "$0.00" },
  { n: "Gerencia Estatal",      c: "Acct ••0056 · USD", b: "$0.00" },
];

function TZF_Avatar() {
  return <span className="tzf-av">m</span>;
}

function TesoreriaFlow() {
  const [active, setActive] = tzfUseState(0);
  const [shift, setShift]   = tzfUseState(0);

  const stageRef = tzfUseRef(null);
  const scrollRef = tzfUseRef(null);
  const rowRefs  = tzfUseRef([]);

  // Center the active row within the area below the sticky header.
  const centerOn = (i) => {
    const stage = stageRef.current, scroll = scrollRef.current, row = rowRefs.current[i];
    if (!stage || !scroll || !row) return;
    const HEADER = 0;                        // header bar removed
    const areaH  = stage.clientHeight - HEADER;
    const contentH = scroll.scrollHeight;

    // If the whole list fits in the window, center the block so it has
    // balanced padding top & bottom (instead of hugging the top).
    if (contentH <= areaH) {
      setShift((areaH - contentH) / 2);
      return;
    }

    // Otherwise walk the spotlight: keep the active row centered, clamped
    // so we never reveal empty space above the first / below the last row.
    const rowTop = row.offsetTop;            // relative to scroll content
    const rowMid = rowTop + row.offsetHeight / 2;
    let next = areaH / 2 - rowMid;           // translateY to center the row
    const maxShift = 0;
    const minShift = areaH - contentH;
    next = Math.max(minShift, Math.min(maxShift, next));
    setShift(next);
  };

  tzfUseEffect(() => {
    let i = 0;
    setActive(0);
    requestAnimationFrame(() => centerOn(0));

    const STEP = 900;                        // dwell per account
    const iv = setInterval(() => {
      i += 1;
      if (i >= TZF_ACCOUNTS.length) { clearInterval(iv); return; }
      setActive(i);
      centerOn(i);
    }, STEP);

    const onResize = () => centerOn(i);
    window.addEventListener("resize", onResize);
    return () => { clearInterval(iv); window.removeEventListener("resize", onResize); };
    // eslint-disable-next-line
  }, []);

  return (
    <div className="tzf-stage" ref={stageRef}>
      <div className="tzf-scrollwrap">
        <div className="tzf-scroll" ref={scrollRef}
             style={{ transform: `translateY(${shift}px)` }}>
          {TZF_ACCOUNTS.map((a, i) => {
            const on = i === active;
            return (
            <div key={i}
                 ref={(el) => (rowRefs.current[i] = el)}
                 className="tzf-row"
                 style={{
                   filter: on ? "blur(0px)" : "blur(3px)",
                   opacity: on ? 1 : 0.42,
                   background: "transparent",
                 }}>
              <span className="tzf-row-l">
                <TZF_Avatar/>
                <span className="tzf-row-meta">
                  <span className="tzf-row-n">{a.n}</span>
                  <span className="tzf-row-c">{a.c}</span>
                </span>
              </span>
              <span className="tzf-row-b">{a.b}<span className="tzf-cur-tag">USD</span></span>
            </div>
            );
          })}
        </div>
      </div>
      <style>{TZF_CSS}</style>
    </div>
  );
}

const TZF_CSS = `
.tzf-stage,.tzf-stage *{font-family:'Montserrat',sans-serif !important;box-sizing:border-box;}
.tzf-stage{position:absolute;inset:0;background:#fff;overflow:hidden;color:#2b3240;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;}
.tzf-head{flex:none;height:58px;display:flex;align-items:center;justify-content:space-between;
  padding-left:clamp(32px,5%,64px);padding-right:calc(clamp(32px,5%,64px) + 72px);
  border-bottom:1px solid #eef0f3;font-size:14px;color:#9aa2b1;
  background:#fff;position:relative;z-index:3;}
.tzf-scrollwrap{flex:1;min-height:0;position:relative;overflow:hidden;}
.tzf-scroll{position:absolute;left:0;right:0;top:0;
  padding-left:clamp(32px,5%,64px);padding-right:calc(clamp(32px,5%,64px) + 72px);
  transition:transform .85s cubic-bezier(.33,0,.2,1);}
.tzf-row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:62px;padding:12px 0;border-bottom:1px solid #f1f3f6;
  filter:blur(0px);will-change:filter,opacity,transform;
  transition:filter .5s ease,opacity .5s ease,background .5s ease;}
.tzf-row-l{display:flex;align-items:center;gap:14px;min-width:0;}
.tzf-av{width:34px;height:34px;flex:none;border-radius:999px;background:#e9edfb;color:#3a5bd9;
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;
  line-height:34px;text-align:center;}
.tzf-row-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.tzf-row-n{font-size:14.5px;color:#222a37;white-space:nowrap;}
.tzf-row-c{font-size:12px;color:#9aa2b1;white-space:nowrap;letter-spacing:.01em;}
.tzf-row-b{font-size:14.5px;color:#222a37;font-weight:500;white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px;}
.tzf-cur-tag{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:#9aa2b1;}
@media (max-width:960px){
  .tzf-head,.tzf-scroll{padding-right:clamp(32px,5%,64px) !important;}
}
`;

window.TesoreriaFlow = TesoreriaFlow;