@php
    $recentList = collect($recentActivities ?? []);
    $recentCount = $recentList->count();

    $activityTypeSelectOptions = [['value' => '', 'label' => 'Select type…']];
    foreach (($activityTypes ?? []) as $type) {
        $displayName = $type->code === 'online_ads_posted' ? 'Online Ad' : $type->name;
        $activityTypeSelectOptions[] = [
            'value' => (string) $type->id,
            'label' => $displayName.' ('.(int) $type->default_points.' pts)',
        ];
    }
    $leadSelectOptions = [['value' => '', 'label' => 'Select lead…']];
    foreach (($leads ?? []) as $lead) {
        $leadLabel = $lead->displayName();
        $leadLabel = $leadLabel === '—' ? 'Lead' : $leadLabel;
        $leadSelectOptions[] = [
            'value' => (string) $lead->id,
            'label' => '#'.$lead->id.' — '.$leadLabel,
        ];
    }
    $prospectSelectOptions = [['value' => '', 'label' => 'Select prospect…']];
    foreach (($prospects ?? []) as $prospect) {
        $prospectLabel = $prospect->displayNameForTable();
        $prospectLabel = $prospectLabel === '—' ? 'Prospect' : $prospectLabel;
        $prospectSelectOptions[] = [
            'value' => (string) $prospect->id,
            'label' => '#'.$prospect->id.' — '.$prospectLabel,
        ];
    }

    $fieldLabelClass = 'block text-[11px] font-medium leading-none text-gray-600';
    $textInputClass = 'mt-1 block w-full min-w-0 rounded-md border-gray-300 text-sm shadow-sm focus:border-red-500 focus:ring-red-500';
    $controlHeightClass = 'h-9';
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('Sales Activity Logging') }}
    </x-slot>

    <div class="space-y-4 py-6 px-3 sm:px-4 md:px-5">
        <x-flash-messages />

        <div class="overflow-visible rounded-xl border border-gray-200 bg-white shadow-sm p-4 space-y-3">
            <form method="POST" action="{{ route('sales-activities.store') }}" class="space-y-3" enctype="multipart/form-data">
                @csrf

                <div class="space-y-3">
                    <div class="grid grid-cols-1 gap-x-5 gap-y-3 sm:grid-cols-3">
                        <div class="min-w-0">
                            <label for="activity_type_id" class="{{ $fieldLabelClass }}">Activity type</label>
                            <div class="relative mt-1 {{ $controlHeightClass }} w-full">
                                <x-styled-select
                                    name="activity_type_id"
                                    id="activity_type_id"
                                    :selected="(string) old('activity_type_id', '')"
                                    :options="$activityTypeSelectOptions"
                                    required
                                    class="block h-full w-full min-w-0 [&>button]:h-full [&>button]:min-h-0"
                                />
                            </div>
                        </div>

                        <div id="activity_date_wrap" class="min-w-0">
                            <label for="activity_date" class="{{ $fieldLabelClass }}">Activity date</label>
                            <input
                                id="activity_date"
                                name="activity_date"
                                type="date"
                                value="{{ old('activity_date', now()->toDateString()) }}"
                                max="{{ now()->timezone(config('app.timezone'))->toDateString() }}"
                                class="{{ $textInputClass }} {{ $controlHeightClass }} py-0"
                                required
                            />
                        </div>

                        <div id="display_start_date_wrap" class="hidden min-w-0">
                            <label for="display_start_date" class="{{ $fieldLabelClass }}">Start date</label>
                            <input
                                id="display_start_date"
                                name="display_start_date"
                                type="date"
                                value="{{ old('display_start_date', now()->toDateString()) }}"
                                max="{{ now()->timezone(config('app.timezone'))->toDateString() }}"
                                class="{{ $textInputClass }} {{ $controlHeightClass }} py-0"
                            />
                        </div>

                        <div id="display_end_date_wrap" class="hidden min-w-0">
                            <label for="display_end_date" class="{{ $fieldLabelClass }}">End date (optional)</label>
                            <input
                                id="display_end_date"
                                name="display_end_date"
                                type="date"
                                value="{{ old('display_end_date') }}"
                                max="{{ now()->timezone(config('app.timezone'))->toDateString() }}"
                                class="{{ $textInputClass }} {{ $controlHeightClass }} py-0"
                            />
                        </div>

                        <div id="lead_field_wrap" class="min-w-0">
                            <label id="lead_field_label" for="lead_id" class="{{ $fieldLabelClass }}">Lead</label>
                            <div class="relative mt-1 {{ $controlHeightClass }} w-full">
                                <x-styled-select
                                    name="lead_id"
                                    id="lead_id"
                                    :selected="(string) old('lead_id', '')"
                                    :options="$leadSelectOptions"
                                    class="block h-full w-full min-w-0 [&>button]:h-full [&>button]:min-h-0"
                                />
                            </div>
                        </div>
                    </div>

                    <div class="min-w-0">
                        <label for="description" class="{{ $fieldLabelClass }}">Description</label>
                        <input
                            id="description"
                            name="description"
                            type="text"
                            class="{{ $textInputClass }} {{ $controlHeightClass }} py-0"
                            placeholder="What happened"
                            required
                            value="{{ old('description') }}"
                        />
                    </div>
                </div>

                <div>
                    <label for="notes" class="{{ $fieldLabelClass }}">Notes (optional)</label>
                    <textarea
                        id="notes"
                        name="notes"
                        rows="2"
                        class="{{ $textInputClass }}"
                        placeholder="Additional context…"
                    >{{ old('notes') }}</textarea>
                </div>

                <div id="evidence_fields" class="hidden space-y-3">
                    <div id="evidence_url_field" class="max-w-xl">
                        <label id="evidence_url_label" for="proof_url" class="{{ $fieldLabelClass }}">Evidence URL (optional)</label>
                        <input
                            id="proof_url"
                            name="proof_url"
                            type="url"
                            value="{{ old('proof_url') }}"
                            class="{{ $textInputClass }}"
                            placeholder="Paste a link"
                        />
                    </div>

                    <x-multi-file-upload
                        id="proof_files"
                        label="Photo / file evidence"
                        class="max-w-2xl"
                    />
                </div>

                <p id="call_duration_hint" class="hidden rounded-md border border-amber-200 bg-amber-50 px-2.5 py-1.5 text-[11px] leading-snug text-gray-700">
                    Calls must be at least <span class="font-medium">1 minute</span> to earn points. Shorter calls are declined.
                </p>

                <div id="time_fields" class="hidden grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <label id="start_time_label" for="start_time" class="{{ $fieldLabelClass }}">Start time (optional)</label>
                        <input
                            id="start_time"
                            name="start_time"
                            type="time"
                            value="{{ old('start_time') }}"
                            class="{{ $textInputClass }} {{ $controlHeightClass }} py-0"
                        />
                    </div>

                    <div>
                        <label for="end_time" class="{{ $fieldLabelClass }}">End time (optional)</label>
                        <input
                            id="end_time"
                            name="end_time"
                            type="time"
                            value="{{ old('end_time') }}"
                            class="{{ $textInputClass }} {{ $controlHeightClass }} py-0"
                        />
                    </div>
                </div>

                <div class="flex items-center justify-end border-t border-gray-100 pt-2">
                    <button
                        type="submit"
                        class="inline-flex h-9 shrink-0 items-center rounded-md bg-[var(--dealer-accent-color)] px-4 text-sm font-semibold text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95 focus:outline-none focus:ring-1 focus:ring-[var(--dealer-accent-color)]"
                    >
                        Log activity
                    </button>
                </div>
            </form>
        </div>

        <div class="overflow-visible rounded-xl border border-gray-200 bg-white shadow-sm p-4 space-y-3">
            <div class="flex flex-wrap items-baseline justify-between gap-2">
                <h2 class="text-sm font-semibold text-gray-900">Recent activity</h2>
                <p class="text-[10px] text-gray-500">Last {{ number_format($recentCount) }} entries</p>
            </div>

            <div class="relative z-0 overflow-x-auto">
                <table class="w-full table-fixed divide-y divide-gray-200 text-[11px] leading-tight">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Date</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">User</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Activity type</th>
                            <th class="px-1.5 py-1.5 text-right font-semibold text-gray-700">Points</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Lead</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Description</th>
                            <th class="px-1.5 py-1.5 text-left font-semibold text-gray-700">Notes</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse ($recentList as $activity)
                            @php
                                $userName = trim(($activity->user?->name ?? '').' '.($activity->user?->surname ?? ''));
                                $leadLabel = $activity->lead ? $activity->lead->displayName() : '';
                                $leadLabel = ($leadLabel === '' || $leadLabel === '—') ? 'Lead' : $leadLabel;
                                $activityTypeLabel = $activity->activityType?->code === 'online_ads_posted'
                                    ? 'Online Ad'
                                    : ($activity->activityType?->name ?? '—');
                                $hasStoredDescription = $activity->description !== null && trim((string) $activity->description) !== '';
                                $descriptionCell = $hasStoredDescription
                                    ? trim((string) $activity->description)
                                    : trim((string) ($activity->notes ?? ''));
                                $notesCell = $hasStoredDescription ? trim((string) ($activity->notes ?? '')) : '';
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-gray-900">
                                    {{ optional($activity->activity_date)->format('Y-m-d') ?? $activity->activity_date }}
                                </td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-gray-700">{{ $userName !== '' ? $userName : '—' }}</td>
                                <td class="px-1.5 py-1.5 text-gray-700">{{ $activityTypeLabel }}</td>
                                <td class="px-1.5 py-1.5 whitespace-nowrap text-right">
                                    <div class="{{ $activity->pointsDisplayClass() }}">{{ (int) $activity->points }}</div>
                                    @if ($activity->pointsStatusLabel() !== '')
                                        <div class="mt-0.5 text-[10px] font-normal normal-case leading-tight {{ $activity->pointsSubtextColorClass() }}">
                                            {{ $activity->pointsStatusLabel() }}
                                        </div>
                                    @endif
                                </td>
                                <td class="px-1.5 py-1.5 text-gray-700">
                                    @if ($activity->lead_id)
                                        <span class="whitespace-nowrap">#{{ $activity->lead_id }}</span>
                                        <span class="text-gray-500">—</span>
                                        <span>{{ $leadLabel }}</span>
                                    @else
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="px-1.5 py-1.5 max-w-[240px] text-gray-700">
                                    <div class="truncate" title="{{ $descriptionCell }}">
                                        {{ $descriptionCell !== '' ? $descriptionCell : '—' }}
                                    </div>
                                </td>
                                <td class="px-1.5 py-1.5 max-w-[240px] text-gray-700">
                                    @if ($hasStoredDescription)
                                        <div class="truncate" title="{{ $notesCell }}">{{ $notesCell }}</div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-2 py-4 text-center text-gray-500">
                                    No activities logged yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>

<script>
    (function () {
        const REQUIRED_CODES = new Set(['online_ads_posted', 'outdoor_display', 'prospecting']);

        const activityTypeById = @json(collect($activityTypes ?? [])->mapWithKeys(fn ($t) => [(string) $t->id => $t->code])->all());
        const activityTypeSelect = document.getElementById('activity_type_id_input');
        const evidenceFields = document.getElementById('evidence_fields');
        const evidenceUrlLabel = document.getElementById('evidence_url_label');
        const evidenceUrlField = document.getElementById('evidence_url_field');
        const LEAD_HIDDEN_CODES = new Set(['online_ads_posted', 'outdoor_display']);
        const leadOptionsByMode = {
            lead: @json($leadSelectOptions),
            prospect: @json($prospectSelectOptions),
        };
        const TIME_CODES = new Set(['outdoor_display', 'prospecting', 'calls']);
        const timeFields = document.getElementById('time_fields');
        const callDurationHint = document.getElementById('call_duration_hint');
        const leadFieldWrap = document.getElementById('lead_field_wrap');
        const leadFieldLabel = document.getElementById('lead_field_label');
        const leadSelectInput = document.getElementById('lead_id_input');
        const activityDateWrap = document.getElementById('activity_date_wrap');
        const displayStartDateWrap = document.getElementById('display_start_date_wrap');
        const displayEndDateWrap = document.getElementById('display_end_date_wrap');
        const activityDateInput = document.getElementById('activity_date');
        const displayStartDateInput = document.getElementById('display_start_date');
        const displayEndDateInput = document.getElementById('display_end_date');
        const startTimeLabel = document.getElementById('start_time_label');
        const endTimeLabel = document.querySelector('label[for="end_time"]');

        function styledSelectRoot(inputId) {
            const input = document.getElementById(inputId);
            if (!input) {
                return null;
            }
            const parent = input.parentElement;
            if (parent && parent.hasAttribute('x-data')) {
                return parent;
            }

            return input.closest('[x-data]');
        }

        function getStyledSelectComponent(inputId) {
            const root = styledSelectRoot(inputId);
            if (!root || typeof window.Alpine === 'undefined') {
                return null;
            }
            if (typeof Alpine.$data === 'function') {
                return Alpine.$data(root);
            }
            if (root._x_dataStack && root._x_dataStack.length) {
                return root._x_dataStack[root._x_dataStack.length - 1];
            }

            return null;
        }

        function setStyledSelectValue(inputId, value) {
            const input = document.getElementById(inputId);
            if (!input) {
                return;
            }
            const strValue = value == null ? '' : String(value);
            input.dispatchEvent(new CustomEvent('styled-select:set', { detail: strValue }));
            const component = getStyledSelectComponent(inputId);
            if (component && typeof component.setValue === 'function') {
                component.setValue(strValue);

                return;
            }
            if (component && Object.prototype.hasOwnProperty.call(component, 'selected')) {
                component.selected = strValue;
                if (typeof component.close === 'function') {
                    component.close();
                }
            }
            input.value = strValue;
            input.dispatchEvent(new Event('input', { bubbles: true }));
            input.dispatchEvent(new Event('change', { bubbles: true }));
        }

        function setLeadSelectOptions(options) {
            const input = document.getElementById('lead_id_input');
            if (!input) {
                return;
            }

            const component = getStyledSelectComponent('lead_id_input');
            if (component && typeof component.setOptions === 'function') {
                component.setOptions(options);

                return;
            }

            input.dispatchEvent(new CustomEvent('styled-select:set-options', {
                detail: options,
            }));
        }

        function selectedCode() {
            const id = activityTypeSelect?.value ?? '';
            return activityTypeById[id] || '';
        }

        function applyProofUX() {
            const code = selectedCode();
            const showEvidence = REQUIRED_CODES.has(code);
            if (!evidenceFields) return;

            if (showEvidence) {
                evidenceFields.classList.remove('hidden');
            } else {
                evidenceFields.classList.add('hidden');
            }

            if (evidenceUrlField) {
                if (code === 'online_ads_posted') {
                    evidenceUrlField.classList.remove('hidden');
                } else {
                    evidenceUrlField.classList.add('hidden');
                }
            }

            if (evidenceUrlLabel) {
                evidenceUrlLabel.textContent = code === 'online_ads_posted'
                    ? 'Evidence URL (optional)'
                    : 'Evidence URL (optional)';
            }
        }

        function applyDateUX() {
            const code = selectedCode();
            const isOutdoor = code === 'outdoor_display';

            if (activityDateWrap) {
                activityDateWrap.classList.toggle('hidden', isOutdoor);
            }
            if (displayStartDateWrap) {
                displayStartDateWrap.classList.toggle('hidden', !isOutdoor);
            }
            if (displayEndDateWrap) {
                displayEndDateWrap.classList.toggle('hidden', !isOutdoor);
            }

            if (activityDateInput) {
                if (isOutdoor) {
                    activityDateInput.removeAttribute('required');
                } else {
                    activityDateInput.setAttribute('required', 'required');
                }
            }

            if (displayStartDateInput) {
                if (isOutdoor) {
                    displayStartDateInput.setAttribute('required', 'required');
                } else {
                    displayStartDateInput.removeAttribute('required');
                }
            }

            if (displayEndDateInput) {
                displayEndDateInput.removeAttribute('required');
            }
        }

        function applyLeadUX() {
            const code = selectedCode();
            if (!leadFieldWrap || !leadSelectInput) {
                return;
            }

            if (LEAD_HIDDEN_CODES.has(code)) {
                leadFieldWrap.classList.add('hidden');
                leadSelectInput.removeAttribute('required');
                setStyledSelectValue('lead_id_input', '');

                return;
            }

            leadFieldWrap.classList.remove('hidden');

            if (code === 'prospecting') {
                if (leadFieldLabel) {
                    leadFieldLabel.textContent = 'Prospect (optional)';
                }
                setLeadSelectOptions(leadOptionsByMode.prospect);
                leadSelectInput.removeAttribute('required');
            } else {
                if (leadFieldLabel) {
                    leadFieldLabel.textContent = 'Lead';
                }
                setLeadSelectOptions(leadOptionsByMode.lead);
                leadSelectInput.setAttribute('required', 'required');
            }
        }

        function applyTimeUX() {
            const code = selectedCode();
            const showTime = TIME_CODES.has(code);
            if (!timeFields) return;
            if (showTime) {
                timeFields.classList.remove('hidden');
            } else {
                timeFields.classList.add('hidden');
            }

            if (callDurationHint) {
                if (code === 'calls') {
                    callDurationHint.classList.remove('hidden');
                } else {
                    callDurationHint.classList.add('hidden');
                }
            }

            if (code === 'outdoor_display') {
                if (startTimeLabel) startTimeLabel.textContent = 'Start time on start date (required)';
                if (endTimeLabel) endTimeLabel.textContent = 'End time on end date (optional)';
            } else if (code === 'prospecting') {
                if (startTimeLabel) startTimeLabel.textContent = 'Start time (optional)';
                if (endTimeLabel) endTimeLabel.textContent = 'End time (optional)';
            } else if (code === 'calls') {
                if (startTimeLabel) startTimeLabel.textContent = 'Start time (required)';
                if (endTimeLabel) endTimeLabel.textContent = 'End time (required)';
            } else {
                if (startTimeLabel) startTimeLabel.textContent = 'Start time (optional)';
                if (endTimeLabel) endTimeLabel.textContent = 'End time (optional)';
            }
        }

        function onActivityTypeChange() {
            applyProofUX();
            applyDateUX();
            applyTimeUX();
            applyLeadUX();
        }

        if (activityTypeSelect) {
            activityTypeSelect.addEventListener('change', onActivityTypeChange);
            activityTypeSelect.addEventListener('styled-select:set', onActivityTypeChange);
        }

        applyProofUX();
        applyDateUX();
        applyTimeUX();
        applyLeadUX();
    })();
</script>