import "./logs.css";
import Sidebar from "../components/Sidebar";
import TopBar from "../components/TopBar";
import LogAnalytics from "./LogAnalytics";
import LogTable from "./LogTable";
import MasterTerminal from "./MasterTerminal";
import SystemTickerLogs from "./SystemTickerLogs";

export const metadata = {
  title: "ThirdEye | System Logs",
  description: "Advanced System Logs — ThirdEye Sovereign Protocol",
};

export default function LogsPage() {
  return (
    <div className="flex h-screen overflow-hidden bg-[#09090B] text-white">
      <Sidebar />
      <main className="flex-1 ml-[240px] flex flex-col h-screen overflow-hidden bg-[#09090B] relative">
        <TopBar />

        {/* Log Content */}
        <div className="flex-1 p-8 overflow-hidden flex flex-col gap-6">
          {/* Analytics Top Bar */}
          <LogAnalytics />

          {/* Main Log Viewer & Console */}
          <div className="flex-1 flex flex-col gap-4 overflow-hidden">
            {/* Table Section */}
            <LogTable />

            {/* Interactive Console */}
            <MasterTerminal />
          </div>
        </div>

        {/* System Ticker */}
        <SystemTickerLogs />
      </main>
    </div>
  );

}