@extends('layouts.portal.app')

@section('title', 'Build Your Insights Plan — 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>
        body, .page { font-family: 'Inter', sans-serif; }

        .custom-checkbox {
            width: 20px; height: 20px; border-radius: 6px; border: 1px solid #d1d5db;
            appearance: none; cursor: pointer; position: relative; background: #fff;
        }
        .custom-checkbox:checked {
            border-color: #2563eb; background-color: #2563eb;
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
            background-repeat: no-repeat; background-position: center; background-size: 80%;
        }

        .panel-half { flex:1; padding:24px; overflow-y:auto; background:#f9fafb }
        .panel-half.right { background:#fff; border-left:1px solid var(--border) }

        .card-option {
            display:flex; align-items:center; padding:12px; background:#fff;
            border-radius:10px; border:1px solid var(--border);
            box-shadow:var(--shadow-sm); transition:box-shadow .2s ease;
            cursor:pointer;
        }
        .card-option:hover { box-shadow:var(--shadow); }

        .plan-footer {
            display:flex; align-items:center; justify-content:space-between;
            border-top:1px solid var(--border); padding:16px 24px; background:#fff;
        }

        /* Left panel background */
        .panel-half {
            display: flex;
            flex-direction: column;
            padding: 24px;
            background: #f9fafb;
        }

        /* Right panel (Apps) */
        .panel-half.right {
            background: #fff;
            border-left: 1px solid var(--border);
        }

        /* App placeholder visual fix */
        #app-placeholder {
            text-align: center;
            padding: 48px;
            border: 2px dashed var(--border);
            border-radius: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
@endpush

@section('content')
    <main class="container page" style="max-width:1200px">
        <section class="panel card" style="padding:0; display:flex; flex-direction:column; min-height:80vh">

            {{-- Header --}}
            <div style="padding:24px; border-bottom:1px solid var(--border)">
                <h1 style="margin:0; font:800 22px/1.2 Inter,system-ui">Build Your Insights Plan</h1>
                <p style="color:#6b7280; margin-top:4px">
                    Select your data sources to see the powerful Insight Apps you'll unlock.
                </p>
            </div>

            {{-- Two-panel layout --}}
            <div style="flex:1; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-top:1px solid var(--border)">
                {{-- LEFT: Insight Sources --}}
                <div class="panel-half">
                    <h2 style="font-weight:700; font-size:16px; margin-bottom:12px">1. Select Your Insight Sources</h2>

                    <div id="vendor-fastlane-notice" style="display:none; background:#eff6ff; border-left:4px solid #2563eb; padding:12px 16px; border-radius:8px; margin-bottom:16px">
                        <h4 style="margin:0; font-weight:700; color:#1d4ed8">Welcome, AttributionHero User!</h4>
                        <p style="margin:4px 0 0; font-size:13px; color:#1e40af">
                            Your source and reports are pre-selected. Connect your e-commerce store to see your attribution data alongside your sales.
                        </p>
                    </div>

                    {{-- E-Commerce --}}
                    <div style="margin-bottom:24px">
                        <h3 style="font-weight:700; color:#374151; font-size:14px; border-bottom:1px solid var(--border); padding-bottom:6px">E-Commerce Platforms</h3>
                        <div style="display:grid; gap:10px; margin-top:12px">
                            <label class="card-option">
                                <input type="checkbox" id="source-magento" data-source="magento" class="custom-checkbox">
                                <img src="https://placehold.co/40x40/FDF4F4/C42525?text=M" alt="Magento" style="width:28px; height:28px; margin:0 12px; border-radius:6px">
                                <span class="font-medium">Magento</span>
                            </label>

                            <label class="card-option">
                                <input type="checkbox" id="source-shopware" data-source="shopware" class="custom-checkbox">
                                <img src="https://placehold.co/40x40/EBF5FB/2D3748?text=S" alt="Shopware" style="width:28px; height:28px; margin:0 12px; border-radius:6px">
                                <span class="font-medium">Shopware</span>
                            </label>
                        </div>
                    </div>

                    {{-- Ads --}}
                    <div style="margin-bottom:24px">
                        <h3 style="font-weight:700; color:#374151; font-size:14px; border-bottom:1px solid var(--border); padding-bottom:6px">Advertising Channels</h3>
                        <div style="display:grid; gap:10px; margin-top:12px">
                            <label class="card-option">
                                <input type="checkbox" id="source-google-ads" data-source="google-ads" class="custom-checkbox">
                                <img src="https://placehold.co/40x40/FEFBEB/F59E0B?text=G" alt="Google Ads" style="width:28px; height:28px; margin:0 12px; border-radius:6px">
                                <span class="font-medium">Google Ads</span>
                            </label>
                        </div>
                    </div>

                    {{-- Partner --}}
                    <div>
                        <h3 style="font-weight:700; color:#374151; font-size:14px; border-bottom:1px solid var(--border); padding-bottom:6px">Partner Solutions</h3>
                        <div style="display:grid; gap:10px; margin-top:12px">
                            <label class="card-option">
                                <input type="checkbox" id="source-attributionhero" data-source="attributionhero" class="custom-checkbox">
                                <img src="https://placehold.co/40x40/F0FFF4/2F855A?text=A" alt="AttributionHero" style="width:28px; height:28px; margin:0 12px; border-radius:6px">
                                <span class="font-medium">AttributionHero</span>
                                <span style="font-size:12px; color:#6b7280; margin-left:6px">(Multi-channel Tracking)</span>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- RIGHT: Insight Apps --}}
                <div class="panel-half right">
                    <h2 style="font-weight:700; font-size:16px; margin-bottom:12px">2. Select Your Insight Apps</h2>

                    <div id="apps-container" style="display:flex; flex-direction:column; gap:10px">
                        <div id="app-placeholder" style="text-align:center; padding:48px; border:2px dashed var(--border); border-radius:12px">
                            <svg width="48" height="48" stroke="#9ca3af" fill="none" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                            </svg>
                            <h3 style="margin-top:10px; font:600 14px/1.2 Inter">Apps will appear here</h3>
                            <p style="margin-top:4px; font:400 13px/1.2 Inter; color:#6b7280">
                                Select a source on the left to get started.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Footer --}}
            <div class="plan-footer">
                <div class="text-sm">
                    <p style="font-weight:700; margin:0">Your Plan Summary:</p>
                    <p style="color:#6b7280; margin:4px 0 0">
                        <span id="sources-count" style="font-weight:700">0</span> Insight Sources &amp;
                        <span id="apps-count" style="font-weight:700">0</span> Insight Apps selected.
                    </p>
                </div>
                <a href="{{ route('datasources.connect', ['provider' => 'magento2']) }}" id="next-button" class="btn btn--brand" style="padding:10px 18px">
                    Next: Configure Your Setup →
                </a>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const sources = {
                magento: document.getElementById('source-magento'),
                shopware: document.getElementById('source-shopware'),
                'google-ads': document.getElementById('source-google-ads'),
                attributionhero: document.getElementById('source-attributionhero'),
            };

            const appsContainer = document.getElementById('apps-container');
            const appPlaceholder = document.getElementById('app-placeholder');
            const sourcesCount = document.getElementById('sources-count');
            const appsCount = document.getElementById('apps-count');
            const nextButton = document.getElementById('next-button');

            const apps = {
                'revenue-summary': {
                    name: 'Revenue Summary Report',
                    requires: ['magento', 'shopware'],
                    logo: 'https://placehold.co/40x40/EBF5FF/3182CE?text=R'
                },
                'marketing-roi': {
                    name: 'Marketing ROI Analysis',
                    requires: [['magento', 'shopware'], 'google-ads'],
                    logo: 'https://placehold.co/40x40/F0FFF4/38A169?text=ROI'
                },
                'attribution-dashboard': {
                    name: 'AttributionHero Dashboard',
                    requires: ['attributionhero'],
                    logo: 'https://placehold.co/40x40/F0FFF4/2F855A?text=A'
                },
                'full-funnel': {
                    name: 'Full Funnel Conversion Analysis',
                    requires: [['magento', 'shopware'], 'attributionhero'],
                    logo: 'https://placehold.co/40x40/EBF4FF/3C57C4?text=F'
                },
            };

            function createAppElement(id, app) {
                const card = document.createElement('label');
                card.id = `app-${id}`;
                card.className = 'card-option wizard-card hidden';
                card.innerHTML = `
            <input type="checkbox" data-app-id="${id}" class="custom-checkbox" checked>
            <img src="${app.logo}" alt="App Logo" style="width:28px; height:28px; margin:0 12px; border-radius:6px">
            <div class="flex-1">
                <span class="font-medium">${app.name}</span>
            </div>`;
                setTimeout(() => {
                    card.classList.remove('hidden');
                    card.classList.add('visible');
                }, 50);
                return card;
            }

            function updateUI() {
                const selectedSources = Object.keys(sources).filter(k => sources[k].checked);
                appPlaceholder.style.display = selectedSources.length ? 'none' : 'block';

                Object.keys(apps).forEach(appId => {
                    const app = apps[appId];
                    const existing = document.getElementById(`app-${appId}`);

                    const isMet = app.requires.every(req => {
                        if (Array.isArray(req)) return req.some(s => selectedSources.includes(s));
                        return selectedSources.includes(req);
                    });

                    if (isMet && !existing) appsContainer.appendChild(createAppElement(appId, app));
                    else if (!isMet && existing) existing.remove();
                });

                const appCount = appsContainer.querySelectorAll('input[type="checkbox"]:checked').length;
                sourcesCount.textContent = selectedSources.length;
                appsCount.textContent = appCount;
                nextButton.disabled = selectedSources.length === 0 || appCount === 0;
            }

            Object.values(sources).forEach(chk => chk.addEventListener('change', updateUI));
            appsContainer.addEventListener('change', e => e.target.matches('input[type="checkbox"]') && updateUI());
            updateUI();
        });
    </script>
@endpush