import React from 'react';
import Sidebar from '../components/Sidebar';
import TopBar from '../components/TopBar';
import SystemTickerKnowledge from './SystemTickerKnowledge';
import NetworkMap from './NetworkMap';
import FloatingControls from './FloatingControls';
import RightPanelTabs from './RightPanelTabs';
import './knowledge.css';

export default function KnowledgeBasePage() {
  return (
    <div className="h-screen w-full bg-[#09090B] text-[#F4F4F5] font-['Poppins'] overflow-hidden selection:bg-violet-500/30">
      <Sidebar />
      <TopBar />

      {/* Main Content Canvas */}
      <main className="absolute left-[240px] top-20 right-0 bottom-8 overflow-hidden z-10 flex">

        {/* ── Graph Canvas (fills remaining space) ── */}
        <div className="relative flex-1 overflow-hidden grid-bg">
          {/* Crosshair Cursor Elements (Visual Only) */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 pointer-events-none opacity-[0.15] z-10 mix-blend-screen">
            <div className="absolute top-1/2 left-0 w-full h-[1px] bg-[#a88cfb]/50 shadow-[0_0_10px_#a88cfb]"></div>
            <div className="absolute left-1/2 top-0 h-full w-[1px] bg-[#a88cfb]/50 shadow-[0_0_10px_#a88cfb]"></div>
            <div className="absolute inset-0 border border-[#a88cfb]/30 rounded-full scale-50"></div>
            <div className="absolute inset-0 border border-[#00daf3]/20 rounded-full scale-100 shadow-[0_0_20px_rgba(0,218,243,0.1)_inset]"></div>
          </div>

          <NetworkMap />
          <FloatingControls />
        </div>

        {/* ── Right Panel (fixed width, scrollable) ── */}
        <div className="w-[520px] flex-shrink-0 overflow-y-auto overflow-x-hidden py-4 pr-4 pl-3 bg-[#09090B]/60 backdrop-blur-sm border-l border-white/[0.04]" style={{ scrollbarWidth: "none" }}>
          <RightPanelTabs />
        </div>
      </main>

      <SystemTickerKnowledge />
    </div>
  );
}