// Main app — wires the four sections together.

const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

function App() {
  // Ariba preview modal state
  const [confirmedRequest, setConfirmedRequest] = useStateApp(null);

  // Connection state
  const [connected, setConnected] = useStateApp(true);
  const [startDate, setStartDate] = useStateApp("2026-05-10");
  const [endDate, setEndDate] = useStateApp("2026-05-17");
  const [scanState, setScanState] = useStateApp("done"); // idle | scanning | done
  const [foundCount, setFoundCount] = useStateApp(14);

  // Rules state
  const [rules, setRules] = useStateApp([
    { id: "r1", field: "price", op: "gt", value: "$50,000", action: "deny" },
    { id: "r2", field: "price", op: "lt", value: "$5,000", action: "approve" },
    { id: "r3", field: "vendor", op: "not_in", value: "preferred-list", action: "escalate" },
  ]);

  // Decision log state — start populated; "Run scan" replays the stagger.
  const [logRows, setLogRows] = useStateApp(LOG_DATA);
  const [logScanning, setLogScanning] = useStateApp(false);
  const staggerTimers = useRefApp([]);

  const runInboxScan = () => {
    if (!connected) return;
    setScanState("scanning");
    setFoundCount(0);
    setTimeout(() => {
      setScanState("done");
      setFoundCount(14);
    }, 1500);
  };

  const runLogScan = () => {
    // Clear existing timers
    staggerTimers.current.forEach(clearTimeout);
    staggerTimers.current = [];
    setLogScanning(true);
    setLogRows([]);
    LOG_DATA.forEach((row, i) => {
      const t = setTimeout(() => {
        setLogRows((curr) => [...curr, row]);
        if (i === LOG_DATA.length - 1) setLogScanning(false);
      }, 300 * (i + 1));
      staggerTimers.current.push(t);
    });
  };

  // Email preview tabs
  const [activeTab, setActiveTab] = useStateApp("approved");

  return (
    <div className="app">
      <header className="topbar">
        <div className="topbar-inner">
          <div className="brand">
            <div className="brand-mark">P</div>
            <span>Procura</span>
          </div>
          <div className="crumbs">
            <span>Workspace</span>
            <span className="slash">/</span>
            <span>Retail Ops</span>
            <span className="slash">/</span>
            <span className="here">Approvals</span>
          </div>
          <div className="spacer"></div>
          <span className="env-pill">
            <span className="dot"></span>
            Production
          </span>
          <button className="btn btn-ghost btn-icon" title="Notifications"><Icon.bell size={15} /></button>
          <button className="btn btn-ghost btn-icon" title="Settings"><Icon.gear size={15} /></button>
          <div className="avatar" title="Morgan Reyes">MR</div>
        </div>
      </header>

      <div className="page-head">
        <div className="eyebrow">Procurement intelligence · Read-only</div>
        <h1>Approvals workspace</h1>
        <div className="sub">
          Procura reads SAP Ariba approval emails, extracts the spec-sheet data, and emails you a recommendation.
          You decide and act in Ariba. <span style={{ color: "var(--text-2)" }}>The original Ariba thread is never touched.</span>
        </div>
      </div>

      <main className="main">
        <ConnectionSection
          connected={connected}
          setConnected={setConnected}
          startDate={startDate}
          setStartDate={setStartDate}
          endDate={endDate}
          setEndDate={setEndDate}
          scanState={scanState}
          foundCount={foundCount}
          runScan={runInboxScan}
        />
        <RequestQueueSection onConfirm={setConfirmedRequest} />
        <RulesSection rules={rules} setRules={setRules} />
        <DecisionLogSection rows={logRows} setRows={setLogRows} runScan={runLogScan} scanning={logScanning} />
        <EmailPreviewSection activeTab={activeTab} setActiveTab={setActiveTab} />
      </main>

      {confirmedRequest && (
        <AribaProjectPreview
          request={confirmedRequest}
          onClose={() => setConfirmedRequest(null)}
        />
      )}

      <footer className="footnote">
        <span className="seal">PROCURA v0.4 · DEMO</span>
        <span>Recommendation engine · read-only Gmail scope · human-in-the-loop</span>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);