import type { RoadmapItem } from '../_types'
import { itemStatusColors, itemStatusLabels, priorityColors, categoryLabels } from '../_constants'

export function RoadmapItemsTable({
  items,
  onStatusChange,
  onDelete,
}: {
  items: RoadmapItem[]
  onStatusChange: (itemId: string, newStatus: string) => void
  onDelete: (itemId: string) => void
}) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
      <table className="w-full">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Titel</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Kategorie</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Prioritaet</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Zustaendig</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aufwand</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aktion</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {items.map(item => (
            <tr key={item.id} className="hover:bg-gray-50">
              <td className="px-4 py-3">
                <div className="font-medium text-gray-900">{item.title}</div>
                {item.regulation_ref && <div className="text-xs text-gray-500">{item.regulation_ref}</div>}
              </td>
              <td className="px-4 py-3 text-sm text-gray-600">
                {categoryLabels[item.category] || item.category}
              </td>
              <td className="px-4 py-3">
                <span className={`px-2 py-0.5 text-xs rounded-full ${priorityColors[item.priority] || 'bg-gray-100 text-gray-700'}`}>
                  {item.priority}
                </span>
              </td>
              <td className="px-4 py-3">
                <select
                  value={item.status}
                  onChange={e => onStatusChange(item.id, e.target.value)}
                  className={`px-2 py-0.5 text-xs rounded-full border-0 ${itemStatusColors[item.status] || 'bg-gray-100 text-gray-700'}`}
                >
                  {Object.entries(itemStatusLabels).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </select>
              </td>
              <td className="px-4 py-3 text-sm text-gray-600">
                {item.assignee_name || '-'}
                {item.department && <div className="text-xs text-gray-400">{item.department}</div>}
              </td>
              <td className="px-4 py-3 text-sm text-gray-600">{item.effort_days}d</td>
              <td className="px-4 py-3">
                <button onClick={() => onDelete(item.id)}
                  className="text-xs text-red-500 hover:text-red-700">Loeschen</button>
              </td>
            </tr>
          ))}
          {items.length === 0 && (
            <tr><td colSpan={7} className="px-4 py-8 text-center text-gray-500">Keine Items</td></tr>
          )}
        </tbody>
      </table>
    </div>
  )
}