@extends('layouts.admin')

@section('title', __('ui.dashboard.overview.title'))

@section('content')
    @if ($overview === null)
        <x-admin.page-header :title="__('ui.dashboard.overview.title')" :description="__('ui.dashboard.overview.no_access')" :eyebrow="__('ui.dashboard.overview.eyebrow')" />
        <div class="empty-state">{{ __('ui.dashboard.overview.no_access') }}</div>
    @else
        @php
            $journey = collect($overview['journey'])->keyBy('key');
            $journeyOrder = ['visit', 'service_view', 'order_started', 'order_completed'];
            $journeyIcons = ['visit' => 'globe', 'service_view' => 'eye', 'order_started' => 'check', 'order_completed' => 'check'];
            $projectTotal = collect($overview['project_statuses'])->sum('value');
        @endphp

        <section class="overview-dashboard overview-dashboard--restored" data-overview-dashboard data-endpoint="{{ route('admin.dashboard.data') }}"
            data-loading-text="{{ __('ui.dashboard.overview.states.loading') }}" data-updated-text="{{ __('ui.dashboard.overview.states.updated') }}"
            data-days-label="{{ __('ui.dashboard.overview.meetings.period', ['days' => '__DAYS__']) }}" data-generated-label="{{ __('ui.dashboard.overview.generated_plain') }}"
            data-source-label="{{ __('ui.dashboard.overview.source_note') }}" data-demo-source-label="{{ __('ui.dashboard.overview.demo_source_note') }}"
            data-users-label="{{ __('ui.dashboard.overview.journey.users') }}" data-previous-stage-label="{{ __('ui.dashboard.overview.journey.of_previous') }}"
            data-drop-label="{{ __('ui.dashboard.overview.journey.drop') }}" aria-busy="false">

            <form class="overview-toolbar" method="GET" action="{{ route('admin.dashboard') }}" data-overview-filter>
                <label class="overview-search"><x-admin.icon name="search" /><span class="visually-hidden">{{ __('ui.dashboard.overview.toolbar.search') }}</span><input type="search" placeholder="{{ __('ui.dashboard.overview.toolbar.search') }}" data-overview-search></label>
                <div class="overview-date-range"><label><span>{{ __('ui.dashboard.overview.toolbar.from') }}</span><input type="date" name="from" value="{{ $overview['period']['from'] }}" data-overview-from></label><span aria-hidden="true">—</span><label><span>{{ __('ui.dashboard.overview.toolbar.to') }}</span><input type="date" name="to" value="{{ $overview['period']['to'] }}" data-overview-to></label></div>
                <button class="button overview-filter-button" type="submit"><x-admin.icon name="filter" />{{ __('ui.dashboard.overview.toolbar.apply') }}</button>
                <span class="overview-toolbar-status" data-overview-status aria-live="polite"></span>
            </form>

            <header class="overview-heading"><div><p class="eyebrow">{{ __('ui.dashboard.overview.eyebrow') }}</p><h2 class="overview-page-title">{{ __('ui.dashboard.overview.title') }}</h2><p>{{ __('ui.dashboard.overview.subtitle') }}</p></div><div class="overview-heading__meta"><span class="overview-period-chip"><x-admin.icon name="calendar" /><span data-overview-period>{{ $overview['period']['label'] }}</span></span><span class="badge" data-overview-demo @if (!($overview['meta']['is_demo'] ?? false)) hidden @endif>{{ __('ui.dashboard.overview.demo_label') }}</span></div></header>
            <div class="overview-error" data-overview-error hidden>{{ __('ui.dashboard.overview.errors.load') }}</div>

            <section class="overview-kpis" aria-label="{{ __('ui.dashboard.overview.sections.kpis') }}">
                @foreach ($overview['kpis'] as $kpi)
                    <article class="overview-kpi"><div class="overview-kpi__top"><span>{{ __('ui.dashboard.overview.kpis.'.$kpi['key']) }}</span><span class="overview-icon"><x-admin.icon :name="$kpi['icon']" /></span></div><strong>{{ $kpi['formatted'] }}</strong><span class="overview-change is-{{ $kpi['direction'] }}"><b>{{ $kpi['change_percent'] === null ? '—' : (($kpi['change_percent'] >= 0 ? '+' : '').number_format($kpi['change_percent'], 1).'%') }}</b>{{ __('ui.dashboard.overview.comparison') }}</span></article>
                @endforeach
            </section>

            <section class="overview-card overview-journey" aria-labelledby="journey-heading">
                <header class="overview-card__heading">
                    <div class="journey-header-main">
                        <div>
                            <h2 id="journey-heading">{{ __('ui.dashboard.overview.journey.title') }}</h2>
                            <p>{{ __('ui.dashboard.overview.journey.subtitle') }}</p>
                        </div>
                    </div>
                    @php
                        $firstStage = $journey->get('visit');
                        $finalStage = $journey->get('order_completed');
                        $initialVal = max(1, $firstStage['value'] ?? 1);
                        $finalVal = $finalStage['value'] ?? 0;
                        $funnelYield = round(($finalVal / $initialVal) * 100, 1);
                    @endphp
                    <div class="journey-funnel-summary">
                        <div class="funnel-summary-badge">
                            <span class="funnel-summary-label">{{ __('ui.dashboard.overview.journey.overall') }}</span>
                            <strong class="funnel-summary-value" data-journey-overall>{{ number_format($funnelYield, 1) }}%</strong>
                        </div>
                    </div>
                </header>

                <div class="journey-path">
                    <div class="journey-pipeline" role="list" aria-label="{{ __('ui.dashboard.overview.journey.title') }}">
                    @foreach ($journeyOrder as $index => $stageKey)
                        @php
                            $stage = $journey->get($stageKey);
                            $isFirst = $loop->first;
                            $isLast = $loop->last;
                            $volumePct = max(8, min(100, $stage['share'] ?? 100));
                        @endphp
                        <article class="journey-pipeline__stage" role="listitem" tabindex="0" data-journey="{{ $stageKey }}" data-stage-index="{{ $index + 1 }}">
                            <div class="stage-card-header">
                                <span class="stage-step-pill">{{ __('ui.dashboard.overview.journey.stage_label', ['num' => '0' . ($index + 1)]) }}</span>
                                <span class="stage-card-icon"><x-admin.icon :name="$journeyIcons[$stageKey]" /></span>
                            </div>

                            <div class="stage-card-body">
                                <h3 class="stage-card-title">{{ __('ui.dashboard.overview.journey.stages.'.$stageKey) }}</h3>
                                <p class="stage-card-desc">{{ __('ui.dashboard.overview.journey.descriptions.'.$stageKey) }}</p>
                                <div class="stage-card-metric">
                                    <strong class="stage-card-number" data-journey-value>{{ $stage['formatted'] }}</strong>
                                    <span class="stage-card-unit">{{ __('ui.dashboard.overview.journey.users') }}</span>
                                </div>
                            </div>

                            <div class="stage-card-footer">
                                <div class="stage-volume-bar">
                                    <div class="stage-volume-fill" style="width: {{ $volumePct }}%" data-journey-bar></div>
                                </div>
                                <div class="stage-conversion-tag is-{{ $isFirst ? 'initial' : 'converted' }}">
                                    @if ($isFirst)
                                        <span class="tag-status-dot"></span>
                                        <span>{{ __('ui.dashboard.overview.journey.starting_point') }}</span>
                                    @else
                                        <span class="tag-status-dot"></span>
                                        <span>{{ __('ui.dashboard.overview.journey.conversion') }}: <b data-journey-conversion>{{ number_format($stage['conversion'], 1) }}%</b></span>
                                    @endif
                                </div>
                            </div>
                        </article>

                        @unless ($loop->last)
                            @php
                                $nextStageKey = $journeyOrder[$index + 1];
                                $nextStage = $journey->get($nextStageKey);
                                $dropOffVal = $nextStage['drop_off'] ?? 0;
                            @endphp
                            <div class="journey-pipeline__bridge" aria-hidden="true">
                                <div class="bridge-flow-line">
                                    <span class="bridge-pulse"></span>
                                </div>
                                @if ($dropOffVal > 0)
                                    <div class="bridge-drop-pill" title="{{ __('ui.dashboard.overview.journey.drop') }}">
                                        <span class="bridge-drop-arrow">↓</span>
                                        <b data-bridge-drop="{{ $nextStageKey }}">-{{ number_format($dropOffVal, 1) }}%</b>
                                    </div>
                                @endif
                                <div class="bridge-arrow-icon journey-path__arrow">
                                    <x-admin.icon name="chevron" />
                                </div>
                            </div>
                        @endunless
                    @endforeach
                    </div>
                </div>
                <div class="overview-empty" data-journey-empty @if (collect($overview['journey'])->contains(fn ($item) => $item['value'] > 0)) hidden @endif>{{ __('ui.dashboard.overview.empty.journey') }}</div>
            </section>

            <div class="overview-analytics-grid">
                <section class="overview-card overview-traffic" aria-labelledby="traffic-heading">
                    <header class="overview-card__heading"><div><div><h2 id="traffic-heading">{{ __('ui.dashboard.overview.traffic.title') }}</h2><p>{{ __('ui.dashboard.overview.traffic.subtitle') }}</p></div></div></header>
                    <div class="traffic-list">@foreach ($overview['traffic_sources'] as $source)<div class="traffic-row" tabindex="0" data-traffic="{{ $source['key'] }}"><div><span>{{ __('ui.dashboard.overview.traffic.sources.'.$source['key']) }}</span><strong><span data-traffic-value>{{ $source['formatted'] }}</span><small data-traffic-percentage>{{ number_format($source['percentage'], 1) }}%</small></strong></div><div class="traffic-track"><span style="width:{{ min(100, $source['percentage']) }}%" data-traffic-track></span></div></div>@endforeach</div>
                    <div class="overview-empty" data-traffic-empty @if (collect($overview['traffic_sources'])->sum('value') > 0) hidden @endif>{{ __('ui.dashboard.overview.empty.traffic') }}</div>
                </section>

                <section class="overview-card overview-meetings" aria-labelledby="meetings-heading">
                    <header class="overview-card__heading"><div><div><h2 id="meetings-heading">{{ __('ui.dashboard.overview.meetings.title') }}</h2><p>{{ __('ui.dashboard.overview.meetings.subtitle') }}</p></div></div><span class="overview-range-label" data-chart-period>{{ __('ui.dashboard.overview.meetings.period', ['days' => $overview['period']['days']]) }}</span></header>
                    <div class="overview-chart-wrap"><canvas data-meeting-chart></canvas></div><div class="overview-empty" data-meeting-empty @if (collect($overview['meeting_bookings'])->sum('value') > 0) hidden @endif>{{ __('ui.dashboard.overview.empty.meetings') }}</div>
                </section>

                <section class="overview-card overview-projects" aria-labelledby="projects-heading">
                    <header class="overview-card__heading"><div><div><h2 id="projects-heading">{{ __('ui.dashboard.overview.projects.title') }}</h2><p>{{ __('ui.dashboard.overview.projects.subtitle') }}</p></div></div></header>
                    <div class="project-status-layout"><div class="project-tech-chart" data-project-chart><div class="project-tech-chart__summary"><span>{{ __('ui.dashboard.overview.projects.total') }}</span><strong data-project-total>{{ number_format($projectTotal) }}</strong></div><div class="project-tech-chart__canvas"><div class="project-waffle" aria-hidden="true"></div></div></div><div class="project-legend">@foreach ($overview['project_statuses'] as $status)<div style="--status-color:{{ $status['color'] }}" data-project-status="{{ $status['key'] }}"><span></span><b>{{ __('ui.dashboard.overview.projects.statuses.'.$status['key']) }}</b><strong data-project-value>{{ number_format($status['value']) }}</strong><small data-project-percentage>{{ number_format($status['percentage'], 1) }}%</small></div>@endforeach</div></div>
                    <div class="overview-empty" data-project-empty @if ($projectTotal > 0) hidden @endif>{{ __('ui.dashboard.overview.empty.projects') }}</div>
                </section>

                <section class="overview-card overview-activities" aria-labelledby="activities-heading">
                    <header class="overview-card__heading"><div><div><h2 id="activities-heading">{{ __('ui.dashboard.overview.activities.title') }}</h2><p>{{ __('ui.dashboard.overview.activities.subtitle') }}</p></div></div></header>
                    <div class="activity-list" data-activity-list>@foreach (array_slice($overview['recent_activities'], 0, 4) as $activity)<article class="activity-row activity-mini-card" data-activity-text="{{ Str::lower($activity['title'].' '.$activity['description']) }}" data-activity-key="{{ $activity['key'] ?? 'activity' }}"><span class="activity-icon"><x-admin.icon :name="$activity['icon']" /></span><div><strong>{{ $activity['title'] }}</strong><span>{{ $activity['description'] }}</span></div><time datetime="{{ $activity['occurred_at'] }}">{{ $activity['time'] }}</time></article>@endforeach</div>
                    <template data-activity-template><article class="activity-row activity-mini-card"><span class="activity-icon">@foreach (['cart','calendar','briefcase','users','activity'] as $icon)<span data-activity-icon="{{ $icon }}"><x-admin.icon :name="$icon" /></span>@endforeach</span><div><strong data-activity-title></strong><span data-activity-description></span></div><time data-activity-time></time></article></template>
                    <div class="overview-empty" data-activity-empty @if ($overview['recent_activities'] !== []) hidden @endif>{{ __('ui.dashboard.overview.empty.activities') }}</div>
                </section>
            </div>

            <footer class="overview-freshness"><span data-overview-source>{{ ($overview['meta']['is_demo'] ?? false) ? __('ui.dashboard.overview.demo_source_note') : __('ui.dashboard.overview.source_note') }}</span><span data-generated-at>{{ __('ui.dashboard.overview.generated', ['time' => \Carbon\CarbonImmutable::parse($overview['meta']['generated_at'])->locale(app()->getLocale())->diffForHumans()]) }}</span></footer>
            <script nonce="{{ request()->attributes->get('csp_nonce') }}" type="application/json" data-overview-data>@json($overview, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_THROW_ON_ERROR)</script>
        </section>
    @endif
@endsection