/* App shell — wires everything together */

class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { err: null, info: null }; }
  static getDerivedStateFromError(err) { return { err }; }
  componentDidCatch(err, info) {
    this.setState({ info });
    try { window.__lastReactError = { msg: err?.message, stack: err?.stack, comp: info?.componentStack }; } catch (_) {}
  }
  render() {
    if (this.state.err) {
      return (
        <div style={{ padding: 30, fontFamily: "monospace", color: "var(--red, #f87171)" }}>
          <h2 style={{ marginBottom: 12 }}>Erreur composant</h2>
          <pre style={{ whiteSpace: "pre-wrap", fontSize: 12 }}>{String(this.state.err?.message || this.state.err)}</pre>
          <pre style={{ whiteSpace: "pre-wrap", fontSize: 11, opacity: 0.6, marginTop: 12 }}>{this.state.info?.componentStack}</pre>
          <button onClick={() => this.setState({ err: null })} style={{ marginTop: 12 }}>Retry</button>
        </div>
      );
    }
    return this.props.children;
  }
}

const PlaceholderPage = ({ title, sub, icon = "sparkles" }) => (
  <div className="page">
    <div className="page-head">
      <div>
        <div className="page-title">{title}</div>
        <div className="page-sub">{sub}</div>
      </div>
    </div>
    <div className="card" style={{ padding: 60, textAlign: "center" }}>
      <div style={{ width: 56, height: 56, borderRadius: 14, background: "var(--bg-3)", display: "grid", placeItems: "center", margin: "0 auto 14px", color: "var(--text-dim)" }}>
        <Icon name={icon} size={26}/>
      </div>
      <div style={{ fontSize: 16, fontWeight: 600 }}>Module en préparation</div>
      <div className="muted" style={{ fontSize: 12.5, marginTop: 6, maxWidth: 380, margin: "6px auto 18px" }}>Ce module suit la même grammaire visuelle (sidebar Linear · données denses Bloomberg · monospace pour les chiffres). Branchement à l'API D1 / KV en cours.</div>
      <button className="btn" data-variant="primary"><Icon name="plus" size={13}/> Demander la priorité</button>
    </div>
  </div>
);

const PAGES = {
  dashboard:    { component: (p) => <Dashboard {...p} /> },
  "daily-picks":{ component: (p) => <DailyPicks {...p} /> },
  research:     { component: (p) => <ProductResearch {...p} /> },
  "profit-calc":{ component: () => <ProfitCalcPro /> },
  "landed-cost":{ component: () => <LandedCost /> },
  supplier:     { component: () => <SupplierDetail /> },
  finance:      { component: (p) => <Finance {...p} /> },
  expenses:     { component: (p) => <Expenses {...p} /> },
  messages:     { component: (p) => <Messages {...p} /> },
  email:        { component: () => <EmailDigest /> },
  settings:     { component: (p) => (window.SettingsHub ? <window.SettingsHub {...p} /> : <SettingsView {...p} />) },
  asin:         { component: (p) => <AsinLibrary {...p} /> },
  opportunity:  { component: (p) => <OpportunityFinder {...p} /> },
  "team-board": { component: (p) => <TeamBoard {...p} /> },
  "supplier-cmp":{component: () => <SupplierCompare /> },
  alerts:       { component: (p) => <Alerts {...p} /> },
  jarvis:       { component: () => <Jarvis /> },
  catalogs:     { component: () => <Catalogs /> },
  "open-acct":  { component: (p) => <OpenAccounts {...p} /> },
  shipments:    { component: () => <Shipments /> },
  returns:      { component: () => <Returns /> },
  prep:         { component: () => <PrepCenter /> },
  import:       { component: () => <Import /> },
  calendar:     { component: (p) => <Calendar {...p} /> },
  resources:    { component: () => <Resources /> },
  workshop:     { component: () => <WorkshopSQL /> },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState("dashboard");
  const [cmdkOpen, setCmdkOpen] = useState(false);
  const [authOpen, setAuthOpen] = useState(false);
  const [jarvisRequest, setJarvisRequest] = useState(0);
  const [changelogOpen, setChangelogOpen] = useState(false);
  const [updateToastVisible, setUpdateToastVisible] = useState(false);

  useEffect(() => {
    if (window.KCC_HAS_UPDATE) {
      const tm = setTimeout(() => setUpdateToastVisible(true), 800);
      return () => clearTimeout(tm);
    }
  }, []);

  // Apply theme + density to <html>
  useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = t.theme;
    root.style.setProperty("--row-h", t.density === "compact" ? "30px" : "36px");
    root.style.setProperty("--row-h-tight", t.density === "compact" ? "26px" : "32px");
    root.style.setProperty("--accent", t.accent);
    document.body.style.fontSize = (13.5 * (t.fontScale / 100)) + "px";
  }, [t.theme, t.density, t.accent, t.fontScale]);

  // Cmd+K handler
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setCmdkOpen((o) => !o);
      }
      if (e.key === "Escape") setCmdkOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Expose navigation to outside (used by JARVIS tool calls + external triggers)
  useEffect(() => {
    window.kccNavigate = (p) => { if (PAGES[p]) setPage(p); };
    const onNav = (e) => { if (e.detail && PAGES[e.detail]) setPage(e.detail); };
    window.addEventListener("kcc:navigate", onNav);
    return () => window.removeEventListener("kcc:navigate", onNav);
  }, []);

  const Cur = PAGES[page]?.component || PAGES.dashboard.component;

  return (
    <ToastProvider>
      <div className="app" data-sidebar={t.sidebarCollapsed ? "collapsed" : "expanded"}>
        <Sidebar
          page={page}
          onNavigate={setPage}
          collapsed={t.sidebarCollapsed}
          onToggle={() => setTweak("sidebarCollapsed", !t.sidebarCollapsed)}
          onOpenCmdK={() => setCmdkOpen(true)}
        />
        <div className="main">
          <Topbar
            page={page}
            theme={t.theme}
            onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")}
            onOpenCmdK={() => setCmdkOpen(true)}
            onOpenAuth={() => setAuthOpen(true)}
            onNavigate={setPage}
            onOpenJarvis={() => setJarvisRequest(c => c + 1)}
            onOpenChangelog={() => { setChangelogOpen(true); setUpdateToastVisible(false); }}
          />
          <div className="view">
            <Cur
              t={t}
              setTweak={setTweak}
              onNavigate={setPage}
              onOpenAuth={() => setAuthOpen(true)}
              onOpenChangelog={() => setChangelogOpen(true)}
              dashLayout={t.dashLayout}
              researchLayout={t.researchLayout}
              theme={t.theme}
              accent={t.accent}
              onSetTheme={(v) => setTweak("theme", v)}
              onSetAccent={(v) => setTweak("accent", v)}
            />
          </div>
        </div>
      </div>

      <CmdK open={cmdkOpen} onClose={() => setCmdkOpen(false)} onNavigate={setPage} />
      <TwoFactorModal open={authOpen} onClose={() => setAuthOpen(false)} />
      <KccTweaks t={t} setTweak={setTweak} />
      {window.JarvisOverlay && <window.JarvisOverlay onNavigate={setPage} currentPage={page} openTick={jarvisRequest}/>}
      {window.ChangelogDrawer && <window.ChangelogDrawer open={changelogOpen} onClose={() => setChangelogOpen(false)}/>}
      {window.KCC_HAS_UPDATE && updateToastVisible && (
        <div style={{ position: "fixed", bottom: 90, right: 20, zIndex: 9999, background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 10, padding: 14, maxWidth: 320, boxShadow: "0 8px 24px rgba(0,0,0,0.3)" }}>
          <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>Nouvelle version disponible</div>
          <div style={{ fontSize: 11.5, color: "var(--text-dim)", marginBottom: 10 }}>v{window.KCC_VERSION || "3.4"} — découvrez les nouveautés</div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="btn" data-variant="primary" data-size="sm" onClick={() => { setChangelogOpen(true); setUpdateToastVisible(false); }}>Voir</button>
            <button className="btn" data-variant="ghost" data-size="sm" onClick={() => { setUpdateToastVisible(false); try { localStorage.setItem("kcc:seen_version", window.KCC_VERSION); } catch {} window.KCC_HAS_UPDATE = false; }}>Plus tard</button>
          </div>
        </div>
      )}
    </ToastProvider>
  );
}

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