import { BACKLOG_ITEMS } from '../types'

export default function RoadmapTab() {
  const completedCount = BACKLOG_ITEMS.filter(i => i.status === 'completed').length
  const inProgressCount = BACKLOG_ITEMS.filter(i => i.status === 'in_progress').length
  const plannedCount = BACKLOG_ITEMS.filter(i => i.status === 'planned').length

  return (
    <div className="space-y-6">
      {/* Progress Overview */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-green-50 border border-green-200 rounded-xl p-6">
          <p className="text-sm text-green-600 font-medium">Abgeschlossen</p>
          <p className="text-3xl font-bold text-green-700">{completedCount}</p>
        </div>
        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
          <p className="text-sm text-yellow-600 font-medium">In Bearbeitung</p>
          <p className="text-3xl font-bold text-yellow-700">{inProgressCount}</p>
        </div>
        <div className="bg-slate-50 border border-slate-200 rounded-xl p-6">
          <p className="text-sm text-slate-600 font-medium">Geplant</p>
          <p className="text-3xl font-bold text-slate-700">{plannedCount}</p>
        </div>
      </div>

      {/* Implemented Features */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Implementierte Features (v2.0 - Stand: 2026-01-17)</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            '558 Requirements aus 19 Regulations extrahiert',
            '44 Controls in 9 Domains mit Auto-Mapping',
            '474 Control-Mappings automatisch generiert',
            '30 Service-Module in Registry kartiert',
            'AI-Interpretation fuer alle Requirements',
            'EU-Lex Scraper fuer Live-Regulation-Fetch',
            'BSI-TR-03161 PDF Parser (alle 3 Teile)',
            'Evidence Management mit File Upload',
            'Risk Matrix (5x5 Likelihood x Impact)',
            'Audit Export Wizard (ZIP Generator)',
            'Compliance Score Berechnung',
            'Dashboard mit Echtzeit-Statistiken',
          ].map((feature, idx) => (
            <div key={idx} className="flex items-center gap-2">
              <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              <span className="text-slate-700">{feature}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Backlog */}
      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div className="p-4 border-b">
          <h3 className="text-lg font-semibold text-slate-900">Backlog</h3>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Titel</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Kategorie</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Prioritaet</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              {BACKLOG_ITEMS.map((item) => (
                <tr key={item.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3">
                    <span className="font-medium text-slate-900">{item.title}</span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-slate-600">{item.category}</span>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      item.priority === 'high' ? 'bg-red-100 text-red-700' :
                      item.priority === 'medium' ? 'bg-yellow-100 text-yellow-700' :
                      'bg-slate-100 text-slate-700'
                    }`}>
                      {item.priority}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      item.status === 'completed' ? 'bg-green-100 text-green-700' :
                      item.status === 'in_progress' ? 'bg-blue-100 text-blue-700' :
                      'bg-slate-100 text-slate-700'
                    }`}>
                      {item.status === 'completed' ? 'Fertig' :
                       item.status === 'in_progress' ? 'In Arbeit' : 'Geplant'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}