// [TSM.ID].[11031972] -- All Rights Reserved. Proprietary & Confidential.
import { useState } from 'react';
import { useAuth } from '../context/AuthContext';

import DashboardOverview from '../components/DashboardOverview';
import TenantArchitect from '../components/TenantArchitect';
import OuroborosCanvas from '../components/OuroborosCanvas';
import DangerModal from '../components/DangerModal';
import CommercialTiers from '../components/CommercialTiers';
import ModulePricingMatrix from '../components/ModulePricingMatrix';
import OmniBillingOrchestrator from '../components/OmniBillingOrchestrator';
import UniversalTopbar from '../components/UniversalTopbar';
import { CommercialProvider } from '../context/CommercialContext';
import { IamPolicyProvider } from '../context/IamPolicyContext';
import IamArchitect from '../components/IamArchitect';
import SecurityEnclave from '../components/SecurityEnclave';
import CreatorsMark from '../components/CreatorsMark';
import ModuleManager from '../components/ModuleManager';
import BridgeManager from '../components/BridgeManager';
import TenantModuleMatrix from '../components/TenantModuleMatrix';
import TenantMonitor from '../components/TenantMonitor';

export default function SupremeDashboard() {
  const [activeTab, setActiveTab] = useState('overview');
  const { logout } = useAuth();
  
  const [ignitedLocally, setIgnitedLocally] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleIgniteClick = () => setIsModalOpen(true);
  const executeIgnition = async () => {
    setIsModalOpen(false);
    try {
      setIgnitedLocally(true);
      await fetch('/api/v1/ouroboros/ignite', { method: 'POST' });
    } catch (e) {
      console.error(e);
    }
  };
  const cancelIgnition = () => setIsModalOpen(false);
  const showOuroboros = ignitedLocally;

  return (
    <CommercialProvider>
      <IamPolicyProvider>
      <DangerModal 
        isOpen={isModalOpen}
        title="OUROBOROS KILL-SWITCH"
        message="Anda akan mengaktifkan Ouroboros Kill-Switch. Seluruh modul Komersial akan dimatikan secara instan dan semua sesi klien akan dihancurkan. Eksekusi protokol absolut ini?"
        onConfirm={executeIgnition}
        onCancel={cancelIgnition}
        confirmText="INITIATE ANNIHILATION"
      />
      {showOuroboros && <OuroborosCanvas />}
      <div className="app-container supreme-theme" style={{paddingTop: '50px'}}>
        <UniversalTopbar />
        <nav className="sidebar">
          <div className="brand">
            XCU <span className="text-cyan">ULTRA</span>
            <div style={{fontSize: '0.6rem', color: '#ff003c', letterSpacing: '2px', marginTop: '5px'}}>SUPREME COMMAND</div>
          </div>
          
          <div className={`nav-link ${activeTab === 'overview' ? 'active' : ''}`} onClick={() => setActiveTab('overview')}>
            Supreme's Eye
          </div>
          <div className={`nav-link ${activeTab === 'tenant' ? 'active' : ''}`} onClick={() => setActiveTab('tenant')}>
            Global Tenant Matrix
          </div>
          <div className={`nav-link ${activeTab === 'commercial' ? 'active' : ''}`} onClick={() => setActiveTab('commercial')}>
            Commercial Tiers
          </div>
          <div className={`nav-link ${activeTab === 'module-pricing' ? 'active' : ''}`} onClick={() => setActiveTab('module-pricing')}>
            A La Carte Pricing
          </div>
          <div className={`nav-link ${activeTab === 'security' ? 'active' : ''}`} onClick={() => setActiveTab('security')}>
            Security Enclave
          </div>
          <div className={`nav-link ${activeTab === 'billing-nexus' ? 'active' : ''}`} onClick={() => setActiveTab('billing-nexus')} style={{borderBottom: '1px solid var(--table-border-light)', paddingBottom: '15px'}}>
            Omni-Billing Nexus
          </div>
          <div className={`nav-link ${activeTab === 'module-registry' ? 'active' : ''}`} onClick={() => setActiveTab('module-registry')} style={{color: 'var(--accent-cyan)'}}>
            ⬡ Module Registry
          </div>
          <div className={`nav-link ${activeTab === 'bridge-control' ? 'active' : ''}`} onClick={() => setActiveTab('bridge-control')} style={{color: 'var(--accent-green)'}}>
            ⇄ Bridge Control
          </div>
          <div className={`nav-link ${activeTab === 'module-matrix' ? 'active' : ''}`} onClick={() => setActiveTab('module-matrix')} style={{color: 'var(--accent-purple)', borderBottom: '1px solid var(--table-border-light)', paddingBottom: '15px'}}>
            ⬡ Module Matrix
          </div>
          <div className={`nav-link ${activeTab === 'iam-architect' ? 'active' : ''}`} onClick={() => setActiveTab('iam-architect')}>
            IAM Architect Matrix
          </div>
          <div className={`nav-link ${activeTab === 'tenant-monitor' ? 'active' : ''}`} onClick={() => setActiveTab('tenant-monitor')} style={{color: 'var(--accent-cyan)', borderBottom: '1px solid var(--table-border-light)', paddingBottom: '15px'}}>
            📡 Tenant Monitor
          </div>
          <div className={`nav-link ${activeTab === 'creators-mark' ? 'active' : ''}`} onClick={() => setActiveTab('creators-mark')}>
            The Creator's Mark (About)
          </div>
          
          <div className="nav-link text-red" onClick={handleIgniteClick}>
            Kill-Switch Protocol
          </div>

          <div style={{marginTop: 'auto'}}>
            <button className="btn-primary" style={{width: '100%', background: 'transparent', border: '1px solid var(--text-muted)', color: 'var(--text-main)'}} onClick={logout}>
              LOGOUT SUPREME
            </button>
          </div>
        </nav>

        <main className="main-content">
          <header className="topbar">
            <h1 className="page-title">
              {activeTab === 'overview' && 'GLOBAL OPERATIONS MATRIX'}
              {activeTab === 'tenant' && 'TENANT CONTROL GATEWAY'}
              {activeTab === 'commercial' && 'COMMERCIAL PACKAGES & BILLING'}
              {activeTab === 'module-pricing' && 'DECENTRALIZED MODULE PRICING'}
              {activeTab === 'security' && 'SECURITY ENCLAVE & MFA CONFIGURATION'}
              {activeTab === 'billing-nexus' && 'OMNI-BILLING NEXUS & NOTIFICATIONS'}
              {activeTab === 'module-registry' && 'SOVEREIGN MODULE REGISTRY'}
              {activeTab === 'bridge-control' && 'BRIDGE CONTROL — ONE-WAY PUSH'}
              {activeTab === 'module-matrix' && 'MODULE ACCESS MATRIX (ALL 99)'}
              {activeTab === 'iam-architect' && 'IAM ARCHITECT MATRIX'}
              {activeTab === 'tenant-monitor' && 'TENANT MONITOR — LIVE INFRASTRUCTURE'}
              {activeTab === 'creators-mark' && 'QUANTUM OMNI-SIGNATURE'}
            </h1>
            <div className="user-profile">
              <span className="badge active">SUPREME ADMIN</span>
            </div>
          </header>

          <div className="dashboard-content">
            {activeTab === 'overview' && <DashboardOverview />}
            {activeTab === 'tenant' && <TenantArchitect />}
            {activeTab === 'commercial' && <CommercialTiers />}
            {activeTab === 'module-pricing' && <ModulePricingMatrix />}
            {activeTab === 'security' && <SecurityEnclave />}
            {activeTab === 'billing-nexus' && <OmniBillingOrchestrator />}
            {activeTab === 'module-registry' && <ModuleManager />}
            {activeTab === 'bridge-control' && <BridgeManager />}
            {activeTab === 'module-matrix' && <TenantModuleMatrix allowedModules={'supreme'} />}
            {activeTab === 'iam-architect' && <IamArchitect />}
            {activeTab === 'tenant-monitor' && <TenantMonitor />}
            {activeTab === 'creators-mark' && <CreatorsMark />}
          </div>
        </main>
      </div>
      </IamPolicyProvider>
    </CommercialProvider>
  );
}
