// Main app — routing + tweaks
const { useState: useS, useEffect: useE } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1a7f4f",
  "showLiveBadges": true,
  "compactDensity": false
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useS({ name: "dashboard" });
  const [industry, setIndustry] = useS("manufacturing");
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(DEFAULTS) : [DEFAULTS, () => {}];

  // Apply industry on change — mutates window.DEMO_DATA in place, triggers re-render via state
  useE(() => { window.applyIndustry(industry); }, [industry]);

  // Apply tweak: accent color
  useE(() => {
    if (tweaks?.accent) {
      document.documentElement.style.setProperty("--ok", tweaks.accent);
    }
  }, [tweaks?.accent]);

  const renderRoute = () => {
    if (route.name === "spend") return <SpendPage setRoute={setRoute} />;
    if (route.name === "vendors") return <VendorsPage setRoute={setRoute} />;
    if (route.name === "settings") return <SettingsPage setRoute={setRoute} />;
    if (route.name === "agent") {
      if (route.id === "inv-grn") return <InvoiceGrnAgent setRoute={setRoute} />;
      if (route.id === "sku") return <FragmentedSkuAgent setRoute={setRoute} />;
      if (route.id === "shipment") return <ShipmentAgent setRoute={setRoute} />;
      if (route.id === "rfq") return <RfqAgent setRoute={setRoute} />;
      return <GenericAgent setRoute={setRoute} agentId={route.id} />;
    }
    if (route.name === "agents") {
      // Just the agent grid view
      return (
        <div className="main">
          <div className="page-head">
            <div>
              <h1 className="page-title">AI Agents</h1>
              <div className="page-sub">5 agents · automating procurement workflows across PO, invoice, GRN, shipment and SKU</div>
            </div>
            <div className="page-actions">
              <button className="btn"><Icon name="plus" size={14}/> New Agent</button>
            </div>
          </div>
          <div className="agent-grid" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
            {window.DEMO_DATA.agents.map(a => (
              <div className="agent-card" key={a.id} onClick={() => setRoute({name: "agent", id: a.id})}>
                <div className="agent-card-head">
                  <div className="agent-icon"><Icon name={a.icon} size={18}/></div>
                  <span className={`pill ${a.status === "critical" ? "crit" : a.status === "warning" ? "warn" : "ok"}`}><span className="dot"></span>{a.status === "critical" ? "Critical" : a.status === "warning" ? "Warning" : "Operational"}</span>
                </div>
                <div>
                  <h3>{a.name}</h3>
                  <p>{a.desc}</p>
                </div>
                <div className="agent-card-stats">
                  <div className="agent-stat">
                    <div className="agent-stat-v tabular">{fmt(a.today.processed, {compact: true})}</div>
                    <div className="agent-stat-l">Processed</div>
                  </div>
                  <div className="agent-stat">
                    <div className="agent-stat-v tabular">{a.accuracy}%</div>
                    <div className="agent-stat-l">Accuracy</div>
                  </div>
                  <div className="agent-stat" style={{marginLeft: "auto"}}>
                    <div style={{color: a.today.exceptions > 5 ? "var(--crit)" : "var(--muted)", fontWeight: 600}} className="tabular">{a.today.exceptions}</div>
                    <div className="agent-stat-l">Exceptions</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      );
    }
    return <Dashboard setRoute={setRoute} tweaks={tweaks} />;
  };

  return (
    <div className="app-shell">
      <Topbar route={route} setRoute={setRoute} industry={industry} setIndustry={setIndustry} />
      {renderRoute()}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Theme">
            <window.TweakColor label="Accent Color" value={tweaks.accent}
              options={["#1a7f4f", "#0f3d33", "#1d4ed8", "#b8590e", "#7c3aed"]}
              onChange={(v) => setTweak("accent", v)} />
          </window.TweakSection>
          <window.TweakSection label="Display">
            <window.TweakToggle label="Show LIVE badges" value={tweaks.showLiveBadges} onChange={(v) => setTweak("showLiveBadges", v)} />
            <window.TweakToggle label="Compact density" value={tweaks.compactDensity} onChange={(v) => setTweak("compactDensity", v)} />
          </window.TweakSection>
          <window.TweakSection label="Jump to Agent">
            <window.TweakButton label="Invoice → GRN" onClick={() => setRoute({name: "agent", id: "inv-grn"})} />
            <window.TweakButton label="SKU Analytics" onClick={() => setRoute({name: "agent", id: "sku"})} />
            <window.TweakButton label="Shipment Tracking" onClick={() => setRoute({name: "agent", id: "shipment"})} />
            <window.TweakButton label="RFQ Analyzer" onClick={() => setRoute({name: "agent", id: "rfq"})} />
            <window.TweakButton label="Dashboard" onClick={() => setRoute({name: "dashboard"})} secondary />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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