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

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-indigo-600">
              Schritt {currentStepIndex + 1} von {STEPS.length}
            </span>
            <span className="text-xs font-semibold text-indigo-600">
              {Math.round(((currentStepIndex + 1) / STEPS.length) * 100)}%
            </span>
          </div>
          <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-100">
            <div
              style={{ width: `${((currentStepIndex + 1) / STEPS.length) * 100}%` }}
              className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-600 transition-all duration-300"
            />
          </div>
        </div>
      </div>

      {/* Architecture Overview */}
      <div className="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow p-6 text-white">
        <h3 className="font-semibold mb-4">Architektur</h3>
        <div className="text-sm space-y-2 font-mono">
          <div className="bg-white/10 rounded px-2 py-1">Unity WebGL</div>
          <div className="text-center text-indigo-200">↓ JS Bridge</div>
          <div className="bg-white/10 rounded px-2 py-1">Matrix + Jitsi</div>
          <div className="text-center text-indigo-200">↓ WebSocket/API</div>
          <div className="bg-white/10 rounded px-2 py-1">Go Backend</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-indigo-600">Go:</span> consent-service/.../matrix/game_rooms.go
          </li>
          <li className="text-gray-600">
            <span className="text-indigo-600">Go:</span> consent-service/.../jitsi/game_meetings.go
          </li>
          <li className="text-gray-600">
            <span className="text-indigo-600">C#:</span> Assets/Scripts/Network/MultiplayerManager.cs
          </li>
          <li className="text-gray-600">
            <span className="text-indigo-600">JS:</span> Assets/Plugins/WebGL/MultiplayerPlugin.jslib
          </li>
        </ul>
      </div>
    </div>
  )
}
