<?php
$page_title = 'Integration Hub';
require_once __DIR__ . '/../config.php';
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (!isset($_SESSION['admin_id'])) { redirect(SITE_URL . '/admin/login.php'); }
require_once __DIR__ . '/header.php';
?>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-plug" style="color:#06b6d4; margin-right:10px;"></i>Integration Hub</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">API gateway, webhooks, ETL pipelines, and enterprise connectors.</p>
    </div>
    <button style="background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; border:none; padding:10px 20px; border-radius:8px; font-size:0.9rem; cursor:pointer; font-weight:600;"><i class="fas fa-plus"></i> Add Connector</button>
</div>

<div class="grid-4" style="margin-bottom:24px;">
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #06b6d4;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">API CALLS TODAY</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">124K</div>
        <div style="color:#06b6d4; font-size:0.8rem; margin-top:5px;"><i class="fas fa-exchange-alt"></i> 99.98% Uptime</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">ACTIVE CONNECTORS</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">28</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-check-circle"></i> All Healthy</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">ETL PIPELINES</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">12</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-stream"></i> Real-time Sync</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">WEBHOOKS</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">56</div>
        <div style="color:#8b5cf6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-bolt"></i> Event-driven</div>
    </div>
</div>

<div class="grid-2" style="margin-bottom:24px;">
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-link" style="color:#06b6d4; margin-right:8px;"></i>Active Connectors</h3>
        <?php
        $connectors = [
            ['Tally ERP', 'ERP Connector', '#10b981', 'Synced', 'fas fa-calculator'],
            ['Salesforce CRM', 'CRM Connector', '#3b82f6', 'Synced', 'fas fa-cloud'],
            ['HDFC Bank API', 'Banking', '#ef4444', 'Active', 'fas fa-university'],
            ['GST Portal', 'Tax Portal', '#f59e0b', 'Connected', 'fas fa-file-invoice'],
            ['Razorpay', 'Payment Gateway', '#8b5cf6', 'Live', 'fas fa-credit-card'],
            ['SAP S/4HANA', 'ERP Connector', '#06b6d4', 'Syncing', 'fas fa-server'],
        ];
        foreach ($connectors as $c): ?>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px 15px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <div style="display:flex; align-items:center; gap:12px;">
                <div style="width:40px; height:40px; border-radius:8px; background:<?= $c[2] ?>15; display:flex; align-items:center; justify-content:center;">
                    <i class="<?= $c[4] ?>" style="color:<?= $c[2] ?>;"></i>
                </div>
                <div>
                    <div style="font-weight:600; font-size:0.9rem; color:#0f172a;"><?= $c[0] ?></div>
                    <div style="font-size:0.75rem; color:#94a3b8;"><?= $c[1] ?></div>
                </div>
            </div>
            <span style="background:#dcfce7; color:#166534; padding:3px 10px; border-radius:10px; font-size:0.7rem; font-weight:bold;"><?= $c[3] ?></span>
        </div>
        <?php endforeach; ?>
    </div>

    <div style="display:flex; flex-direction:column; gap:24px;">
        <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
            <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-database" style="color:#8b5cf6; margin-right:8px;"></i>Data Lake Sync</h3>
            <div style="background:#f8fafc; padding:15px; border-radius:8px; margin-bottom:15px;">
                <div style="display:flex; justify-content:space-between; margin-bottom:8px;">
                    <span style="font-size:0.85rem; font-weight:600;">Last Full Sync</span>
                    <span style="font-size:0.85rem; color:#10b981;">2 mins ago</span>
                </div>
                <div style="background:#e2e8f0; height:8px; border-radius:4px; overflow:hidden;">
                    <div style="width:100%; height:100%; background:#10b981; border-radius:4px;"></div>
                </div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
                <div style="text-align:center; padding:10px; background:#f8fafc; border-radius:8px;">
                    <div style="font-size:1.2rem; font-weight:700; color:#06b6d4;">4.2 TB</div>
                    <div style="font-size:0.75rem; color:#94a3b8;">Data Ingested</div>
                </div>
                <div style="text-align:center; padding:10px; background:#f8fafc; border-radius:8px;">
                    <div style="font-size:1.2rem; font-weight:700; color:#8b5cf6;">240M</div>
                    <div style="font-size:0.75rem; color:#94a3b8;">Records Synced</div>
                </div>
            </div>
        </div>

        <div style="background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; padding:20px; border-radius:12px;">
            <h3 style="margin:0 0 8px; font-size:1.1rem;"><i class="fas fa-shield-alt"></i> API Gateway</h3>
            <p style="margin:0 0 15px; font-size:0.85rem; opacity:0.8;">Rate limiting, authentication, and traffic management.</p>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:8px;">
                <span>Rate Limit</span><span style="font-weight:bold;">10K req/min</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:8px;">
                <span>Auth Method</span><span style="font-weight:bold;">OAuth 2.0 + JWT</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem;">
                <span>Avg Latency</span><span style="font-weight:bold;">45ms</span>
            </div>
        </div>
    </div>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
