@props(['currentSection', 'currentSiri', 'currentRoadMap', 'topSections', 'siriSections', 'roadMapSections'])

<div class="mb-8" x-data="{
    getAllSteps() {
            let steps = [];

            // Add only main sections
            {{ $topSections }}.forEach((section, index) => {
                steps.push({
                    id: section.id + 1, // Start from 1 instead of 0
                    sectionId: section.id,
                    name: this.getSectionName(section.id),
                    isActive: {{ $currentSection }} === section.id,
                    isCompleted: {{ $currentSection }} > section.id,
                    hasSubSteps: section.id === 1 || section.id === 3, // SIRI and RoadMap have sub-steps
                    subProgress: this.getSubProgress(section.id)
                });
            });

            return steps;
        },

        getSubProgress(sectionId) {
            if (sectionId === 1 && {{ $currentSection }} === 1) {
                // SIRI progress
                return ({{ $currentSiri }} + 1) / {{ $siriSections }}.length;
            }
            if (sectionId === 3 && {{ $currentSection }} === 3) {
                // RoadMap progress  
                return ({{ $currentRoadMap }} + 1) / {{ $roadMapSections }}.length;
            }
            return {{ $currentSection }} > sectionId ? 1 : 0;
        },

        getSectionName(sectionId) {
            const sectionNames = {
                0: '{{ trans('siri.company_information') }}',
                1: '{{ trans('siri.siri_dimension') }}',
                2: '{{ trans('siri.digital_tools') }}',
                3: '{{ trans('siri.roadMap') }}',
                4: '{{ trans('siri.departmental_needs') }}'
            };

            return sectionNames[sectionId] || 'Unknown';
        },

        // Clean implementation without percentage calculation
}">
    <!-- Progress Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h3 class="text-lg font-semibold text-gray-800">{{ trans('siri.progress') }}</h3>
            <p class="text-sm text-gray-600"
                x-text="`Step ${getAllSteps().findIndex(s => s.isActive) + 1} of ${getAllSteps().length}`"></p>
        </div>
        <div class="text-right">
            <div class="text-sm text-gray-500">{{ trans('siri.progress_status') }}</div>
        </div>
    </div>

    <!-- Step Progress Bar -->
    <div class="relative">
        <!-- Progress Line (Gray Only) -->
        <div class="absolute top-5 left-0 w-full h-0.5 bg-gray-200 rounded-full"></div>

        <!-- Step Bubbles -->
        <div class="step-container relative flex items-start pt-1 transition-all duration-700 ease-out">
            <template x-for="(step, index) in getAllSteps()" :key="step.id">
                <div class="flex flex-col items-center group transition-all duration-700 ease-out"
                    :class="{
                        'flex-grow-0': !step.isActive,
                        'flex-grow': step.isActive
                    }"
                    :style="`
                                                                                                        margin-right: ${index < getAllSteps().length - 1 ? (step.isActive ? '60px' : '8px') : '0px'};
                                                                                                        transform: translateX(${step.isActive ? '0px' : (index > getAllSteps().findIndex(s => s.isActive) ? '-20px' : '0px')});
                                                                                                        z-index: ${step.isActive ? '20' : '10'};
                                                                                                    `">
                    <!-- Step Circle -->
                    <div data-step-circle
                        class="relative rounded-full border-2 transition-all duration-700 ease-out transform hover:scale-110 cursor-pointer"
                        :style="`margin-top: ${step.isActive ? '0px' : '1px'}`"
                        :class="{
                            'w-10 h-10 shadow-2xl scale-110': step.isActive,
                            'w-8 h-8 shadow-lg': !step.isActive,
                            'bg-gradient-to-r from-blue-500 to-indigo-600 border-blue-500 text-white': step.isCompleted,
                            'bg-blue-500 border-blue-500 text-white ring-4 ring-blue-200 ring-opacity-50': step
                                .isActive,
                            'bg-white border-gray-300 text-gray-500 hover:border-gray-400': !step.isCompleted && !step
                                .isActive
                        }"
                        x-transition:enter="transition ease-out duration-500"
                        x-transition:enter-start="opacity-0 scale-0 rotate-180"
                        x-transition:enter-end="opacity-100 scale-100 rotate-0" "
                    >
                        <!-- Sub-progress circle for active sections with sub-steps -->
                        <template x-if="step.isActive && step.hasSubSteps">
                            <div class="absolute inset-0.5 rounded-full overflow-hidden">
                                <div
                                    class="absolute inset-0 bg-blue-300 rounded-full"
                                    :style="`clip-path: polygon(50% 50%, 50% 0%, ${50 + 50 * Math.cos(2 * Math.PI * step.subProgress - Math.PI/2)}% ${50 + 50 * Math.sin(2 * Math.PI * step.subProgress - Math.PI/2)}%, 50% 50%)`"
                                ></div>
                            </div>
                        </template>
                        
                        <!-- Step Number or Checkmark -->
                        <div class="absolute inset-0 flex items-center justify-center z-10">
                            <template x-if="step.isCompleted">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d=" M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414
                        0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd">
                        </path>
                        </svg>
            </template>
            <template x-if="!step.isCompleted">
                <span class="text-sm font-semibold" x-text="step.id"></span>
            </template>
        </div>

        <!-- Pulse Animation for Active Step -->
        <template x-if="step.isActive">
            <div class="absolute inset-0 rounded-full bg-blue-500 animate-ping opacity-25"></div>
        </template>
    </div>

    <!-- Step Label -->
    <div class="mt-3 text-center transition-all duration-700 ease-out"
        :class="{
            'text-blue-600 font-semibold transform scale-110': step.isActive,
            'text-gray-600 font-medium': step.isCompleted,
            'text-gray-400 text-xs': !step.isCompleted && !step.isActive
        }"
        :style="`
                                                            opacity: ${step.isActive ? '1' : '0.8'};
                                                            transform: translateY(${step.isActive ? '-2px' : '0px'}) scale(${step.isActive ? '1.1' : '1'});
                                                        `">
        <div class="leading-tight transition-all duration-700 ease-out"
            :class="{
                'text-sm max-w-24': step.isActive,
                'text-xs max-w-20': !step.isActive
            }"
            x-text="step.name"></div>

        <!-- Active Step Indicator -->
        <template x-if="step.isActive">
            <div class="mt-1 flex justify-center">
                <div class="w-6 h-0.5 bg-blue-500 rounded-full animate-pulse"></div>
            </div>
        </template>
    </div>

    <!-- Enhanced Tooltip on Hover -->
    <div
        class="absolute -top-20 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-30">
        <div class="bg-gray-900 text-white text-xs rounded-lg py-3 px-4 whitespace-nowrap shadow-2xl">
            <div class="font-semibold" x-text="step.name"></div>
            <template x-if="step.isActive && step.hasSubSteps">
                <div class="text-blue-300 mt-1 text-xs" x-text="`${Math.round(step.subProgress * 100)}% completed`">
                </div>
            </template>
            <template x-if="step.isActive && !step.hasSubSteps">
                <div class="text-green-300 mt-1 text-xs">{{ trans('siri.in_progress') }}</div>
            </template>
            <template x-if="step.isCompleted">
                <div class="text-green-300 mt-1 text-xs">{{ trans('siri.completed') }}</div>
            </template>
            <div
                class="absolute top-full left-1/2 transform -translate-x-1/2 border-6 border-transparent border-t-gray-900">
            </div>
        </div>
    </div>
</div>
</template>
</div>
</div>

<!-- Current Step Info -->
<div class="mt-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-100">
    <div class="flex items-center space-x-3">
        <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
        <div>
            <span class="text-sm font-medium text-blue-800">{{ trans('siri.current_step') }}: </span>
            <span class="text-sm text-blue-700"
                x-text="getAllSteps().find(s => s.isActive)?.name || '{{ trans('siri.completed') }}'"></span>
        </div>
    </div>
</div>
</div>