'use client'

import { roadmapPhases } from './data'

export default function RoadmapTab() {
  return (
    <div className="space-y-4">
      {roadmapPhases.map((phase, index) => (
        <div
          key={phase.id}
          className={`border rounded-xl overflow-hidden ${
            phase.status === 'completed' ? 'border-green-200 bg-green-50/50' :
            phase.status === 'in_progress' ? 'border-blue-200 bg-blue-50/50' :
            phase.status === 'planned' ? 'border-amber-200 bg-amber-50/50' :
            'border-slate-200 bg-slate-50/50'
          }`}
        >
          <div className="p-4">
            <div className="flex items-start justify-between mb-2">
              <div className="flex items-center gap-3">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                  phase.status === 'completed' ? 'bg-green-500 text-white' :
                  phase.status === 'in_progress' ? 'bg-blue-500 text-white' :
                  phase.status === 'planned' ? 'bg-amber-500 text-white' :
                  'bg-slate-300 text-slate-600'
                }`}>
                  {phase.status === 'completed' ? '✓' : index + 1}
                </div>
                <div>
                  <h3 className="font-semibold text-slate-900">{phase.name}</h3>
                  <p className="text-sm text-slate-500">{phase.description}</p>
                </div>
              </div>
              <div className="text-right">
                <span className={`px-2 py-1 rounded text-xs font-medium ${
                  phase.status === 'completed' ? 'bg-green-100 text-green-800' :
                  phase.status === 'in_progress' ? 'bg-blue-100 text-blue-800' :
                  phase.status === 'planned' ? 'bg-amber-100 text-amber-800' :
                  'bg-slate-100 text-slate-600'
                }`}>
                  {phase.status === 'completed' ? 'Abgeschlossen' :
                   phase.status === 'in_progress' ? 'In Arbeit' :
                   phase.status === 'planned' ? 'Geplant' : 'Zukunft'}
                </span>
                {phase.startDate && (
                  <div className="text-xs text-slate-400 mt-1">
                    {phase.startDate} {phase.endDate ? `- ${phase.endDate}` : ''}
                  </div>
                )}
              </div>
            </div>

            {/* Progress Bar */}
            <div className="mt-3 mb-3">
              <div className="flex justify-between text-xs text-slate-500 mb-1">
                <span>Fortschritt</span>
                <span>{phase.progress}%</span>
              </div>
              <div className="w-full bg-slate-200 rounded-full h-2">
                <div
                  className={`h-2 rounded-full transition-all ${
                    phase.status === 'completed' ? 'bg-green-500' :
                    phase.status === 'in_progress' ? 'bg-blue-500' :
                    'bg-amber-500'
                  }`}
                  style={{ width: `${phase.progress}%` }}
                />
              </div>
            </div>

            {/* Features */}
            <div className="flex flex-wrap gap-2">
              {phase.features.map((feature, i) => (
                <span key={i} className="px-2 py-1 bg-white border border-slate-200 rounded text-xs text-slate-600">
                  {feature}
                </span>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}