/* ─── App Shell (window-scoped) ─────────────────── */
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

/* ─── API helpers ─── */
const api = {
  get:    (path)         => fetch(path).then(r => r.ok ? r.json() : Promise.reject(r.status)),
  post:   (path, body)   => fetch(path, { method: 'POST',   headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) }).then(r => r.json()),
  put:    (path, body)   => fetch(path, { method: 'PUT',    headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) }).then(r => r.json()),
  del:    (path)         => fetch(path, { method: 'DELETE' }).then(r => r.json()),
  patch:  (path)         => fetch(path, { method: 'PATCH'  }).then(r => r.json()),
};

function App() {
  /* ─── Workspaces ─── */
  const [workspaces, setWorkspaces] = useStateA(WORKSPACES);
  const [activeWsId, setActiveWsId] = useStateA(WORKSPACES[0].id);
  const [newWsOpen, setNewWsOpen] = useStateA(false);

  const activeWs = workspaces.find(w => w.id === activeWsId) || workspaces[0];
  const CAT = useMemoA(() => catMetaForWorkspace(activeWs), [activeWs]);

  /* ─── Page state ─── */
  const [page, setPage] = useStateA("dashboard");
  const [category, setCategory] = useStateA("all");
  const [searchQuery, setSearchQuery] = useStateA("");

  /* ─── Global data buckets (inicia com mock, substitui por API) ─── */
  const [allInsights, setAllInsights] = useStateA(MOCK_INSIGHTS);
  const [allTriggers, setAllTriggers] = useStateA(MOCK_TRIGGERS);

  /* ─── Carregar dados reais da API ─── */
  useEffectA(() => {
    api.get('/api/plot-market/workspaces')
      .then(d => { if (d.workspaces?.length) setWorkspaces(d.workspaces); })
      .catch(() => {});
    api.get('/api/plot-market/triggers')
      .then(d => { if (d.triggers?.length) setAllTriggers(d.triggers); })
      .catch(() => {});
    api.get('/api/plot-market/insights')
      .then(d => { if (d.insights?.length) setAllInsights(d.insights); })
      .catch(() => {});
  }, []);

  /* ─── Workspace-scoped slices ─── */
  const insights = useMemoA(() => insightsForWorkspace(allInsights, activeWsId), [allInsights, activeWsId]);
  const triggers = useMemoA(() => triggersForWorkspace(allTriggers, activeWsId), [allTriggers, activeWsId]);

  /* ─── Feedback / Agent Memory (workspace-scoped) ─── */
  // { [wsId]: { [insightId]: "relevant" | "irrelevant" } }
  const [feedbackMap, setFeedbackMap] = useStateA({});
  // { [wsId]: { [insightId]: "note text" } }
  const [notesMap, setNotesMap] = useStateA({});

  const wsFeedback = feedbackMap[activeWsId] || {};
  const wsNotes = notesMap[activeWsId] || {};
  const memCount = Object.keys(wsFeedback).length;

  const handleFeedback = (insightId, value) => {
    setFeedbackMap(prev => {
      const cur = { ...(prev[activeWsId] || {}) };
      if (value == null) delete cur[insightId];
      else cur[insightId] = value;
      return { ...prev, [activeWsId]: cur };
    });
    if (value === "relevant") setToast("Anotado · o agente vai priorizar conteúdo parecido");
    else if (value === "irrelevant") setToast("Anotado · o agente vai despriorizar conteúdo parecido");
  };
  const handleNoteChange = (insightId, text) => {
    setNotesMap(prev => {
      const cur = { ...(prev[activeWsId] || {}) };
      if (!text) delete cur[insightId];
      else cur[insightId] = text;
      return { ...prev, [activeWsId]: cur };
    });
  };

  /* ─── Modal & UI state ─── */
  const [editingTrigger, setEditingTrigger] = useStateA(null);
  const [triggerModalOpen, setTriggerModalOpen] = useStateA(false);
  const [openInsight, setOpenInsight] = useStateA(null);
  const [toast, setToast] = useStateA(null);
  const [refreshing, setRefreshing] = useStateA(false);

  /* ─── Workspace handlers ─── */
  const handleSwitchWs = (id) => {
    setActiveWsId(id);
    setPage("dashboard");
    setCategory("all");
    setSearchQuery("");
    const ws = workspaces.find(w => w.id === id);
    setToast(`Workspace · ${ws?.name}`);
  };
  const handleCreateWs = (ws) => {
    setWorkspaces([...workspaces, ws]);
    setActiveWsId(ws.id);
    setPage("triggers");
    setCategory("all");
    setToast(`Workspace "${ws.name}" criado — adicione seu primeiro trigger`);
  };

  /* ─── Trigger handlers ─── */
  const handleNewTrigger = () => { setEditingTrigger(null); setTriggerModalOpen(true); };
  const handleEditTrigger = (t) => { setEditingTrigger(t); setTriggerModalOpen(true); };
  const handleSaveTrigger = (t) => {
    if (t.id) {
      setAllTriggers(allTriggers.map(x => x.id === t.id ? { ...x, ...t } : x));
      api.put(`/api/plot-market/triggers/${t.id}`, t).catch(() => {});
      setToast("Trigger atualizado");
    } else {
      const newT = {
        ...t,
        id: `trig-${Date.now()}`,
        workspaceId: activeWsId,
        createdAt: new Date().toISOString(), createdBy: "Wilker",
        lastRun: null, nextRun: null,
        totalInsights: 0, insights24h: 0
      };
      setAllTriggers([newT, ...allTriggers]);
      api.post('/api/plot-market/triggers', newT).catch(() => {});
      setToast(`Trigger "${t.name}" criado · busca iniciada`);
    }
  };
  const handleToggleTrigger = (id) => {
    setAllTriggers(allTriggers.map(t => t.id === id ? { ...t, enabled: !t.enabled } : t));
    api.patch(`/api/plot-market/triggers/${id}/toggle`).catch(() => {});
  };
  const handleRunTrigger = (id) => {
    const t = allTriggers.find(x => x.id === id);
    setToast(`Executando "${t?.name}"…`);
    setAllTriggers(allTriggers.map(x => x.id === id ? { ...x, lastRun: new Date().toISOString() } : x));
    api.post(`/api/plot-market/triggers/${id}/run`)
      .then(() => api.get('/api/plot-market/insights'))
      .then(d => { if (d.insights?.length) setAllInsights(d.insights); })
      .catch(() => {});
  };
  const handleDuplicateTrigger = (id) => {
    const t = allTriggers.find(x => x.id === id);
    if (!t) return;
    const copy = { ...t, id: `trig-${Date.now()}`, name: t.name + " (cópia)", createdAt: new Date().toISOString() };
    setAllTriggers([copy, ...allTriggers]);
    api.post('/api/plot-market/triggers', copy).catch(() => {});
    setToast("Trigger duplicado");
  };
  const handleDeleteTrigger = (id) => {
    setAllTriggers(allTriggers.filter(t => t.id !== id));
    api.del(`/api/plot-market/triggers/${id}`).catch(() => {});
    setToast("Trigger removido");
  };

  /* ─── Refresh ─── */
  const handleRefresh = () => {
    setRefreshing(true);
    api.post('/api/plot-market/run-all')
      .then(() => new Promise(r => setTimeout(r, 2000)))
      .then(() => api.get('/api/plot-market/insights'))
      .then(d => {
        if (d.insights?.length) setAllInsights(d.insights);
        setRefreshing(false);
        setToast(`Feed atualizado · ${d.insights?.filter(i => i.isNew)?.length || 0} novos insights`);
      })
      .catch(() => {
        setRefreshing(false);
        setToast("Feed atualizado");
      });
  };

  const filteredCount = (cat) => {
    if (cat === "all") return insights.length;
    return insights.filter(i => i.category === cat).length;
  };

  const pageTitle = (() => {
    if (page === "dashboard") return CAT[category]?.label || "Dashboard";
    if (page === "triggers")  return "Meus Triggers";
    if (page === "launches")  return "Lançamentos & Features";
    if (page === "memory")    return "Memória do Agente";
    if (page === "search")    return "Buscar & Explorar";
    if (page === "reports")   return "Relatórios & Analytics";
    if (page === "settings")  return "Configurações";
  })();

  return (
    <div className="rd-shell">
      {/* ─── Sidebar ─── */}
      <aside className="rd-sidebar">
        <WorkspaceSwitcher
          workspaces={workspaces}
          activeId={activeWsId}
          onSwitch={handleSwitchWs}
          onCreateNew={() => setNewWsOpen(true)}
        />

        <nav className="rd-nav">
          <div className="rd-nav-section">
            <div className="rd-nav-head">Visão por categoria</div>
            {Object.entries(CAT).map(([key, meta]) => (
              <button
                key={key}
                className={`rd-nav-item${page === "dashboard" && category === key ? " active" : ""}`}
                onClick={() => { setCategory(key); setPage("dashboard"); }}
              >
                <span className="rd-nav-dot" style={{ background: meta.color, borderColor: meta.color }}/>
                {meta.label}
                <span className="rd-nav-count">{filteredCount(key)}</span>
              </button>
            ))}
          </div>

          <div className="rd-nav-section">
            <div className="rd-nav-head">Gerenciar</div>
            <button className={`rd-nav-item${page === "triggers" ? " active" : ""}`} onClick={() => setPage("triggers")}>
              <Icon name="radar" size={14} />
              <span>Meus Triggers</span>
              <span className="rd-nav-count">{triggers.filter(t => t.enabled).length}</span>
            </button>
            <button className={`rd-nav-item${page === "launches" ? " active" : ""}`} onClick={() => setPage("launches")}>
              <Icon name="rocket" size={14} />
              <span>Lançamentos</span>
              <span className="rd-nav-count">{insights.filter(i => i.category === "launches").length}</span>
            </button>
            <button className={`rd-nav-item${page === "memory" ? " active" : ""}`} onClick={() => setPage("memory")}>
              <Icon name="brain" size={14} />
              <span>Memória do Agente</span>
              {memCount > 0 && <span className="rd-nav-count">{memCount}</span>}
            </button>
            <button className={`rd-nav-item${page === "search" ? " active" : ""}`} onClick={() => setPage("search")}>
              <Icon name="search" size={14} />
              <span>Buscar</span>
            </button>
            <button className={`rd-nav-item${page === "reports" ? " active" : ""}`} onClick={() => setPage("reports")}>
              <Icon name="trending" size={14} />
              <span>Relatórios</span>
            </button>
            <button className={`rd-nav-item${page === "settings" ? " active" : ""}`} onClick={() => setPage("settings")}>
              <Icon name="settings" size={14} />
              <span>Configurações</span>
            </button>
          </div>
        </nav>

        <div className="rd-sidebar-footer">
          <div className="av">W</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="name">Wilker</div>
            <div className="role">Marketing · Admin</div>
          </div>
          <button className="rd-btn ghost sm icon" onClick={() => setPage("settings")} title="Configurações">
            <Icon name="settings" size={13}/>
          </button>
        </div>
      </aside>

      {/* ─── Main ─── */}
      <main className="rd-main">
        <div className="rd-topbar">
          <div className="rd-topbar-title">
            <span className="crumb" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <WorkspaceAvatar ws={activeWs} size={18} />
              {activeWs.name}
            </span>
            <span className="sep">/</span>
            <span style={{ color: "var(--ink-0)" }}>{pageTitle}</span>
            {page === "dashboard" && (
              <span className="meta">· {insights.filter(i => category === "all" || i.category === category).length} itens</span>
            )}
          </div>

          {(page === "dashboard") && (
            <div className="rd-search">
              <Icon name="search" size={13}/>
              <input
                placeholder="Buscar no radar…"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <kbd>⌘K</kbd>
            </div>
          )}

          {page === "triggers" && (
            <button className="rd-btn primary" onClick={handleNewTrigger}>
              <Icon name="plus" size={13} strokeWidth={2.4}/>
              Novo trigger
            </button>
          )}

          <button className="rd-btn" onClick={handleRefresh} disabled={refreshing}>
            <Icon name="refresh" size={13} style={refreshing ? { animation: "spin 1s linear infinite" } : {}}/>
            {refreshing ? "Coletando…" : "Atualizar"}
          </button>
          <button className="rd-btn icon" title="Notificações">
            <Icon name="bell" size={14}/>
          </button>
        </div>

        {page === "dashboard" && (
          <DashboardPage
            insights={insights} workspace={activeWs} catMeta={CAT}
            category={category} searchQuery={searchQuery} setSearchQuery={setSearchQuery}
            onOpen={setOpenInsight} onRefresh={handleRefresh} refreshing={refreshing}
            feedback={wsFeedback} onFeedback={handleFeedback}
          />
        )}

        {page === "triggers" && (
          <TriggersPage
            triggers={triggers} workspace={activeWs} catMeta={CAT}
            onEdit={handleEditTrigger} onToggle={handleToggleTrigger} onRun={handleRunTrigger}
            onDuplicate={handleDuplicateTrigger} onDelete={handleDeleteTrigger} onNew={handleNewTrigger}
          />
        )}

        {page === "search" && (
          <SearchPage insights={insights} catMeta={CAT} onOpen={setOpenInsight}
            feedback={wsFeedback} onFeedback={handleFeedback}/>
        )}

        {page === "memory" && (
          <MemoryPage
            insights={insights} workspace={activeWs} catMeta={CAT}
            feedback={wsFeedback} notes={wsNotes}
            onFeedback={handleFeedback} onNoteChange={handleNoteChange}
            onOpen={setOpenInsight}
          />
        )}

        {page === "launches" && (
          <LaunchesPage
            insights={insights} triggers={triggers} workspace={activeWs} catMeta={CAT}
            feedback={wsFeedback} onFeedback={handleFeedback}
            onOpen={setOpenInsight}
          />
        )}

        {page === "reports" && (
          <ReportsPage insights={insights} catMeta={CAT}/>
        )}

        {page === "settings" && (
          <SettingsPage workspace={activeWs} onCreateWs={() => setNewWsOpen(true)} workspaces={workspaces}/>
        )}
      </main>

      {/* ─── Modals ─── */}
      <TriggerModal
        open={triggerModalOpen}
        initial={editingTrigger}
        onClose={() => setTriggerModalOpen(false)}
        onSave={handleSaveTrigger}
        onDelete={handleDeleteTrigger}
      />
      {openInsight && (
        <InsightDetailModal
          insight={openInsight}
          catMeta={CAT}
          feedback={wsFeedback[openInsight.id]}
          note={wsNotes[openInsight.id]}
          onFeedback={handleFeedback}
          onNoteChange={handleNoteChange}
          onClose={() => setOpenInsight(null)}
          onToast={setToast}
        />
      )}
      <NewWorkspaceModal
        open={newWsOpen}
        onClose={() => setNewWsOpen(false)}
        onCreate={handleCreateWs}
      />
      {toast && <Toast message={toast} onDone={() => setToast(null)}/>}
    </div>
  );
}

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