"use client";

import Sidebar from "../components/Sidebar";
import TopBar from "../components/TopBar";
import IntelligenceCards from "./IntelligenceCards";
import KnowledgeMesh from "./KnowledgeMesh";
import ThoughtStreams from "./ThoughtStreams";
import IntelFooter from "./IntelFooter";
import { useEffect, useState } from "react";
import { fetchGroups, fetchAllSignals, fetchAllPatterns } from "../lib/api";

export default function IntelligencePage() {
  const [signalCount, setSignalCount] = useState<number | null>(null);
  const [patternCount, setPatternCount] = useState<number | null>(null);

  useEffect(() => {
    async function load() {
      try {
        const [allGroups, patterns] = await Promise.all([
          fetchAllSignals(),
          fetchAllPatterns(),
        ]);
        setSignalCount(allGroups.flatMap((g) => g.signals).length);
        setPatternCount(patterns.filter((p) => p.is_active).length);
      } catch {
        //
      }
    }
    load();
  }, []);

  return (
    <div
      className="flex h-screen overflow-hidden bg-[#09090B] text-white"
      style={{ fontFamily: "'Poppins', sans-serif" }}
    >
      <Sidebar />
      <main className="flex-1 ml-[240px] flex flex-col h-screen overflow-hidden">
        <TopBar />

        {/* Scrollable content */}
        <div className="flex-1 overflow-y-auto custom-scrollbar px-10 pb-12 pt-10">
          {/* Page Header */}
          <header className="mb-12">
            <div className="flex items-end justify-between">
              <div>
                <h1
                  className="text-4xl font-bold tracking-tight text-white"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Intelligence Control
                </h1>
                <p
                  className="text-xs mt-2 tracking-widest uppercase font-mono-data"
                  style={{ color: "#A78BFA" }}
                >
                  ACTIVE_INSIGHTS:{" "}
                  {signalCount !== null ? signalCount.toLocaleString() : "—"} //
                  PATTERNS_ACTIVE:{" "}
                  {patternCount !== null ? patternCount : "—"}
                </p>
              </div>

              {/* Status pill */}
              <div className="flex items-center space-x-4">
                <div
                  className="px-4 py-2 rounded-xl flex items-center space-x-3"
                  style={{ backgroundColor: "#131315" }}
                >
                  <span
                    className="w-2 h-2 rounded-full active-pulse"
                    style={{ backgroundColor: "#A78BFA", display: "inline-block" }}
                  />
                  <span
                    className="text-[10px] font-mono-data uppercase"
                    style={{ color: "rgba(249,245,248,0.6)" }}
                  >
                    Inference Engine: Optimal
                  </span>
                </div>
              </div>
            </div>
          </header>

          {/* Main card grid */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Top row: 3 intelligence engine cards */}
            <div className="lg:col-span-3">
              <IntelligenceCards />
            </div>

            {/* Bottom row: Knowledge mesh (2 cols) + Thought Streams (1 col) */}
            <div className="lg:col-span-2">
              <KnowledgeMesh />
            </div>
            <div className="lg:col-span-1">
              <ThoughtStreams />
            </div>
          </div>

          {/* Footer stats bar */}
          <IntelFooter />
        </div>
      </main>
    </div>
  );
}