// Main app — sidebar shell, routing, tweaks, state
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "comfortable",
  "pillStyle": "solid",
  "detailLayout": "split",
  "showAgentReasoning": true
}/*EDITMODE-END*/;

// SVG icon set — lucide-inspired
const Icon = {
  overview: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="7" height="9" rx="1" />
      <rect x="14" y="3" width="7" height="5" rx="1" />
      <rect x="14" y="12" width="7" height="9" rx="1" />
      <rect x="3" y="16" width="7" height="5" rx="1" />
    </svg>
  ),
  topics: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m3 17 2 2 4-4" />
      <path d="m3 7 2 2 4-4" />
      <path d="M13 6h8" />
      <path d="M13 12h8" />
      <path d="M13 18h8" />
    </svg>
  ),
  runs: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2c4.4 0 8.135 2.84 9.48 6.79" />
      <path d="M22 4v5h-5" />
    </svg>
  ),
  sources: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <ellipse cx="12" cy="5" rx="9" ry="3" />
      <path d="M3 5v14a9 3 0 0 0 18 0V5" />
      <path d="M3 12a9 3 0 0 0 18 0" />
    </svg>
  ),
  settings: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="21" y1="4" x2="14" y2="4" />
      <line x1="10" y1="4" x2="3" y2="4" />
      <line x1="21" y1="12" x2="12" y2="12" />
      <line x1="8" y1="12" x2="3" y2="12" />
      <line x1="21" y1="20" x2="16" y2="20" />
      <line x1="12" y1="20" x2="3" y2="20" />
      <line x1="14" y1="2" x2="14" y2="6" />
      <line x1="8" y1="10" x2="8" y2="14" />
      <line x1="16" y1="18" x2="16" y2="22" />
    </svg>
  ),
  collapse: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="15,18 9,12 15,6" />
    </svg>
  )
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateA({ name: "dashboard" });
  const [statusFilter, setStatusFilter] = useStateA("all");
  const [topics, setTopics] = useStateA(window.TOPICS);
  const [collapsed, setCollapsed] = useStateA(false);
  const [dateRange, setDateRange] = useStateA(() => {
    // Default to "Last 7 days"
    const today = window.DR_TODAY;
    const start = new Date(today);
    start.setDate(start.getDate() - 6);
    start.setHours(0, 0, 0, 0);
    const end = new Date(today);
    end.setHours(23, 59, 59, 999);
    return { start, end };
  });
  const toast = useToast();

  useEffectA(() => {
    document.documentElement.dataset.theme = tweaks.theme;
  }, [tweaks.theme]);

  useEffectA(() => {
    if (!tweaks.showAgentReasoning) document.body.classList.add("no-why");
    else document.body.classList.remove("no-why");
  }, [tweaks.showAgentReasoning]);

  function updateStatus(id, status) {
    setTopics(prev => prev.map(t => t.id === id ? { ...t, status } : t));
  }
  function updateTopic(next) {
    setTopics(prev => prev.map(t => t.id === next.id ? next : t));
  }
  function jumpToTable(filter) {
    setStatusFilter(filter);
    setRoute({ name: "topics" });
  }
  function openTopic(id) {
    setRoute({ name: "detail", id });
  }

  useEffectA(() => {
    const onKey = (e) => {
      if (e.key === "/" && route.name === "topics" && document.activeElement.tagName !== "INPUT") {
        e.preventDefault();
        document.querySelector(".search input")?.focus();
      }
      if (e.key === "Escape" && route.name === "detail") {
        setRoute({ name: "topics" });
      }
      if (e.key === "[" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setCollapsed(c => !c);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [route.name]);

  const currentTopic = useMemoA(
    () => topics.find(t => t.id === route.id),
    [topics, route.id]
  );

  const pendingCount = useMemoA(() => topics.filter(t => t.status === "pending").length, [topics]);

  return (
    <div className={"app" + (collapsed ? " sb-collapsed" : "")}>
      <aside className="sidebar">
        <div className="sb-brand">
          <span className="brand-mark">F</span>
          <div className="sb-brand-text">
            <span className="name">fanorate</span>
            <span className="sub">discovery agent</span>
          </div>
        </div>

        <nav className="sb-nav">
          <div className="sb-nav-label">Workspace</div>
          <button className={"sb-item " + (route.name === "dashboard" ? "active" : "")}
                  onClick={() => setRoute({ name: "dashboard" })}
                  title="Overview">
            <span className="ic">{Icon.overview}</span>
            <span className="label">Overview</span>
          </button>
          <button className={"sb-item " + (route.name === "topics" || route.name === "detail" ? "active" : "")}
                  onClick={() => setRoute({ name: "topics" })}
                  title="Topics">
            <span className="ic">{Icon.topics}</span>
            <span className="label">Topics</span>
            {pendingCount > 0 && <span className="badge">{pendingCount}</span>}
          </button>
          <button className="sb-item"
                  onClick={() => toast.push({ message: "Runs view coming soon" })}
                  title="Agent runs">
            <span className="ic">{Icon.runs}</span>
            <span className="label">Agent runs</span>
          </button>
          <button className="sb-item"
                  onClick={() => toast.push({ message: "Sources view coming soon" })}
                  title="Sources">
            <span className="ic">{Icon.sources}</span>
            <span className="label">Sources</span>
          </button>

          <div className="sb-nav-label" style={{ marginTop: 12 }}>Config</div>
          <button className="sb-item"
                  onClick={() => toast.push({ message: "Settings view coming soon" })}
                  title="Settings">
            <span className="ic">{Icon.settings}</span>
            <span className="label">Settings</span>
          </button>
        </nav>

        <div className="sb-foot">
          <div className="sb-run" title="Agent · idle · next run in 11m">
            <span className="run-dot"></span>
            <div className="sb-run-text">
              <span className="l1">Agent · idle</span>
              <span className="l2">next run in 11m</span>
            </div>
          </div>
          <div className="sb-user">
            <span className="avatar">EM</span>
            <div className="sb-user-text">
              <span className="nm">Emma Reyes</span>
              <span className="em">editor</span>
            </div>
          </div>
        </div>

        <button className="sb-collapse" onClick={() => setCollapsed(c => !c)} title="Collapse sidebar (⌘[)">
          <span className="arrow">{Icon.collapse}</span>
          <span className="lbl">Collapse</span>
        </button>
      </aside>

      <main className="main">
        {route.name === "dashboard" && (
          <Dashboard
            topics={topics}
            activeFilter={statusFilter}
            onJumpToTable={jumpToTable}
            pillStyle={tweaks.pillStyle}
          />
        )}
        {route.name === "topics" && (
          <TopicsTable
            topics={topics}
            density={tweaks.density}
            pillStyle={tweaks.pillStyle}
            statusFilter={statusFilter}
            setStatusFilter={setStatusFilter}
            dateRange={dateRange}
            setDateRange={setDateRange}
            onOpenTopic={openTopic}
            onUpdateStatus={updateStatus}
            toast={toast}
          />
        )}
        {route.name === "detail" && currentTopic && (
          <TopicDetail
            topic={currentTopic}
            layout={tweaks.detailLayout}
            pillStyle={tweaks.pillStyle}
            onBack={() => setRoute({ name: "topics" })}
            onUpdateStatus={updateStatus}
            onUpdateTopic={updateTopic}
            toast={toast}
          />
        )}
        {route.name === "detail" && !currentTopic && (
          <Empty title="Topic not found" body="It may have been removed. Head back to the queue." />
        )}
      </main>

      <TweaksPanel>
        <TweakSection label="Appearance" />
        <TweakRadio
          label="Theme"
          value={tweaks.theme}
          options={["light", "dark"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakSection label="Topics table" />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={["compact", "comfortable", "cards"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSelect
          label="Status pill style"
          value={tweaks.pillStyle}
          options={["solid", "outline", "dot", "ticket"]}
          onChange={(v) => setTweak("pillStyle", v)}
        />
        <TweakToggle
          label="Show agent reasoning inline"
          value={tweaks.showAgentReasoning}
          onChange={(v) => setTweak("showAgentReasoning", v)}
        />
        <TweakSection label="Detail view" />
        <TweakRadio
          label="Layout"
          value={tweaks.detailLayout}
          options={["split", "stacked", "focus"]}
          onChange={(v) => setTweak("detailLayout", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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