// HumanTaskBoard - Component for kanban board view of human tasks
import React from 'react';
import TaskTicketCard from '../TaskTicketCard';

function HumanTaskBoard({ boardColumns, jobs, onRefresh }) {
  const TICKET_STATUSES = ["backlog", "todo", "in_progress", "in_review", "done", "cancelled"];
  const STATUS_COLORS = {
    backlog: "bg-gray-100 text-gray-700",
    todo: "bg-blue-100 text-blue-700",
    in_progress: "bg-amber-100 text-amber-700",
    in_review: "bg-purple-100 text-purple-700",
    done: "bg-emerald-100 text-emerald-700",
    cancelled: "bg-red-100 text-red-600",
  };

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
      {TICKET_STATUSES.map(status => (
        <div key={status} className="bg-gray-50 rounded-lg p-2 min-h-[200px]">
          <h5 className={`text-xs font-medium px-2 py-1 rounded mb-2 ${STATUS_COLORS[status] || "bg-gray-100 text-gray-600"}`}>
            {status.replace("_", " ")} ({boardColumns[status]?.length || 0})
          </h5>
          <div className="space-y-2">
            {(boardColumns[status] || []).map(t => (
              <TaskTicketCard key={t.id} ticket={t} jobs={jobs} onRefresh={onRefresh} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

export default HumanTaskBoard;
