'use client'

import type { BacklogItem, BacklogCategory } from './types'
import { statusLabels, priorityLabels } from './types'

export function BacklogItemCard({
  item,
  category,
  isExpanded,
  onToggleExpand,
  onUpdateStatus,
  onToggleSubtask,
}: {
  item: BacklogItem
  category: BacklogCategory | undefined
  isExpanded: boolean
  onToggleExpand: () => void
  onUpdateStatus: (status: BacklogItem['status']) => void
  onToggleSubtask: (subtaskId: string) => void
}) {
  const completedSubtasks = item.subtasks?.filter((st) => st.completed).length || 0
  const totalSubtasks = item.subtasks?.length || 0

  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
      <div
        className="p-4 cursor-pointer hover:bg-slate-50 transition-colors"
        onClick={onToggleExpand}
      >
        <div className="flex items-start gap-4">
          {/* Expand Icon */}
          <button className="mt-1 text-slate-400">
            <svg
              className={`w-5 h-5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 5l7 7-7 7"
              />
            </svg>
          </button>

          {/* Content */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-3 mb-1">
              <h3 className="font-semibold text-slate-900 truncate">{item.title}</h3>
              <span
                className={`px-2 py-0.5 rounded text-xs font-medium ${
                  priorityLabels[item.priority].color
                }`}
              >
                {priorityLabels[item.priority].label}
              </span>
            </div>
            <p className="text-sm text-slate-500 mb-2">{item.description}</p>
            <div className="flex items-center gap-4 text-xs">
              <span className={`px-2 py-1 rounded border ${category?.color}`}>
                {category?.name}
              </span>
              {totalSubtasks > 0 && (
                <span className="text-slate-500">
                  {completedSubtasks}/{totalSubtasks} Teilaufgaben
                </span>
              )}
            </div>
          </div>

          {/* Status */}
          <select
            value={item.status}
            onChange={(e) => {
              e.stopPropagation()
              onUpdateStatus(e.target.value as BacklogItem['status'])
            }}
            onClick={(e) => e.stopPropagation()}
            className={`px-3 py-1.5 rounded-lg text-sm font-medium border-0 cursor-pointer ${
              statusLabels[item.status].color
            }`}
          >
            {Object.entries(statusLabels).map(([value, { label }]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </div>

        {/* Progress Bar for subtasks */}
        {totalSubtasks > 0 && (
          <div className="mt-3 ml-9">
            <div className="w-full bg-slate-200 rounded-full h-1.5">
              <div
                className="bg-green-500 h-1.5 rounded-full transition-all"
                style={{ width: `${(completedSubtasks / totalSubtasks) * 100}%` }}
              />
            </div>
          </div>
        )}
      </div>

      {/* Expanded Subtasks */}
      {isExpanded && item.subtasks && item.subtasks.length > 0 && (
        <div className="border-t border-slate-200 bg-slate-50 p-4 pl-14">
          <h4 className="text-sm font-medium text-slate-700 mb-3">Teilaufgaben</h4>
          <ul className="space-y-2">
            {item.subtasks.map((subtask) => (
              <li key={subtask.id} className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={subtask.completed}
                  onChange={() => onToggleSubtask(subtask.id)}
                  className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
                />
                <span
                  className={`text-sm ${
                    subtask.completed ? 'text-slate-400 line-through' : 'text-slate-700'
                  }`}
                >
                  {subtask.title}
                </span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  )
}