// Long-form report response — for big multi-section analytical answers.
// Used when the agent returns a comprehensive report (multiple tables,
// dimensions, callouts, collapsible detail) rather than a single answer.

const { useState: useStateRR, useEffect: useEffectRR, useRef: useRefRR } = React;

// Flag → visual treatment (status badge color)
const FLAG_STYLE = {
  ok:   { color: 'var(--verified)', bg: 'var(--verified-bg)',  label: 'On track', sym: '✓' },
  warn: { color: '#B65E07',         bg: 'var(--warn-bg)',      label: 'Below',    sym: '⚠' },
  bad:  { color: '#C2410C',         bg: 'rgba(220,80,40,.10)', label: 'Critical', sym: '✗' },
};

const FlagPill = ({ flag }) => {
  if (!flag) return null;
  const s = FLAG_STYLE[flag];
  return (
    <span className="flag-pill" style={{ color: s.color, background: s.bg }}>
      <span style={{ fontSize: 10 }}>{s.sym}</span>
      {s.label}
    </span>
  );
};

const SectionNav = ({ sections, active, onJump }) => (
  <div className="section-nav">
    {sections.map(s => (
      <button key={s.id}
              className={'sn-pill' + (active === s.id ? ' on' : '')}
              onClick={() => onJump(s.id)}>
        {s.label}
      </button>
    ))}
  </div>
);

const Callout = ({ kind = 'insight', label, children }) => (
  <div className={'callout callout-' + kind}>
    <span className="lbl">{label || kind}</span>
    <div className="body">{children}</div>
  </div>
);

const SmartTable = ({ headers, rows, hasFlag, dense }) => (
  <div className={'smart-tbl-wrap' + (dense ? ' dense' : '')}>
    <table className="smart-tbl">
      <thead>
        <tr>
          {headers.map((h, i) => (
            <th key={i} className={i === 0 ? '' : 'num'}>{h}</th>
          ))}
          {hasFlag && <th className="status">Status</th>}
        </tr>
      </thead>
      <tbody>
        {rows.map((r, i) => {
          const flag = hasFlag ? r[r.length - 1] : null;
          const cells = hasFlag ? r.slice(0, -1) : r;
          return (
            <tr key={i}>
              {cells.map((c, j) => (
                <td key={j} className={j === 0 ? '' : 'num'}>{c}</td>
              ))}
              {hasFlag && (
                <td className="status">
                  <FlagPill flag={flag}/>
                </td>
              )}
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

const CollapsibleDetail = ({ name, sub, headers, rows, startOpen }) => {
  const [open, setOpen] = useStateRR(!!startOpen);
  return (
    <div className={'detail-block' + (open ? ' open' : '')}>
      <button className="detail-hd" onClick={() => setOpen(v => !v)}>
        <Icon name={open ? 'chevron_d' : 'chevron_r'} size={13}/>
        <span className="name">{name}</span>
        <span className="sub">{sub}</span>
        <span style={{ flex: 1 }}/>
        <span className="cnt">{rows.length} years</span>
      </button>
      {open && (
        <div className="detail-bd">
          <SmartTable headers={headers} rows={rows} dense/>
        </div>
      )}
    </div>
  );
};

const ReportResponse = ({ tweaks, onOpenTrail }) => {
  const D = window.OMNI_DATA;
  const R = D.OTIF_REPORT;
  const [activeSection, setActiveSection] = useStateRR('hero');
  const [showExport, setShowExport] = useStateRR(false);
  const [feedback, setFeedback] = useStateRR(null);
  const containerRef = useRefRR();

  const sections = [
    { id: 'hero',     label: 'Executive summary' },
    { id: 'fiscal',   label: 'By fiscal year' },
    { id: 'quarter',  label: 'By quarter' },
    { id: 'product',  label: 'By product' },
    { id: 'region',   label: 'By region' },
    { id: 'customer', label: 'By customer' },
    { id: 'detail',   label: 'Detail' },
  ];

  // Track which section is in view (intersection observer)
  useEffectRR(() => {
    if (!containerRef.current) return;
    const root = containerRef.current.closest('.feed');
    const els = sections.map(s => containerRef.current.querySelector('#sec-' + s.id)).filter(Boolean);
    const io = new IntersectionObserver((entries) => {
      const visible = entries.filter(e => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      if (visible[0]) setActiveSection(visible[0].target.id.replace('sec-', ''));
    }, { root, rootMargin: '-120px 0px -60% 0px', threshold: 0 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const jumpTo = (id) => {
    const el = containerRef.current.querySelector('#sec-' + id);
    const feed = containerRef.current.closest('.feed');
    if (el && feed) {
      const top = el.getBoundingClientRect().top - feed.getBoundingClientRect().top + feed.scrollTop - 100;
      feed.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <div className="report" ref={containerRef}>
      <Byline agent="otif" reason="comprehensive OTIF dataset query" filters={D.DEMO_FILTERS}/>

      <div className="report-hd">
        <div className="report-eyebrow">Comprehensive report · 7 sections</div>
        <h2 className="report-title">{R.title}</h2>
        <div className="report-dataset">
          <Icon name="table" size={12}/> {R.dataset}
        </div>
      </div>

      <SectionNav sections={sections} active={activeSection} onJump={jumpTo}/>

      {/* Executive summary */}
      <section className="rs" id="sec-hero">
        <div className="rs-hd">
          <span className="rs-mark">01</span>
          <h3>Executive summary — global OTIF metrics</h3>
        </div>
        <div className="hero-stats">
          {R.hero.map((h, i) => (
            <div key={i} className={'hero-stat' + (h.flag ? ' flag-' + h.flag : '')}>
              <div className="k">{h.k}</div>
              <div className="v">
                {h.v}
                {h.flag === 'warn' && <span className="hero-flag">⚠</span>}
                {h.flag === 'ok'   && <span className="hero-flag ok">✓</span>}
              </div>
              {h.sub && <div className="s">{h.sub}</div>}
            </div>
          ))}
        </div>
        <Callout kind="insight" label="Key insight">{R.insight}</Callout>
      </section>

      {/* By fiscal year */}
      <section className="rs" id="sec-fiscal">
        <div className="rs-hd">
          <span className="rs-mark">02</span>
          <h3>By fiscal year</h3>
        </div>
        <SmartTable headers={R.fiscal.headers} rows={R.fiscal.rows}/>
      </section>

      {/* By quarter */}
      <section className="rs" id="sec-quarter">
        <div className="rs-hd">
          <span className="rs-mark">03</span>
          <h3>By fiscal quarter — recent</h3>
        </div>
        <SmartTable headers={R.quarter.headers} rows={R.quarter.rows}/>
        <Callout kind="trend" label="Trend">{R.quarter.trend}</Callout>
      </section>

      {/* By product */}
      <section className="rs" id="sec-product">
        <div className="rs-hd">
          <span className="rs-mark">04</span>
          <h3>By product category — top 11 by volume</h3>
        </div>
        <SmartTable headers={R.product.headers} rows={R.product.rows} hasFlag/>
        <p className="rs-p"><b>Worst performers:</b> {R.product.worst}.</p>
      </section>

      {/* By region */}
      <section className="rs" id="sec-region">
        <div className="rs-hd">
          <span className="rs-mark">05</span>
          <h3>By region</h3>
        </div>
        <Callout kind="warn" label="Data quality">{R.region.note}</Callout>
        <p className="rs-p"><b>Regions captured ({R.region.captured.length * 18 + 2}):</b></p>
        <ul className="rs-list">
          {R.region.captured.map((r, i) => <li key={i}>{r}</li>)}
        </ul>
      </section>

      {/* By customer */}
      <section className="rs" id="sec-customer">
        <div className="rs-hd">
          <span className="rs-mark">06</span>
          <h3>By customer — top 20 by volume</h3>
        </div>
        <Callout kind="warn" label="Data quality">{R.customer.note}</Callout>
        <p className="rs-p"><b>Sample customers:</b></p>
        <div className="cust-grid">
          {R.customer.sample.map((c, i) => <div className="cust-cell" key={i}>{c}</div>)}
        </div>
      </section>

      {/* Detailed breakdown */}
      <section className="rs" id="sec-detail">
        <div className="rs-hd">
          <span className="rs-mark">07</span>
          <h3>Detailed breakdown — product × fiscal year</h3>
        </div>
        <p className="rs-p" style={{ color: 'var(--muted)' }}>
          Expand any product category to see the full year-by-year breakdown.
        </p>
        <div className="detail-list">
          {R.detail.map((d, i) => (
            <CollapsibleDetail key={i}
              name={d.name} sub={d.sub}
              headers={['Fiscal Year', 'OTIF %', 'Order Count']}
              rows={d.rows}
              startOpen={i === 0}/>
          ))}
        </div>
      </section>

      <div className="resp-foot">
        <button className="trail-pill" onClick={onOpenTrail}>
          <span className="dots"><i/><i/><i/></span>
          Explored 8 tables · ran 14 queries · 11.7s
          <Icon name="chevron_r" size={12} style={{ opacity:.5 }}/>
        </button>

        {tweaks.showCost && (
          <span className="cost-strip">
            <span>5 calls</span>
            <span className="sep">·</span>
            <span>42,180 tokens</span>
            <span className="sep">·</span>
            <b>$0.0428</b>
          </span>
        )}

        <div className="ft-spacer"/>

        <div className="ft-actions" style={{ position:'relative' }}>
          <button title="Thumbs up"
                  style={feedback === 'up' ? { color:'var(--verified)' } : null}
                  onClick={() => setFeedback(feedback === 'up' ? null : 'up')}>
            <Icon name="thumb_up" size={15}/>
          </button>
          <button title="Thumbs down"
                  style={feedback === 'down' ? { color:'var(--warn)' } : null}
                  onClick={() => setFeedback(feedback === 'down' ? null : 'down')}>
            <Icon name="thumb_dn" size={15}/>
          </button>
          <button title="Copy"><Icon name="copy" size={14}/></button>
          <button title="Save question"><Icon name="bookmark" size={14}/></button>
          <button title="Export" onClick={() => setShowExport(v => !v)}>
            <Icon name="download" size={14}/>
          </button>
          {showExport && <ExportPop onClose={() => setShowExport(false)}/>}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ReportResponse, SmartTable, Callout, SectionNav, CollapsibleDetail });