@php
    $workflow = $workflow ?? [];
    $items = $workflow['items'] ?? [];
    $actions = $workflow['actions'] ?? [];
    $currentStage = $workflow['current_stage'] ?? null;
@endphp

<div class="applicant-workflow" data-update-url="{{ url('/applicants/' . $applicant->id) }}">
    <div class="applicant-workflow__head">
        <div>
            <div class="fw-bold">Hiring Workflow</div>
            <div class="text-muted small">Current Status: {{ $generatedCurrentStatus ?? 'New Applicant' }}</div>
        </div>
        @if($workflow['is_rejected'] ?? false)
            <span class="workflow-pill workflow-pill--rejected">Rejected</span>
        @elseif($workflow['is_hired'] ?? false)
            <span class="workflow-pill workflow-pill--completed">Hired</span>
        @else
            <span class="workflow-pill workflow-pill--current">{{ $workflow['current_label'] ?? 'Current Stage' }}</span>
        @endif
    </div>

    <div class="workflow-timeline">
        @foreach($items as $item)
            <div class="workflow-step workflow-step--{{ $item['state'] }}">
                <div class="workflow-step__marker">
                    @if($item['state'] === 'completed')
                        <i class="ri-check-line"></i>
                    @elseif($item['state'] === 'rejected')
                        <i class="ri-close-line"></i>
                    @elseif($item['state'] === 'locked')
                        <i class="ri-lock-line"></i>
                    @else
                        <i class="ri-time-line"></i>
                    @endif
                </div>
                <div class="workflow-step__body">
                    <div class="workflow-step__title">{{ $item['label'] }}</div>
                    <div class="workflow-step__owner">{{ $item['owner'] ?? '-' }}</div>
                    <div class="workflow-step__summary">{{ $item['summary'] }}</div>
                </div>
            </div>
        @endforeach
    </div>

    @if(!$canUpdateStatuses)
        <div class="alert alert-warning border-0 mt-3 mb-0">
            You can view this workflow, but only the assigned employee can update it.
        </div>
    @elseif(count($actions) > 0)
        <div class="workflow-actions mt-3">
            <div class="workflow-actions__title">Available Action</div>
            <div class="d-flex flex-wrap gap-2">
                @foreach($actions as $action)
                    @php
                        $isScheduleAction = in_array($action['action'], ['open_demo_schedule', 'open_stage_schedule'], true);
                        $canRunAction = !$isScheduleAction || ($canScheduleWorkflow ?? false);
                    @endphp
                    <button type="button"
                        class="btn btn-sm btn-{{ $action['variant'] }} workflow-action"
                        data-action="{{ $action['action'] }}"
                        data-stage="{{ $currentStage }}"
                        data-value="{{ $action['value'] }}"
                        @disabled(!$canRunAction)>
                        {{ $action['label'] }}
                    </button>
                @endforeach
            </div>
        </div>
        <div class="mt-3 workflow-notes" style="display: none;">
            <label class="form-label fw-bold mb-2">Notes</label>
            <textarea class="form-control workflow-notes__input" rows="3">{{ $applicant->notes }}</textarea>
            <div class="d-flex gap-2 mt-2">
                <button type="button" class="btn btn-sm btn-danger workflow-notes__submit">Submit Rejection</button>
                <button type="button" class="btn btn-sm btn-outline-secondary workflow-notes__cancel">Cancel</button>
            </div>
        </div>
    @endif
</div>

<style>
    .applicant-workflow {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        background: #fff;
    }

    .applicant-workflow__head {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .workflow-pill {
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 10px;
    }

    .workflow-pill--completed {
        background: #dcfce7;
        color: #166534;
    }

    .workflow-pill--current {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .workflow-pill--rejected {
        background: #fee2e2;
        color: #b91c1c;
    }

    .workflow-timeline {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .workflow-step {
        align-items: flex-start;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        display: flex;
        gap: 10px;
        min-height: 86px;
        padding: 12px;
    }

    .workflow-step__marker {
        align-items: center;
        border-radius: 50%;
        display: flex;
        flex: 0 0 30px;
        height: 30px;
        justify-content: center;
        width: 30px;
    }

    .workflow-step__title {
        font-weight: 700;
        line-height: 1.2;
    }

    .workflow-step__summary {
        color: #6b7280;
        font-size: 0.85rem;
        margin-top: 4px;
    }

    .workflow-step__owner {
        color: #374151;
        font-size: 0.78rem;
        font-weight: 700;
        margin-top: 4px;
    }

    .workflow-step--completed {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .workflow-step--completed .workflow-step__marker {
        background: #16a34a;
        color: #fff;
    }

    .workflow-step--current {
        background: #eff6ff;
        border-color: #93c5fd;
    }

    .workflow-step--current .workflow-step__marker {
        background: #2563eb;
        color: #fff;
    }

    .workflow-step--locked {
        background: #f9fafb;
        color: #6b7280;
    }

    .workflow-step--locked .workflow-step__marker {
        background: #e5e7eb;
        color: #4b5563;
    }

    .workflow-step--rejected {
        background: #fef2f2;
        border-color: #fecaca;
    }

    .workflow-step--rejected .workflow-step__marker {
        background: #dc2626;
        color: #fff;
    }

    .workflow-actions__title {
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 700;
        margin-bottom: 8px;
    }
</style>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const workflow = document.querySelector('.applicant-workflow');
            if (!workflow) return;

            const updateUrl = workflow.dataset.updateUrl;
            let pendingReject = null;

            workflow.querySelectorAll('.workflow-action').forEach(button => {
                button.addEventListener('click', () => {
                    const payload = {
                        workflow_action: button.dataset.action,
                        workflow_stage: button.dataset.stage,
                        workflow_value: button.dataset.value || '',
                    };

                    if (payload.workflow_action === 'open_demo_schedule') {
                        window.openDemoSchedule?.();
                        return;
                    }

                    if (payload.workflow_action === 'open_stage_schedule') {
                        window.openStageSchedule?.(payload.workflow_value);
                        return;
                    }

                    if (payload.workflow_action === 'reject') {
                        pendingReject = payload;
                        workflow.querySelector('.workflow-notes').style.display = 'block';
                        return;
                    }

                    sendWorkflowAction(payload);
                });
            });

            const notesBox = workflow.querySelector('.workflow-notes');
            if (notesBox) {
                notesBox.querySelector('.workflow-notes__submit').addEventListener('click', () => {
                    if (!pendingReject) return;
                    pendingReject.notes = notesBox.querySelector('.workflow-notes__input').value;
                    sendWorkflowAction(pendingReject);
                });

                notesBox.querySelector('.workflow-notes__cancel').addEventListener('click', () => {
                    pendingReject = null;
                    notesBox.style.display = 'none';
                });
            }

            function sendWorkflowAction(payload) {
                const formData = new FormData();
                Object.entries(payload).forEach(([key, value]) => formData.append(key, value ?? ''));
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('_method', 'PUT');

                workflow.querySelectorAll('button').forEach(button => button.disabled = true);

                $.ajax({
                    url: updateUrl,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    success: function (res) {
                        if (res.success) {
                            location.reload();
                        } else {
                            toastr.error(res.message || 'Workflow update failed');
                            workflow.querySelectorAll('button').forEach(button => button.disabled = false);
                        }
                    },
                    error: function (xhr) {
                        const message = xhr.responseJSON?.message || 'Workflow update failed';
                        toastr.error(message);
                        workflow.querySelectorAll('button').forEach(button => button.disabled = false);
                    }
                });
            }
        });
    </script>
@endpush