/* eslint-disable */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 250,
  "density": "comfortable",
  "showStatStrip": true
}/*EDITMODE-END*/;

const App = () => {
  const [page, setPage] = useStateA("sheet");
  const [selectedId, setSelectedId] = useStateA(null);
  const [panelOpen, setPanelOpen] = useStateA(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => {
    document.documentElement.style.setProperty("--accent-h", tweaks.accentHue);
  }, [tweaks.accentHue]);

  useEffectA(() => {
    document.body.classList.remove("density-compact", "density-roomy");
    if (tweaks.density === "compact") document.body.classList.add("density-compact");
    if (tweaks.density === "roomy") document.body.classList.add("density-roomy");
  }, [tweaks.density]);

  const leads = window.LEADS;
  const selectedLead = leads.find(l => l.id === selectedId) || leads[0];

  const onSelect = (id) => {
    setSelectedId(id);
    setPanelOpen(true);
  };

  return (
    <div className="app">
      <Rail page={page} setPage={(p) => { setPage(p); if (p === "lead") { setSelectedId(leads[0].id); setPanelOpen(true); } }} leadCount={leads.length} />
      <div className="main">
        <Topbar page={page} agent="running" onNew={() => {}} />
        {page === "sheet" && <ContactSheet leads={leads} onSelect={onSelect} selectedId={selectedId} />}
        {page === "lead" && <ContactSheet leads={leads} onSelect={onSelect} selectedId={selectedId} />}
        {page === "settings" && <AgentSettings />}
        {page === "health" && <AgentHealth providers={window.AGENT_PROVIDERS} runs={window.AGENT_RUNS} />}
      </div>

      <LeadPanel lead={selectedLead} open={panelOpen} onClose={() => setPanelOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakSlider label="Accent hue" min={0} max={360} step={5} value={tweaks.accentHue} onChange={(v) => setTweak("accentHue", v)} suffix="°" />
          <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
            {[
              { name: "Indigo", h: 250 },
              { name: "Slate", h: 220 },
              { name: "Teal", h: 195 },
              { name: "Emerald", h: 155 },
              { name: "Amber", h: 60 },
              { name: "Crimson", h: 20 },
            ].map(c => (
              <button key={c.h} title={c.name}
                onClick={() => setTweak("accentHue", c.h)}
                style={{
                  width: 24, height: 24, borderRadius: 5,
                  background: `oklch(0.55 0.18 ${c.h})`,
                  border: tweaks.accentHue === c.h ? "2px solid var(--fg)" : "1px solid var(--border)",
                  cursor: "pointer", padding: 0,
                }} />
            ))}
          </div>
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio value={tweaks.density} options={[
            { value: "compact", label: "Compact" },
            { value: "comfortable", label: "Comfortable" },
            { value: "roomy", label: "Roomy" },
          ]} onChange={(v) => setTweak("density", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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