/**
 * Wizard Step List
 * 
 * An expandable list of all wizard steps.
 * Uses inline styles for layout to avoid WP admin CSS overrides.
 * 
 * @package BoostBot
 */

import { Check, AlertTriangle } from 'lucide-react'
import type { WizardStep } from './wizardSteps'
import { t } from '@/lib/i18n'

interface WizardStepListProps {
  steps: WizardStep[]
  currentStepIndex: number
  progress: Record<string, boolean>
  onStepClick: (index: number) => void
}

export function WizardStepList({ steps, currentStepIndex, progress, onStepClick }: WizardStepListProps) {
  return (
    <div
      style={{
        maxHeight: '45vh',
        overflowY: 'auto',
        overflowX: 'hidden',
        padding: '6px 8px',
      }}
    >
      {steps.map((step, index) => {
        const isCompleted = progress[step.id] === true
        const isCurrent = index === currentStepIndex

        return (
          <button
            key={step.id}
            onClick={() => onStepClick(index)}
            style={{
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
              padding: '8px 10px',
              textAlign: 'start',
              borderRadius: '8px',
              fontSize: '14px',
              border: 'none',
              cursor: 'pointer',
              backgroundColor: isCurrent ? 'rgba(59,194,208,0.08)' : 'transparent',
              color: isCurrent ? '#3BC2D0' : isCompleted ? '#9CA3AF' : '#374151',
              fontWeight: isCurrent ? 500 : 400,
              transition: 'background-color 0.15s',
            }}
            onMouseEnter={(e) => {
              if (!isCurrent) e.currentTarget.style.backgroundColor = '#F9FAFB'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = isCurrent ? 'rgba(59,194,208,0.08)' : 'transparent'
            }}
            type="button"
          >
            {/* Step number / completion indicator */}
            <div
              style={{
                flexShrink: 0,
                width: '28px',
                height: '28px',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '12px',
                fontWeight: 700,
                ...(isCompleted
                  ? { backgroundColor: '#F0FDF4', color: '#22C55E' }
                  : isCurrent
                    ? { background: 'linear-gradient(135deg, #3BC2D0, #2BA8B5)', color: '#fff', boxShadow: '0 1px 2px rgba(0,0,0,0.1)' }
                    : { backgroundColor: '#F3F4F6', color: '#9CA3AF' }
                ),
              }}
            >
              {isCompleted ? (
                <Check style={{ width: '16px', height: '16px' }} />
              ) : (
                index + 1
              )}
            </div>

            {/* Step name */}
            <span
              style={{
                flex: 1,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                textDecoration: isCompleted ? 'line-through' : 'none',
                textDecorationColor: '#D1D5DB',
              }}
            >
              {step.name}
            </span>

            {/* Criticality indicator */}
            {step.isCritical && !isCompleted && (
              <span title={t('Important step')} style={{ flexShrink: 0 }}>
                <AlertTriangle style={{ width: '14px', height: '14px', color: '#FBBF24' }} />
              </span>
            )}
          </button>
        )
      })}
    </div>
  )
}
