@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    @php
        $savedRules = $config?->percentageRules ?? collect();
        $oldRules = old('percentage_rules');
        $selectedMethod = old('distribution_method', $config?->distribution_method ?? 'manual');
        $savedRulePercentages = $savedRules->pluck('percentage', 'staff_id');
        $oldRules = is_array($oldRules) ? $oldRules : [];

        $staffOptions = $staff->map(fn ($member) => [
            'id' => $member->id,
            'name' => $member->full_name
                ?: trim(($member->first_name ?? '') . ' ' . ($member->last_name ?? ''))
                ?: 'Staff #' . $member->id,
            'job_title' => $member->jobTitle?->name ?? 'Agent',
        ])->values();
    @endphp

    <style>
        .lead-distribution-card {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .lead-distribution-card__body {
            padding: 1.25rem;
        }

        .lead-distribution-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .lead-distribution-field--full {
            grid-column: 1 / -1;
        }

        .lead-distribution-section {
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid #e5e7eb;
        }

        .lead-distribution-section__title {
            margin: 0 0 0.25rem;
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .lead-distribution-section__sub {
            margin: 0 0 1rem;
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.5;
        }

        .lead-distribution-rule {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 180px auto;
            gap: 0.75rem;
            align-items: start;
            padding: 0.85rem;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #f8fafc;
            margin-bottom: 0.75rem;
        }

        .lead-distribution-note {
            padding: 1rem;
            border: 1px solid #c7d2fe;
            border-radius: 12px;
            background: #f8faff;
            color: #334155;
            line-height: 1.55;
        }

        .lead-distribution-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .lead-distribution-current {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .lead-distribution-current__item {
            padding: 0.9rem;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
        }

        .lead-distribution-current__label {
            color: #64748b;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 0.3rem;
        }

        .lead-distribution-current__value {
            color: #111827;
            font-size: 0.92rem;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .agent-rules-panel {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #fff;
            overflow: hidden;
        }

        .agent-rules-panel__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 0.9rem 1rem;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }

        .agent-rules-panel__title {
            margin: 0;
            color: #111827;
            font-size: 0.92rem;
            font-weight: 800;
        }

        .agent-rules-panel__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .agent-rules-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 0.35rem 0.65rem;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            background: #fff;
            color: #334155;
            font-size: 0.78rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .agent-rules-pill--total {
            border-color: #c7d2fe;
            background: #eef2ff;
            color: #3730a3;
        }

        .agent-rules-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .agent-rules-table th {
            padding: 0.8rem 1rem;
            background: #fff;
            color: #64748b;
            border-bottom: 1px solid #e2e8f0;
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .agent-rules-table td {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
        }

        .agent-rules-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .agent-rules-table tbody tr {
            transition: background-color 0.15s ease;
        }

        .agent-rules-table tbody tr:hover {
            background: #f8fafc;
        }

        .agent-profile {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
        }

        .agent-profile__avatar {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #3730a3;
            font-size: 0.78rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .agent-profile__name {
            margin: 0;
            color: #111827;
            font-size: 0.9rem;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .agent-profile__id {
            margin-top: 0.15rem;
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 700;
        }

        .agent-job-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            background: #f1f5f9;
            color: #334155;
            font-size: 0.78rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .agent-percent-control {
            position: relative;
            max-width: 160px;
        }

        .agent-percent-control .asset-input {
            padding-right: 2rem;
            text-align: right;
            font-weight: 800;
        }

        .agent-percent-control__symbol {
            position: absolute;
            top: 50%;
            right: 0.8rem;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 0.82rem;
            font-weight: 900;
            pointer-events: none;
        }

        .agent-rules-empty {
            padding: 2rem 1rem;
            text-align: center;
        }

        @media (max-width: 991.98px) {
            .lead-distribution-grid,
            .lead-distribution-current,
            .lead-distribution-rule {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575.98px) {
            .lead-distribution-card__body {
                padding: 1rem;
            }

            .lead-distribution-actions .asset-btn,
            .lead-distribution-rule .asset-btn {
                width: 100%;
            }

            .agent-rules-table th:nth-child(2),
            .agent-rules-table td:nth-child(2) {
                display: none;
            }

            .agent-rules-table th,
            .agent-rules-table td {
                padding: 0.75rem;
            }

            .agent-percent-control {
                max-width: 120px;
            }
        }
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="Lead Distribution Configuration"
                    description="Configure how incoming leads should be prepared for future distribution.">
                    <a href="{{ route('lead-distribution.queue.index') }}" class="asset-btn asset-btn--secondary">
                        Lead Queue
                    </a>
                    <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <div class="lead-distribution-current">
                    <div class="lead-distribution-current__item">
                        <div class="lead-distribution-current__label">Current Method</div>
                        <div class="lead-distribution-current__value">
                            {{ ucfirst(str_replace('_', ' ', $config?->distribution_method ?? 'manual')) }}
                        </div>
                    </div>

                    <div class="lead-distribution-current__item capacity-current-item">
                        <div class="lead-distribution-current__label">Morning Capacity</div>
                        <div class="lead-distribution-current__value">
                            {{ $config?->morning_shift_capacity ?? '-' }}
                        </div>
                    </div>

                    <div class="lead-distribution-current__item capacity-current-item">
                        <div class="lead-distribution-current__label">Evening Capacity</div>
                        <div class="lead-distribution-current__value">
                            {{ $config?->evening_shift_capacity ?? '-' }}
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('lead-distribution.config.update') }}">
                    @csrf

                    <div class="lead-distribution-card">
                        <div class="lead-distribution-card__body">
                            <div class="lead-distribution-grid">
                                <div class="lead-distribution-field--full">
                                    <label for="distribution_method" class="asset-label">
                                        Distribution Method
                                    </label>

                                    <select
                                        name="distribution_method"
                                        id="distribution_method"
                                        class="asset-input @error('distribution_method') asset-invalid @enderror">
                                        <option value="automatic" @selected($selectedMethod === 'automatic')>
                                            Automatic Distribution
                                        </option>
                                        <option value="percentage" @selected($selectedMethod === 'percentage')>
                                            Percentage-Based Distribution
                                        </option>
                                        <option value="manual" @selected($selectedMethod === 'manual')>
                                            Manual Distribution
                                        </option>
                                    </select>

                                    @error('distribution_method')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div id="capacity-section" class="lead-distribution-section">
                                <h5 class="lead-distribution-section__title">Shift Capacities</h5>
                                <p class="lead-distribution-section__sub">
                                    Capacity values limit how many new leads each agent can receive in the selected shift.
                                </p>

                                <div class="lead-distribution-grid">
                                    <div>
                                        <label for="morning_shift_capacity" class="asset-label">
                                            Morning Shift Capacity
                                        </label>

                                        <input
                                            type="number"
                                            name="morning_shift_capacity"
                                            id="morning_shift_capacity"
                                            value="{{ old('morning_shift_capacity', $config?->morning_shift_capacity) }}"
                                            min="1"
                                            class="asset-input @error('morning_shift_capacity') asset-invalid @enderror">

                                        @error('morning_shift_capacity')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="evening_shift_capacity" class="asset-label">
                                            Evening Shift Capacity
                                        </label>

                                        <input
                                            type="number"
                                            name="evening_shift_capacity"
                                            id="evening_shift_capacity"
                                            value="{{ old('evening_shift_capacity', $config?->evening_shift_capacity) }}"
                                            min="1"
                                            class="asset-input @error('evening_shift_capacity') asset-invalid @enderror">

                                        @error('evening_shift_capacity')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div id="percentage-section" class="lead-distribution-section">
                                <h5 class="lead-distribution-section__title">Percentage Rules</h5>
                                <p class="lead-distribution-section__sub">
                                    Select active staff members and assign a fixed lead percentage. Total percentage must equal 100.
                                </p>

                                @error('percentage_rules')
                                    <div class="invalid-feedback d-block mb-2">{{ $message }}</div>
                                @enderror

                                <div class="agent-rules-panel">
                                    <div class="agent-rules-panel__head">
                                        <h6 class="agent-rules-panel__title">Agent Percentage Allocation</h6>
                                        <div class="agent-rules-panel__meta">
                                            <span class="agent-rules-pill">{{ $staffOptions->count() }} Agents</span>
                                            <span class="agent-rules-pill agent-rules-pill--total">
                                                <span id="percentage-total">0</span>% Assigned
                                            </span>
                                        </div>
                                    </div>

                                    <div class="ui-table-wrap">
                                        <table class="agent-rules-table mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Sales Employee</th>
                                                    <th>Job Title</th>
                                                    <th class="text-end" style="width: 220px;">Percentage</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($staffOptions as $member)
                                                    @php
                                                        $memberId = $member['id'];
                                                        $percentage = old(
                                                            "percentage_rules.$memberId.percentage",
                                                            $savedRulePercentages->get($memberId)
                                                        );
                                                        $initials = collect(explode(' ', trim($member['name'])))
                                                            ->filter()
                                                            ->take(2)
                                                            ->map(fn ($part) => mb_substr($part, 0, 1))
                                                            ->implode('');
                                                    @endphp

                                                    <tr>
                                                        <td>
                                                            <input
                                                                type="hidden"
                                                                name="percentage_rules[{{ $memberId }}][staff_id]"
                                                                value="{{ $memberId }}">

                                                            <div class="agent-profile">
                                                                <span class="agent-profile__avatar">{{ strtoupper($initials ?: 'A') }}</span>
                                                                <div>
                                                                    <p class="agent-profile__name">{{ $member['name'] }}</p>
                                                                    <div class="agent-profile__id">Staff #{{ $memberId }}</div>
                                                                </div>
                                                            </div>

                                                            @error("percentage_rules.$memberId.staff_id")
                                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                                            @enderror
                                                        </td>
                                                        <td>
                                                            <span class="agent-job-badge">{{ $member['job_title'] }}</span>
                                                        </td>
                                                        <td>
                                                            <div class="agent-percent-control ms-auto">
                                                                <input
                                                                    type="number"
                                                                    step="0.01"
                                                                    min="0.01"
                                                                    max="100"
                                                                    name="percentage_rules[{{ $memberId }}][percentage]"
                                                                    value="{{ $percentage }}"
                                                                    class="asset-input @error("percentage_rules.$memberId.percentage") asset-invalid @enderror"
                                                                    placeholder="0"
                                                                    data-percentage-input>
                                                                <span class="agent-percent-control__symbol">%</span>
                                                            </div>

                                                            @error("percentage_rules.$memberId.percentage")
                                                                <div class="invalid-feedback d-block text-end">{{ $message }}</div>
                                                            @enderror
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3">
                                                            <div class="agent-rules-empty">
                                                                <div class="lead-distribution-note">
                                                                    No active agent staff found.
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div id="manual-section" class="lead-distribution-section">
                                <div class="lead-distribution-note">
                                    In manual mode, leads will remain unassigned until an Admin or Moderator assigns them manually.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="lead-distribution-actions">
                        <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            Save Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const methodSelect = document.getElementById('distribution_method');
            const capacitySection = document.getElementById('capacity-section');
            const percentageSection = document.getElementById('percentage-section');
            const manualSection = document.getElementById('manual-section');
            const capacityCurrentItems = document.querySelectorAll('.capacity-current-item');
            const percentageInputs = document.querySelectorAll('[data-percentage-input]');
            const percentageTotal = document.getElementById('percentage-total');

            function updatePercentageTotal() {
                if (!percentageTotal) {
                    return;
                }

                const total = Array.from(percentageInputs).reduce(function (sum, input) {
                    return sum + (parseFloat(input.value) || 0);
                }, 0);

                percentageTotal.textContent = Number.isInteger(total) ? total : total.toFixed(2);
            }

            function toggleSections() {
                const method = methodSelect.value;
                const usesCapacity = method === 'automatic' || method === 'percentage';
                capacitySection.style.display = usesCapacity ? '' : 'none';
                percentageSection.style.display = method === 'percentage' ? '' : 'none';
                manualSection.style.display = method === 'manual' ? '' : 'none';
                capacityCurrentItems.forEach(function (item) {
                    item.style.display = usesCapacity ? '' : 'none';
                });
            }

            percentageInputs.forEach(function (input) {
                input.addEventListener('input', updatePercentageTotal);
            });

            methodSelect.addEventListener('change', toggleSections);
            toggleSections();
            updatePercentageTotal();
        });
    </script>
@endsection