<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'ChatSell OS' }}</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @vite('resources/js/app.tsx')
</head>
<body class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(16,185,129,0.10),_transparent_28%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)] text-slate-900">
    @php
        $user = auth()->user();
        $tenant = $user->tenant;
        $plan = optional($tenant->plan)->name ?? 'Starter';
        $canAccessOperatorArea = \App\Support\OperatorAccess::allows($user);
    @endphp

    <div class="min-h-screen">
        <header class="sticky top-0 z-30 border-b border-white/60 bg-white/80 backdrop-blur-xl">
            <div class="mx-auto flex max-w-[1440px] items-center justify-between gap-6 px-6 py-4">
                <div class="flex items-center gap-4">
                    <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-950 text-sm font-semibold text-white shadow-lg shadow-slate-950/15">
                        CS
                    </div>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-600">ChatSell OS</p>
                        <div class="mt-1 flex flex-wrap items-center gap-2">
                            <h1 class="text-lg font-semibold text-slate-950">{{ $tenant->company_name }}</h1>
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">{{ $plan }}</span>
                            <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700">{{ ucfirst($tenant->status) }}</span>
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <div class="hidden rounded-2xl border border-slate-200 bg-white px-4 py-2 text-right shadow-sm sm:block">
                        <p class="text-xs font-medium uppercase tracking-[0.2em] text-slate-400">User</p>
                        <p class="mt-1 text-sm font-semibold text-slate-800">{{ $user->full_name }}</p>
                    </div>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="rounded-2xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-slate-400 hover:bg-slate-50">
                            Log out
                        </button>
                    </form>
                </div>
            </div>
        </header>

        <div class="mx-auto grid max-w-[1440px] grid-cols-1 gap-6 px-6 py-8 xl:grid-cols-[280px_minmax(0,1fr)]">
            <aside class="overflow-hidden rounded-[30px] border border-slate-200/70 bg-slate-950 text-slate-300 shadow-[0_30px_120px_-40px_rgba(15,23,42,0.65)]">
                <div class="border-b border-white/10 px-6 py-6">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-400">Workspace</p>
                    <p class="mt-3 text-lg font-semibold text-white">{{ $tenant->company_name }}</p>
                    <p class="mt-1 text-sm text-slate-400">Professional social-commerce operating system for your sales team.</p>
                </div>

                <nav class="space-y-6 px-4 py-5">
                    @if (! $canAccessOperatorArea)
                    <div>
                        <p class="px-3 text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Live now</p>
                        <div class="mt-3 space-y-1.5">
                            <a
                                href="{{ route('dashboard') }}"
                                class="{{ request()->routeIs('dashboard') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                            >
                                Dashboard
                            </a>
                            @canany(['conversations.view_all', 'conversations.view_assigned'])
                                <a
                                    href="{{ route('inbox') }}"
                                    class="{{ request()->routeIs('inbox') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Inbox
                                </a>
                            @endcanany
                            @can('leads.view')
                                <a
                                    href="{{ route('pipeline') }}"
                                    class="{{ request()->routeIs('pipeline') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Pipeline
                                </a>
                            @endcan
                            @can('contacts.view')
                                <a
                                    href="{{ route('contacts') }}"
                                    class="{{ request()->routeIs('contacts') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Contacts
                                </a>
                            @endcan
                            @can('products.manage')
                                <a
                                    href="{{ route('products') }}"
                                    class="{{ request()->routeIs('products') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Products
                                </a>
                            @endcan
                            @can('quotes.manage')
                                <a
                                    href="{{ route('quotes') }}"
                                    class="{{ request()->routeIs('quotes') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Quotes
                                </a>
                            @endcan
                            @can('orders.manage')
                                <a
                                    href="{{ route('orders') }}"
                                    class="{{ request()->routeIs('orders*') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Orders
                                </a>
                            @endcan
                            <a
                                href="{{ route('tasks') }}"
                                class="{{ request()->routeIs('tasks') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                            >
                                Tasks
                            </a>
                            <a
                                href="{{ route('follow-up-queue') }}"
                                class="{{ request()->routeIs('follow-up-queue') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                            >
                                Follow-up Queue
                            </a>
                            @canany(['reports.view', 'reports.view_revenue'])
                                <a
                                    href="{{ route('reports.show', 'sources') }}"
                                    class="{{ request()->routeIs('reports.*') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Reports
                                </a>
                            @endcanany
                            @can('channels.manage')
                                <a
                                    href="{{ route('settings.channels') }}"
                                    class="{{ request()->routeIs('settings.channels') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Channels
                                </a>
                            @endcan
                            @can('users.manage')
                                <a
                                    href="{{ route('settings.users') }}"
                                    class="{{ request()->routeIs('settings.users') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Users
                                </a>
                            @endcan
                            @can('roles.manage')
                                <a
                                    href="{{ route('settings.roles') }}"
                                    class="{{ request()->routeIs('settings.roles') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Roles
                                </a>
                            @endcan
                            @can('billing.manage')
                                <a
                                    href="{{ route('settings.billing') }}"
                                    class="{{ request()->routeIs('settings.billing') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Billing
                                </a>
                            @endcan
                            @canany(['ai.manage_settings', 'ai.view_ai_usage'])
                                <a
                                    href="{{ route('settings.ai') }}"
                                    class="{{ request()->routeIs('settings.ai') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    AI Settings
                                </a>
                            @endcanany
                            <a
                                href="{{ route('onboarding.show') }}"
                                class="{{ request()->routeIs('onboarding.*') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                            >
                                Onboarding
                            </a>
                        </div>
                    </div>

                    <div>
                        <p class="px-3 text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Coming next</p>
                        <div class="mt-3 space-y-1.5">
                            @foreach (['Admin'] as $item)
                                <div class="flex items-center justify-between rounded-2xl px-4 py-3 text-sm text-slate-400">
                                    <span>{{ $item }}</span>
                                    <span class="rounded-full border border-white/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Soon</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    @if ($canAccessOperatorArea)
                        <div>
                            <p class="px-3 text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Super Admin</p>
                            <div class="mt-3 space-y-1.5">
                                <a
                                    href="{{ route('admin.dashboard') }}"
                                    class="{{ request()->routeIs('admin.dashboard') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Admin Dashboard
                                </a>
                                <a
                                    href="{{ route('admin.tenants') }}"
                                    class="{{ request()->routeIs('admin.tenants') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Tenants
                                </a>
                                <a
                                    href="{{ route('admin.plans') }}"
                                    class="{{ request()->routeIs('admin.plans') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Plans
                                </a>
                                <a
                                    href="{{ route('admin.billing') }}"
                                    class="{{ request()->routeIs('admin.billing') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Billing
                                </a>
                            </div>
                        </div>

                        <div>
                            <p class="px-3 text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Workspace</p>
                            <div class="mt-3 space-y-1.5">
                                <a
                                    href="{{ route('dashboard') }}"
                                    class="{{ request()->routeIs('dashboard') ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5 hover:text-white' }} block rounded-2xl px-4 py-3 text-sm font-medium transition"
                                >
                                    Open User Workspace
                                </a>
                            </div>
                        </div>
                    @endif
                </nav>
            </aside>

            <main class="space-y-6">
                @if (session('status'))
                    <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700 shadow-sm">
                        {{ session('status') }}
                    </div>
                @endif

                {{ $slot }}
            </main>
        </div>
    </div>
</body>
</html>
