// HumanTaskTable - Component for table view of human tasks
import React from 'react';
import Card from '../Card';

function HumanTaskTable({ filteredTasks }) {
  const TYPE_ICONS = {
    task: "📋",
    bug: "🐛",
    feature: "✨",
    improvement: "⚡",
    documentation: "📚",
    research: "🔍",
    review: "👀",
    testing: "🧪",
    deployment: "🚀",
    maintenance: "🔧",
  };

  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",
  };

  const PRIORITY_COLORS = {
    high: "bg-red-100 text-red-700",
    medium: "bg-amber-100 text-amber-700",
    low: "bg-green-100 text-green-700",
  };

  return (
    <Card title={`Human Tasks Table (${filteredTasks.length})`}>
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead>
            <tr className="border-b border-gray-200 text-xs text-gray-500 uppercase">
              <th className="py-2 px-3">ID</th>
              <th className="py-2 px-3">Type</th>
              <th className="py-2 px-3">Title</th>
              <th className="py-2 px-3">Status</th>
              <th className="py-2 px-3">Priority</th>
              <th className="py-2 px-3">Tool</th>
              <th className="py-2 px-3">Project</th>
            </tr>
          </thead>
          <tbody>
            {filteredTasks.length === 0 ? (
              <tr>
                <td colSpan="7" className="py-4 px-3 text-center text-gray-400">No human tasks found</td>
              </tr>
            ) : (
              filteredTasks.map(t => (
                <tr key={t.id} className="border-b border-gray-100 hover:bg-gray-50">
                  <td className="py-2 px-3 text-xs font-mono text-gray-400">{t.id?.slice(0, 10)}</td>
                  <td className="py-2 px-3">
                    <span className="text-sm">{TYPE_ICONS[t.type] || "📋"}</span>
                  </td>
                  <td className="py-2 px-3">
                    <div className="font-medium text-gray-900">{t.task || t.title}</div>
                    {t.description && (
                      <div className="text-xs text-gray-500 truncate max-w-[300px]">{t.description}</div>
                    )}
                  </td>
                  <td className="py-2 px-3">
                    <span className={`text-[11px] px-1.5 py-0.5 rounded-full ${STATUS_COLORS[t.status] || "bg-gray-100"}`}>
                      {t.status?.replace("_", " ")}
                    </span>
                  </td>
                  <td className="py-2 px-3">
                    <span className={`text-[11px] px-1.5 py-0.5 rounded-full ${PRIORITY_COLORS[t.priority] || "bg-gray-100"}`}>
                      {t.priority}
                    </span>
                  </td>
                  <td className="py-2 px-3 text-xs">
                    {t.assigned_tool ? (
                      <span className="px-1.5 py-0.5 bg-indigo-50 text-indigo-700 rounded">{t.assigned_tool.tool}</span>
                    ) : (
                      <span className="text-gray-400">—</span>
                    )}
                  </td>
                  <td className="py-2 px-3 text-xs text-gray-500">{t.project_id || "—"}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </Card>
  );
}

export default HumanTaskTable;
