@props([
    'cards' => [],
    'max' => null,
])

@php
    $chartCards = collect($cards)->values();
    $chartMax = max(1, (int) ($max ?? $chartCards->max('count')));
    $totalDocuments = (int) $chartCards->sum(fn ($card) => (int) ($card['count'] ?? 0));
@endphp

@once
    <style>
        .dashboard-chart-card {
            border: 1px solid var(--vz-border-color);
            box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
            overflow: hidden;
            animation: none;
        }

        .dashboard-chart-card .card-body {
            padding: 14px 16px;
        }

        .dashboard-chart-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .dashboard-chart-title {
            min-width: 0;
        }

        .dashboard-chart-title h5 {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .dashboard-total-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(var(--vz-primary-rgb), .10);
            color: var(--vz-primary);
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
        }

        .dashboard-chart-toggle {
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
        }

        .dashboard-bar-chart {
            --chart-row-height: 38px;
            --chart-row-gap: 10px;
            --chart-visible-rows: 6;

            display: flex;
            flex-direction: column;
            gap: var(--chart-row-gap);

            max-height: calc(
                (var(--chart-row-height) * var(--chart-visible-rows)) +
                (var(--chart-row-gap) * (var(--chart-visible-rows) - 1))
            );

            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 6px;
            scroll-behavior: smooth;
        }

        .dashboard-bar-chart::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .dashboard-bar-chart::-webkit-scrollbar-thumb {
            background: rgba(135, 138, 153, .45);
            border-radius: 999px;
        }

        .dashboard-bar-chart::-webkit-scrollbar-track {
            background: transparent;
        }

        .dashboard-bar-row {
            display: grid;
            grid-template-columns: minmax(120px, 180px) 1fr minmax(34px, auto);
            align-items: center;
            gap: 10px;
            min-height: var(--chart-row-height);
            flex: 0 0 auto;
            padding: 5px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color .18s ease, box-shadow .18s ease,
                        opacity .18s ease, filter .18s ease;
        }

        .dashboard-bar-row:not(.is-filter-disabled):hover {
            background: rgba(var(--vz-primary-rgb), .07);
        }

        .dashboard-bar-row:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), .16);
        }

        .dashboard-bar-row.is-filter-active {
            background: rgba(var(--vz-primary-rgb), .11);
        }

        .dashboard-bar-row.is-filter-disabled {
            opacity: .38;
            cursor: pointer;
            filter: grayscale(.7);
        }

        .dashboard-bar-row.is-filter-disabled:hover {
            opacity: .55;
        }

        .dashboard-bar-label {
            color: var(--vz-secondary-color);
            font-size: var(--vz-body-font-size);
            font-weight: 500;
            line-height: 1.35;
            white-space: normal;
            word-break: normal;
            overflow-wrap: anywhere;
            transition: color .2s ease;
        }

        .dashboard-bar-row.is-filter-active .dashboard-bar-label {
            color: var(--vz-primary);
            font-weight: 700;
        }

        .dashboard-bar-track {
            height: 12px;
            overflow: hidden;
            border: 1px solid var(--vz-border-color);
            border-radius: 999px;
            background: var(--vz-light);
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .dashboard-bar-row:not(.is-filter-disabled):hover .dashboard-bar-track {
            border-color: rgba(var(--vz-primary-rgb), .5);
            box-shadow: 0 0 0 2px rgba(var(--vz-primary-rgb), .10);
        }

        .dashboard-bar-row.is-filter-active .dashboard-bar-track {
            border-color: var(--vz-primary);
            box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), .14);
        }

        .dashboard-bar-fill {
            height: 100%;
            border-radius: 999px;
            background-color: var(--vz-primary) !important;
            transform: scaleX(1);
            transform-origin: left center;
            animation: none;
            transition: width .55s cubic-bezier(.22, 1, .36, 1),
                        height .55s cubic-bezier(.22, 1, .36, 1),
                        filter .2s ease;
            will-change: transform, width, height;
        }

        .dashboard-chart-card.is-chart-animating .dashboard-bar-fill {
            animation: dashboardBarProgressHorizontal .75s cubic-bezier(.22, 1, .36, 1) both;
        }

        .dashboard-bar-row:not(.is-filter-disabled):hover .dashboard-bar-fill {
            filter: brightness(1.12) saturate(1.08);
        }

        .dashboard-bar-row.is-filter-active .dashboard-bar-fill {
            filter: brightness(.92) saturate(1.18);
        }

        .dashboard-bar-value {
            color: var(--vz-body-color);
            font-family: var(--vz-font-sans-serif);
            font-size: var(--vz-body-font-size);
            font-weight: 600;
            text-align: right;
            transition: color .2s ease, transform .2s ease;
        }

        .dashboard-bar-row.is-filter-active .dashboard-bar-value {
            color: var(--vz-primary);
            font-weight: 700;
        }

        .dashboard-chart-card.is-vertical .dashboard-bar-chart {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: center;
            gap: 12px;

            max-height: none;
            overflow-x: auto;
            overflow-y: hidden;

            padding: 12px 8px 16px;
            border-left: 1px solid var(--vz-border-color);
            border-bottom: 1px solid var(--vz-border-color);
            background-image: repeating-linear-gradient(
                to top,
                transparent 0,
                transparent 39px,
                var(--vz-border-color) 40px
            );
        }

        .dashboard-chart-card.is-vertical .dashboard-bar-chart.is-overflowing {
            justify-content: flex-start;
        }

        .dashboard-chart-card.is-vertical .dashboard-bar-row {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: clamp(125px, 26vw, 165px) auto auto;
            gap: 6px;

            flex: 1 0 clamp(105px, 18vw, 145px);
            min-width: clamp(105px, 18vw, 145px);

            padding: 0 6px;
            text-align: center;
        }

        .dashboard-chart-card.is-vertical .dashboard-bar-track {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            grid-row: 1;
            width: clamp(34px, 7vw, 46px);
            height: clamp(125px, 26vw, 165px);
            margin: 0 auto;
            border-radius: 6px 6px 0 0;
            background: rgba(var(--vz-light-rgb), .72);
        }

        .dashboard-chart-card.is-vertical .dashboard-bar-fill {
            width: 100% !important;
            height: var(--bar-height, 0%);
            border-radius: 6px 6px 0 0;
            background-color: var(--vz-primary) !important;
            transform: scaleY(1);
            transform-origin: center bottom;
        }

        .dashboard-chart-card.is-chart-animating.is-vertical .dashboard-bar-fill {
            animation-name: dashboardBarProgressVertical;
        }

        @keyframes dashboardBarProgressHorizontal {
            from {
                transform: scaleX(0);
            }
        }

        @keyframes dashboardBarProgressVertical {
            from {
                transform: scaleY(0);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .dashboard-chart-card,
            .dashboard-bar-row,
            .dashboard-bar-label,
            .dashboard-bar-track,
            .dashboard-bar-fill,
            .dashboard-bar-value {
                animation: none;
                transition: none;
            }
        }

        .dashboard-chart-card.is-vertical .dashboard-bar-value {
            grid-row: 2;
            text-align: center;
        }

        .dashboard-chart-card.is-vertical .dashboard-bar-label {
            grid-row: 3;
            text-align: center;
            max-width: 100%;
            display: block;
            overflow: visible;
            white-space: normal;
            word-break: normal;
            overflow-wrap: anywhere;
            line-height: 1.35;
        }

        @media (max-width: 575.98px) {
            .dashboard-chart-card .card-body {
                padding: 12px 10px;
            }

            .dashboard-chart-header {
                gap: 8px;
            }

            .dashboard-chart-title h5 {
                font-size: 15px;
            }

            .dashboard-total-pill {
                font-size: 11px;
                padding: 4px 7px;
            }

            .dashboard-bar-chart {
                --chart-row-height: 48px;
                --chart-row-gap: 10px;
                --chart-visible-rows: 6;
            }

            .dashboard-bar-row {
                grid-template-columns: 1fr auto;
                gap: 6px;
            }

            .dashboard-bar-track {
                grid-column: 1 / -1;
                grid-row: 2;
                height: 11px;
            }

            .dashboard-chart-card.is-vertical .dashboard-bar-chart {
                gap: 10px;
                padding: 12px 6px 18px;
            }

            .dashboard-chart-card.is-vertical .dashboard-bar-row {
                flex: 1 0 120px;
                min-width: 120px;
                grid-template-rows: 135px auto auto;
            }

            .dashboard-chart-card.is-vertical .dashboard-bar-track {
                width: 40px;
                height: 135px;
            }
        }
    </style>
@endonce

<div class="card dashboard-chart-card mb-3">
    <div class="card-body">
        <div class="dashboard-chart-header">
            <div class="dashboard-chart-title">
                <h5 class="card-title mb-1">
                    {{ __('Documents by Type') }}
                    <span class="dashboard-total-pill">
                        <i class="ri-file-list-3-line"></i>
                        {{ __('Total Documents') }}:
                        <span
                            data-chart-total
                            data-base-total="{{ $totalDocuments }}"
                        >{{ number_format($totalDocuments) }}</span>
                    </span>
                </h5>
                <p class="text-muted mb-0">{{ __('Document counts grouped by document type.') }}</p>
            </div>

            <button
                type="button"
                class="btn btn-sm btn-soft-primary btn-icon dashboard-chart-toggle"
                data-chart-toggle
                title="{{ __('Toggle chart direction') }}"
                aria-label="{{ __('Toggle chart direction') }}"
            >
                <i class="ri-bar-chart-2-line"></i>
            </button>
        </div>

        <div class="dashboard-bar-chart">
            @foreach($chartCards as $card)
                @php
                    $chartLabel = trim((string) ($card['label'] ?? __('N/A')));
                    $chartLabel = $chartLabel !== '' ? $chartLabel : __('N/A');
                    $chartCount = (int) ($card['count'] ?? 0);
                    $barWidth = $chartCount > 0 ? max(3, (int) round(($chartCount / $chartMax) * 100)) : 0;
                    $chartKey = $card['key'] ?? md5(mb_strtolower((string) $chartLabel));
                @endphp

                <div
                    class="dashboard-bar-row"
                    data-chart-row
                    data-document-type-key="{{ $chartKey }}"
                    data-base-count="{{ $chartCount }}"
                    style="--bar-index: {{ $loop->index }};"
                    role="button"
                    tabindex="0"
                    aria-pressed="false"
                    title="{{ __('Filter table by') }} {{ $chartLabel }}"
                >
                    <div class="dashboard-bar-label" title="{{ $chartLabel }}">
                        {{ $chartLabel }}
                    </div>

                    <div
                        class="dashboard-bar-track"
                        title="{{ $chartLabel }}: {{ number_format($chartCount) }}"
                        aria-label="{{ $chartLabel }}: {{ number_format($chartCount) }}"
                    >
                        <div
                            class="dashboard-bar-fill bg-primary"
                            style="width: {{ $barWidth }}%; --bar-height: {{ $barWidth }}%;"
                        ></div>
                    </div>

                    <div class="dashboard-bar-value" data-chart-value>{{ $chartCount }}</div>
                </div>
            @endforeach
        </div>
    </div>
</div>

@once
    <script>
        (function initializeDocumentTypeChartControls() {
            function updateVerticalOverflow(chartCard) {
                if (!chartCard || !chartCard.classList.contains('is-vertical')) {
                    return;
                }

                var chart = chartCard.querySelector('.dashboard-bar-chart');

                if (!chart) {
                    return;
                }

                chart.classList.toggle('is-overflowing', chart.scrollWidth > chart.clientWidth + 2);
            }

            document.querySelectorAll('[data-chart-toggle]').forEach(function (button) {
                button.addEventListener('click', function () {
                    var chartCard = button.closest('.dashboard-chart-card');
                    var icon = button.querySelector('i');
                    var chart = chartCard ? chartCard.querySelector('.dashboard-bar-chart') : null;

                    if (!chartCard || !icon || !chart) {
                        return;
                    }

                    var isVertical = chartCard.classList.toggle('is-vertical');

                    icon.className = isVertical
                        ? 'ri-bar-chart-horizontal-line'
                        : 'ri-bar-chart-2-line';

                    chart.scrollTop = 0;
                    chart.scrollLeft = 0;

                    requestAnimationFrame(function () {
                        updateVerticalOverflow(chartCard);
                    });
                });
            });

            window.addEventListener('resize', function () {
                document.querySelectorAll('.dashboard-chart-card.is-vertical').forEach(updateVerticalOverflow);
            });
        })();
    </script>
@endonce

@include('components.dashboard-filter-summary-script')