import { StepInfo, WizardStep, STEPS } from './types'

export function WizardStepper({ steps, currentStep, onStepClick }: {
  steps: StepInfo[]
  currentStep: WizardStep
  onStepClick: (step: WizardStep) => void
}) {
  const currentIndex = steps.findIndex(s => s.id === currentStep)

  return (
    <div className="flex items-center gap-1 overflow-x-auto pb-2">
      {steps.map((step, index) => {
        const isActive = step.id === currentStep
        const isCompleted = index < currentIndex
        const isClickable = index <= currentIndex + 1

        return (
          <button
            key={step.id}
            onClick={() => isClickable && onStepClick(step.id)}
            disabled={!isClickable}
            className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap ${
              isActive
                ? 'bg-green-600 text-white'
                : isCompleted
                ? 'bg-green-100 text-green-700 hover:bg-green-200'
                : isClickable
                ? 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                : 'bg-gray-50 text-gray-400 cursor-not-allowed'
            }`}
          >
            <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${
              isActive ? 'bg-white/20' : isCompleted ? 'bg-green-200' : 'bg-gray-200'
            }`}>
              {isCompleted ? '✓' : index + 1}
            </span>
            <span className="hidden md:inline">{step.title}</span>
          </button>
        )
      })}
    </div>
  )
}

export function EducationCard({ title, content, tips }: { title: string; content: string; tips: string[] }) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-6">
      <h2 className="text-xl font-bold text-gray-900 mb-4">{title}</h2>
      <div className="prose prose-sm max-w-none mb-6">
        {content.split('\n\n').map((paragraph, i) => (
          <p key={i} className="text-gray-700 whitespace-pre-line mb-3">
            {paragraph.split('**').map((part, j) =>
              j % 2 === 1 ? <strong key={j}>{part}</strong> : part
            )}
          </p>
        ))}
      </div>
      <div className="bg-green-50 rounded-lg p-4">
        <h3 className="text-sm font-semibold text-green-800 mb-2">Tipps:</h3>
        <ul className="space-y-1">
          {tips.map((tip, i) => (
            <li key={i} className="flex items-start gap-2 text-sm text-green-700">
              <span className="text-green-500 mt-0.5">•</span>
              {tip}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

export function Sidebar({ currentStepIndex }: { currentStepIndex: number }) {
  return (
    <div className="space-y-6">
      {/* Progress */}
      <div className="bg-white rounded-xl shadow p-6">
        <h3 className="font-semibold text-gray-900 mb-4">Fortschritt</h3>
        <div className="relative pt-1">
          <div className="flex mb-2 items-center justify-between">
            <span className="text-xs font-semibold text-green-600">
              Schritt {currentStepIndex + 1} von {STEPS.length}
            </span>
            <span className="text-xs font-semibold text-green-600">
              {Math.round(((currentStepIndex + 1) / STEPS.length) * 100)}%
            </span>
          </div>
          <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-100">
            <div
              style={{ width: `${((currentStepIndex + 1) / STEPS.length) * 100}%` }}
              className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-600 transition-all duration-300"
            />
          </div>
        </div>
      </div>

      {/* Pipeline Overview */}
      <div className="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl shadow p-6 text-white">
        <h3 className="font-semibold mb-4">Pipeline Flow</h3>
        <div className="text-sm space-y-2 font-mono">
          <div className="bg-white/10 rounded px-2 py-1">Git Push/Tag</div>
          <div className="text-center text-green-200">↓</div>
          <div className="bg-white/10 rounded px-2 py-1">GitHub Actions</div>
          <div className="text-center text-green-200">↓</div>
          <div className="bg-white/10 rounded px-2 py-1">Unity Build</div>
          <div className="text-center text-green-200">↓</div>
          <div className="bg-white/10 rounded px-2 py-1">Deploy / Upload</div>
        </div>
      </div>

      {/* Quick Links */}
      <div className="bg-white rounded-xl shadow p-6">
        <h3 className="font-semibold text-gray-900 mb-4">Wichtige Dateien</h3>
        <ul className="space-y-2 text-sm">
          <li className="text-gray-600"><span className="text-green-600">YAML:</span> ci/build-all-platforms.yml</li>
          <li className="text-gray-600"><span className="text-green-600">C#:</span> Assets/Editor/BuildScript.cs</li>
          <li className="text-gray-600"><span className="text-green-600">JSON:</span> Assets/Resources/version.json</li>
          <li className="text-gray-600"><span className="text-green-600">Plist:</span> ci/ios-export-options.plist</li>
        </ul>
      </div>
    </div>
  )
}