<div>
    <x-title>Productivity</x-title>

    @php
        $fmtDuration = function (?float $seconds) {
            if ($seconds === null) {
                return '—';
            }
            $hours = $seconds / 3600;
            if ($hours < 1) {
                return number_format($seconds / 60, 0) . 'm';
            }
            if ($hours < 24) {
                return number_format($hours, 1) . 'h';
            }
            return number_format($hours / 24, 1) . 'd';
        };

        $fmtCell = function (array $row) use ($fmtDuration) {
            $value = $row['value'];
            if ($value === null) {
                return ['—', 'text-muted'];
            }
            return match ($row['kind']) {
                'pct'      => [number_format($value, 1) . '%', 'text-dark'],
                'days'     => [number_format($value, 1) . 'd', 'text-dark'],
                'duration' => [$fmtDuration($value), 'text-dark'],
                default    => $value > 0 ? [number_format($value), 'text-dark'] : ['—', 'text-muted'],
            };
        };
    @endphp

    <style>
        .prod-table { font-size: .85rem; }
        .prod-table td, .prod-table th { vertical-align: middle; }
        .prod-num { font-variant-numeric: tabular-nums; }
        .prod-value { min-width: 110px; }
        .prod-snap .h3 { font-variant-numeric: tabular-nums; }
    </style>

    {{-- Controls --}}
    <div class="d-flex flex-wrap align-items-end justify-content-between my-3 gap-3">
        <div class="d-flex flex-wrap align-items-end gap-2">
            <div>
                <label class="form-label small text-muted mb-1">From</label>
                <input type="date" wire:model.live="from" class="form-control form-control-sm shadow-sm" style="min-width:160px;">
            </div>
            <div>
                <label class="form-label small text-muted mb-1">To</label>
                <input type="date" wire:model.live="to" class="form-control form-control-sm shadow-sm" style="min-width:160px;">
            </div>
            <div>
                <label class="form-label small text-muted mb-1">Lead source</label>
                <select wire:model.live="leadSourceId" class="form-select form-select-sm shadow-sm" style="min-width:180px;">
                    <option value="">All lead sources</option>
                    @foreach ($leadSources as $source)
                        <option value="{{ $source->id }}">{{ $source->display_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <small class="text-muted">
            <strong>{{ $fromLabel }}</strong> to <strong>{{ $toLabel }}</strong>
            ({{ number_format($days) }} {{ Str::plural('day', $days) }})
        </small>
    </div>

    {{-- Live status snapshots --}}
    <div class="row g-2 mb-3 prod-snap">
        @foreach ($report['snapshots'] as $snap)
            <div class="col-6 col-md">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body py-2 px-3">
                        <div class="d-flex align-items-center gap-1 text-muted small text-uppercase" style="letter-spacing:.02em;">
                            <i class="mdi mdi-radiobox-marked text-success"></i>
                            <span>{{ $snap['label'] }}</span>
                        </div>
                        <div class="h3 mb-0 text-dark fw-bold">{{ number_format($snap['value']) }}</div>
                        <div class="text-muted" style="font-size:.72rem;">{{ $snap['note'] }}</div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <p class="text-muted small mb-3">
        <i class="mdi mdi-radiobox-marked text-success me-1"></i>
        Cards are live counts of where work sits right now. The tables below count what happened between the selected dates.
    </p>

    {{-- Funnel sections --}}
    <div class="row g-3">
        @foreach ($report['sections'] as $section)
            <div class="col-12 col-lg-4">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-white border-0 pt-3 pb-0">
                        <h6 class="mb-0 text-dark fw-bold">{{ $section['title'] }}</h6>
                    </div>
                    <div class="card-body pt-2">
                        <table class="table table-sm table-hover mb-0 prod-table prod-num">
                            <tbody>
                                @foreach ($section['rows'] as $row)
                                    @php [$text, $cls] = $fmtCell($row); @endphp
                                    <tr>
                                        <td class="text-dark">
                                            {{ $row['label'] }}
                                            @if ($row['sub'])
                                                <span class="text-muted small">{{ $row['sub'] }}</span>
                                            @endif
                                        </td>
                                        <td class="text-end prod-value fw-semibold {{ $cls }}">{{ $text }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
