'use client'

import type { Feature } from './types'
import { priorityColors } from './types'

interface BacklogTabProps {
  features: Feature[]
}

export default function BacklogTab({ features }: BacklogTabProps) {
  return (
    <div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Todo Column */}
        <div className="bg-amber-50 rounded-xl p-4">
          <h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
            <span className="w-6 h-6 bg-amber-200 rounded-full flex items-center justify-center text-sm">
              {features.filter(f => f.status === 'todo').length}
            </span>
            Todo
          </h3>
          <div className="space-y-2">
            {features.filter(f => f.status === 'todo').map(f => (
              <div key={f.id} className="bg-white p-3 rounded-lg shadow-sm">
                <div className="font-medium text-sm text-slate-900">{f.title}</div>
                <div className="text-xs text-slate-500 mt-1">{f.description}</div>
                <div className="flex gap-1 mt-2">
                  <span className={`px-1.5 py-0.5 rounded text-xs ${priorityColors[f.priority]}`}>
                    {f.priority}
                  </span>
                  <span className="px-1.5 py-0.5 bg-slate-100 text-slate-600 rounded text-xs">
                    {f.effort}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* In Progress Column */}
        <div className="bg-blue-50 rounded-xl p-4">
          <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
            <span className="w-6 h-6 bg-blue-200 rounded-full flex items-center justify-center text-sm">
              {features.filter(f => f.status === 'in_progress').length}
            </span>
            In Arbeit
          </h3>
          <div className="space-y-2">
            {features.filter(f => f.status === 'in_progress').map(f => (
              <div key={f.id} className="bg-white p-3 rounded-lg shadow-sm">
                <div className="font-medium text-sm text-slate-900">{f.title}</div>
                <div className="text-xs text-slate-500 mt-1">{f.description}</div>
                <div className="flex gap-1 mt-2">
                  <span className={`px-1.5 py-0.5 rounded text-xs ${priorityColors[f.priority]}`}>
                    {f.priority}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Backlog Column */}
        <div className="bg-slate-100 rounded-xl p-4">
          <h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
            <span className="w-6 h-6 bg-slate-300 rounded-full flex items-center justify-center text-sm">
              {features.filter(f => f.status === 'backlog').length}
            </span>
            Backlog
          </h3>
          <div className="space-y-2">
            {features.filter(f => f.status === 'backlog').map(f => (
              <div key={f.id} className="bg-white p-3 rounded-lg shadow-sm">
                <div className="font-medium text-sm text-slate-900">{f.title}</div>
                <div className="text-xs text-slate-500 mt-1">{f.description}</div>
                <div className="flex gap-1 mt-2">
                  <span className={`px-1.5 py-0.5 rounded text-xs ${priorityColors[f.priority]}`}>
                    {f.priority}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}