@extends('layouts.portal.app')

@section('title', 'Insights Hub — InsightsReady')

@push('styles')
    <link rel="stylesheet" href="{{ asset('portal-assets/portal.css') }}" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Page font */
        .page { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }

        /* Simple tabs (look close to the mockup) */
        .tabs { display:flex; gap:24px; border-bottom:1px solid var(--border); padding:0 24px; }
        .tab-btn{
            appearance:none; background:none; border:0; cursor:pointer;
            padding:14px 4px; font:600 14px/1.1 Inter,system-ui; color:#6b7280;
            border-bottom:2px solid transparent; transition:color .15s ease,border-color .15s ease;
        }
        .tab-btn:hover{ color:#374151; border-bottom-color:#e5e7eb }
        .tab-btn.is-active{ color:#2563eb; border-bottom-color:#3b82f6 }

        .tab-panel{ display:none; }
        .tab-panel.is-active{ display:block; }

        /* Page chrome */
        .page-head{ padding:24px; border-bottom:1px solid var(--border) }
        .page-head h3{ margin:0; font:800 22px/1.2 Inter,system-ui; color:#111827 }
        .page-sub{ margin:6px 0 0; color:#6b7280 }

        /* “Card” container */
        .card{ background:#fff; border:1px solid var(--border); border-radius:12px; }

        /* Table look */
        .table{ width:100%; border-collapse:separate; border-spacing:0 }
        .table thead th{
            text-align:left; font:700 11px/1 Inter; letter-spacing:.05em; text-transform:uppercase;
            color:#6b7280; background:#f9fafb; padding:12px 16px; border-bottom:1px solid var(--border)
        }
        .table tbody td{ padding:12px 16px; border-top:1px solid var(--border); font-size:14px; color:#111827 }

        .badge{
            display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font:700 11px/1 Inter;
        }
        .badge--ok{ background:#d1fae5; color:#065f46 }
        .badge--err{ background:#fee2e2; color:#991b1b }

        /* Simple form inputs */
        .form-row{ max-width:640px; display:grid; gap:12px; }
        .form-row label{ font:600 13px/1.2 Inter; color:#374151 }
        .input, .select{
            width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px;
            font:500 14px/1.2 Inter; background:#fff;
        }

        .btn-primary{
            appearance:none; border:0; background:#2563eb; color:#fff; border-radius:10px;
            padding:10px 14px; font:700 14px/1 Inter; cursor:pointer;
        }
        .btn-primary:hover{ background:#1d4ed8 }

        /* Toggle */
        .toggle{ width:44px; height:24px; border-radius:999px; background:#e5e7eb; position:relative; border:0; cursor:pointer }
        .toggle .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:transform .2s ease }
        .toggle.is-on{ background:#2563eb }
        .toggle.is-on .knob{ transform:translateX(20px) }

        .muted{ color:#6b7280 }
        .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#eef2f7; padding:0 4px; border-radius:4px }
    </style>
@endpush

@section('content')
    <main class="container page">

        <section class="panel card" style="padding:0">
            {{-- Header --}}
            <div class="page-head">
                <h3>My E-Commerce Hub</h3>
                <p class="page-sub">The central data warehouse for your e-commerce operations.</p>
            </div>

            {{-- Tabs --}}
            <nav class="tabs" id="hub-tabs">
                <button class="tab-btn is-active" data-tab="status">Status</button>
                <button class="tab-btn" data-tab="configuration">Configuration</button>
                <button class="tab-btn" data-tab="connections">Data Access</button>
                <button class="tab-btn" data-tab="schema">Schema</button>
            </nav>

            {{-- Panels --}}
            <div style="padding:24px">
                {{-- STATUS --}}
                <div id="panel-status" class="tab-panel is-active">
                    <h4 style="margin:0 0 12px; font:700 16px/1.2 Inter">Sync History &amp; Health</h4>

                    <div class="card" style="overflow:hidden">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Time</th>
                                <th>Source</th>
                                <th>Status</th>
                                <th>Records Updated</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>2 minutes ago</td>
                                <td style="font-weight:600">Magento</td>
                                <td><span class="badge badge--ok">Success</span></td>
                                <td>1,402</td>
                            </tr>
                            <tr>
                                <td>10 minutes ago</td>
                                <td style="font-weight:600">Google Ads</td>
                                <td><span class="badge badge--ok">Success</span></td>
                                <td>89</td>
                            </tr>
                            <tr>
                                <td>1 hour ago</td>
                                <td style="font-weight:600">AttributionHero</td>
                                <td><span class="badge badge--err">Failed</span></td>
                                <td>0</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- CONFIGURATION --}}
                <div id="panel-configuration" class="tab-panel">
                    <h4 style="margin:0 0 12px; font:700 16px/1.2 Inter">Hub Configuration</h4>

                    <div class="form-row">
                        <div>
                            <label for="hub-name">Hub Name</label>
                            <input id="hub-name" type="text" class="input" value="My E-Commerce Hub">
                        </div>

                        <div>
                            <label for="history">Historical Data Range</label>
                            <select id="history" class="select">
                                <option>Last 6 Months</option>
                                <option selected>All Time</option>
                            </select>
                        </div>

                        <div>
                            <button class="btn-primary">Save Changes</button>
                        </div>
                    </div>
                </div>

                {{-- CONNECTIONS --}}
                <div id="panel-connections" class="tab-panel">
                    <h4 style="margin:0 0 12px; font:700 16px/1.2 Inter">Direct Data Access</h4>
                    <p class="muted" style="max-width:720px; margin:0 0 12px">
                        For advanced analysis, you can enable a direct connection to your Hub’s data for use in external
                        tools like Power BI Desktop.
                    </p>

                    <div class="card" style="padding:18px; max-width:720px; background:#f9fafb">
                        <div style="display:flex; align-items:center; justify-content:space-between; gap:12px">
                            <div>
                                <div style="font-weight:700">Power BI Direct Connection</div>
                                <div class="muted" style="font-size:14px">Provides a live dataset for custom report building.</div>
                            </div>

                            <div style="display:flex; align-items:center; gap:10px">
                                <span id="toggle-label" class="muted" style="font-size:14px">Disabled</span>
                                <button id="pbi-toggle" class="toggle" type="button" role="switch" aria-checked="false">
                                    <span class="knob"></span>
                                </button>
                            </div>
                        </div>

                        <div id="connection-details" style="display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--border)">
                            <div style="color:#065f46; font-weight:700; font-size:14px; margin-bottom:6px">Connection is Active</div>
                            <div style="display:grid; gap:6px; font-size:14px">
                                <div><strong>Workspace:</strong> <span class="mono">Jane Doe’s Workspace</span></div>
                                <div><strong>Dataset Name:</strong> <span class="mono">My E-Commerce Hub (InsightsReady)</span></div>
                                <button class="btn-link" style="color:#2563eb; font-weight:700; background:none; border:0; padding:0; cursor:pointer">Copy Connection Details</button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- SCHEMA --}}
                <div id="panel-schema" class="tab-panel">
                    <h4 style="margin:0 0 12px; font:700 16px/1.2 Inter">Hub Schema (Read-Only)</h4>
                    <p class="muted" style="max-width:720px; margin:0 0 12px">
                        A reference for the tables and columns available in your standardized Insights Hub.
                    </p>

                    <div class="card" style="padding:14px; background:#0f172a; color:#fff; font:500 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; overflow-x:auto">
<pre><code>Table: Orders
- order_id (string, Primary Key)
- order_date (datetime)
- customer_id (string, Foreign Key -> Customers)
- total_amount (decimal)
- status (string)

Table: Customers
- customer_id (string, Primary Key)
- first_name (string)
- last_name (string)
- email (string)

Table: AdSpend
- ad_date (date)
- campaign_name (string)
- cost (decimal)
...and 5 more tables.</code></pre>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        // Tabs
        const tabBar = document.getElementById('hub-tabs');
        const tabButtons = tabBar.querySelectorAll('.tab-btn');
        const panels = {
            status: document.getElementById('panel-status'),
            configuration: document.getElementById('panel-configuration'),
            connections: document.getElementById('panel-connections'),
            schema: document.getElementById('panel-schema'),
        };

        tabBar.addEventListener('click', (e) => {
            const btn = e.target.closest('.tab-btn');
            if (!btn) return;
            const key = btn.dataset.tab;

            tabButtons.forEach(b => b.classList.remove('is-active'));
            Object.values(panels).forEach(p => p.classList.remove('is-active'));

            btn.classList.add('is-active');
            panels[key].classList.add('is-active');
        });

        // Toggle
        const toggle = document.getElementById('pbi-toggle');
        const toggleLabel = document.getElementById('toggle-label');
        const connectionDetails = document.getElementById('connection-details');
        let isEnabled = false;

        toggle.addEventListener('click', () => {
            isEnabled = !isEnabled;
            toggle.setAttribute('aria-checked', String(isEnabled));
            toggle.classList.toggle('is-on', isEnabled);
            toggleLabel.textContent = isEnabled ? 'Enabled' : 'Disabled';
            connectionDetails.style.display = isEnabled ? 'block' : 'none';
        });
    </script>
@endpush