'use client'

/**
 * SBOM Wizard Sub-Components
 *
 * WizardStepper, EducationCard, CategoryDemo - extracted from page.tsx.
 */

import type { WizardStep } from './wizard-content'
import { EDUCATION_CONTENT } from './wizard-content'

export function WizardStepper({
  steps,
  currentStep,
  onStepClick
}: {
  steps: WizardStep[]
  currentStep: number
  onStepClick: (index: number) => void
}) {
  return (
    <div className="flex items-center justify-between mb-8 overflow-x-auto pb-4">
      {steps.map((step, index) => (
        <div key={step.id} className="flex items-center">
          <button
            onClick={() => onStepClick(index)}
            className={`flex flex-col items-center min-w-[80px] p-2 rounded-lg transition-colors ${
              index === currentStep
                ? 'bg-orange-100 text-orange-700'
                : step.status === 'completed'
                ? 'bg-green-100 text-green-700 cursor-pointer hover:bg-green-200'
                : 'text-slate-400 hover:bg-slate-100'
            }`}
          >
            <span className="text-2xl mb-1">{step.icon}</span>
            <span className="text-xs font-medium text-center">{step.name}</span>
            {step.status === 'completed' && <span className="text-xs text-green-600">✓</span>}
          </button>
          {index < steps.length - 1 && (
            <div className={`h-0.5 w-8 mx-1 ${
              index < currentStep ? 'bg-green-400' : 'bg-slate-200'
            }`} />
          )}
        </div>
      ))}
    </div>
  )
}

export function EducationCard({ stepId }: { stepId: string }) {
  const content = EDUCATION_CONTENT[stepId]
  if (!content) return null

  return (
    <div className="bg-orange-50 border border-orange-200 rounded-lg p-6 mb-6">
      <h3 className="text-lg font-semibold text-orange-800 mb-4 flex items-center">
        <span className="mr-2">📖</span>
        {content.title}
      </h3>
      <div className="space-y-2 text-orange-900">
        {content.content.map((line, index) => (
          <p
            key={index}
            className={`${line.startsWith('•') ? 'ml-4' : ''} ${line.startsWith('**') ? 'font-semibold mt-3' : ''}`}
            dangerouslySetInnerHTML={{
              __html: line
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/→/g, '<span class="text-orange-600">→</span>')
                .replace(/← NEU!/g, '<span class="bg-amber-200 text-amber-800 px-1 rounded text-sm font-bold">← NEU!</span>')
            }}
          />
        ))}
      </div>
      {content.tips && content.tips.length > 0 && (
        <div className="mt-4 pt-4 border-t border-orange-200">
          <p className="text-sm font-semibold text-orange-700 mb-2">💡 Tipps:</p>
          {content.tips.map((tip, index) => (
            <p key={index} className="text-sm text-orange-700 ml-4">• {tip}</p>
          ))}
        </div>
      )}
    </div>
  )
}

export function CategoryDemo({ stepId }: { stepId: string }) {
  if (stepId === 'categories') {
    const categories = [
      { name: 'infrastructure', color: 'blue', count: 45 },
      { name: 'security-tools', color: 'red', count: 12 },
      { name: 'python', color: 'yellow', count: 35 },
      { name: 'go', color: 'cyan', count: 18 },
      { name: 'nodejs', color: 'green', count: 55 },
      { name: 'unity', color: 'amber', count: 7, isNew: true },
      { name: 'csharp', color: 'fuchsia', count: 3, isNew: true },
      { name: 'game', color: 'rose', count: 1, isNew: true },
    ]
    return (
      <div className="bg-white border border-slate-200 rounded-lg p-4 mb-4">
        <h4 className="font-semibold text-slate-800 mb-3">Live-Vorschau: Kategorien</h4>
        <div className="grid grid-cols-4 gap-2">
          {categories.map((cat) => (
            <div key={cat.name} className={`bg-${cat.color}-100 text-${cat.color}-800 px-3 py-2 rounded-lg text-center text-sm relative`}>
              <p className="font-medium">{cat.name}</p>
              <p className="text-xs opacity-70">{cat.count} Komponenten</p>
              {'isNew' in cat && cat.isNew && (
                <span className="absolute -top-1 -right-1 bg-amber-500 text-white text-xs px-1 rounded">NEU</span>
              )}
            </div>
          ))}
        </div>
      </div>
    )
  }

  if (stepId === 'unity-game') {
    const unityComponents = [
      { name: 'Unity Engine', version: '6000.0', license: 'Unity EULA' },
      { name: 'URP', version: '17.x', license: 'Unity Companion' },
      { name: 'TextMeshPro', version: '3.2', license: 'Unity Companion' },
      { name: 'Mathematics', version: '1.3', license: 'Unity Companion' },
      { name: 'Newtonsoft.Json', version: '3.2', license: 'MIT' },
    ]
    return (
      <div className="bg-white border border-slate-200 rounded-lg p-4 mb-4">
        <h4 className="font-semibold text-slate-800 mb-3">Unity Packages (Breakpilot Drive)</h4>
        <div className="space-y-2">
          {unityComponents.map((comp) => (
            <div key={comp.name} className="flex items-center justify-between py-2 border-b border-slate-100 last:border-0">
              <div className="flex items-center gap-2">
                <span className="bg-amber-100 text-amber-800 text-xs px-2 py-0.5 rounded">unity</span>
                <span className="font-medium">{comp.name}</span>
              </div>
              <div className="flex items-center gap-4 text-sm text-slate-600">
                <span>{comp.version}</span>
                <span className="bg-slate-100 px-2 py-0.5 rounded text-xs">{comp.license}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }

  if (stepId === 'licenses') {
    const licenses = [
      { name: 'MIT', count: 85, color: 'green', risk: 'Niedrig' },
      { name: 'Apache 2.0', count: 45, color: 'green', risk: 'Niedrig' },
      { name: 'BSD', count: 12, color: 'green', risk: 'Niedrig' },
      { name: 'Unity EULA', count: 1, color: 'yellow', risk: 'Mittel' },
      { name: 'Unity Companion', count: 6, color: 'yellow', risk: 'Mittel' },
      { name: 'AGPL', count: 2, color: 'orange', risk: 'Hoch' },
    ]
    return (
      <div className="bg-white border border-slate-200 rounded-lg p-4 mb-4">
        <h4 className="font-semibold text-slate-800 mb-3">Lizenz-Uebersicht</h4>
        <div className="space-y-2">
          {licenses.map((lic) => (
            <div key={lic.name} className="flex items-center justify-between py-2">
              <div className="flex items-center gap-2">
                <span className="font-medium">{lic.name}</span>
                <span className="text-sm text-slate-500">({lic.count})</span>
              </div>
              <span className={`text-xs px-2 py-1 rounded ${
                lic.risk === 'Niedrig' ? 'bg-green-100 text-green-700' :
                lic.risk === 'Mittel' ? 'bg-yellow-100 text-yellow-700' :
                'bg-orange-100 text-orange-700'
              }`}>
                Risiko: {lic.risk}
              </span>
            </div>
          ))}
        </div>
      </div>
    )
  }

  return null
}
