// ViewControls — reusable view-switching + filter bar.
// Used by: TasksViewControls, HumanViewControls, and any future panel.
//
// Props:
//   view            — current view mode ("board" | "list" | "table")
//   filterStatus    — current status filter value
//   filterAgent     — current agent filter value (optional)
//   searchQuery     — current search query (optional)
//   filteredCount   — number of visible items
//   onViewChange    — callback(newView)
//   onFilterChange  — callback(newStatus)
//   onFilterAgentChange — callback(newAgent) (optional; agent select hidden if absent)
//   onSearchChange  — callback(newQuery) (optional; search input hidden if absent)
//   onRefresh       — callback()
//   views           — array of view options (default: board/list/table)
//   statuses        — array of status strings (default: TICKET_STATUSES)
//   itemLabel       — label for count (default: "task")

function ViewControls({
  view,
  filterStatus,
  filterAgent,
  searchQuery,
  filteredCount,
  onViewChange,
  onFilterChange,
  onFilterAgentChange,
  onSearchChange,
  onRefresh,
  views,
  statuses,
  itemLabel = "task",
}) {
  const viewOptions = views || [
    { key: "board", label: "Board" },
    { key: "list", label: "List" },
    { key: "table", label: "Table" },
  ];
  const statusList = statuses || TICKET_STATUSES;

  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <div className="flex border rounded overflow-hidden">
          {viewOptions.map(v => (
            <button
              key={v.key}
              onClick={() => onViewChange(v.key)}
              className={`px-3 py-1 text-xs font-medium ${
                view === v.key ? "bg-blue-600 text-white" : "bg-white text-gray-600 hover:bg-gray-50"
              }`}
            >
              {v.label}
            </button>
          ))}
        </div>
        {onSearchChange && (
          <input
            type="text"
            value={searchQuery || ""}
            onChange={(e) => onSearchChange(e.target.value)}
            placeholder="Search keywords, IDs, tags..."
            className="text-xs px-3 py-1 border rounded w-56 text-gray-700"
          />
        )}
        {onFilterAgentChange && (
          <select
            value={filterAgent || ""}
            onChange={e => onFilterAgentChange(e.target.value)}
            className={`text-xs px-2 py-1 border rounded font-medium ${
              filterAgent === "human" ? "border-amber-300 bg-amber-50 text-amber-700" :
              filterAgent === "auto" ? "border-indigo-300 bg-indigo-50 text-indigo-700" :
              "text-gray-600"
            }`}
          >
            <option value="">All tasks</option>
            <option value="auto">🤖 Automated</option>
            <option value="human">👤 Human</option>
          </select>
        )}
        <select
          value={filterStatus || ""}
          onChange={e => onFilterChange(e.target.value)}
          className="text-xs px-2 py-1 border rounded text-gray-600"
        >
          <option value="">All statuses</option>
          {statusList.map(s => (
            <option key={s} value={s}>{s.replace("_", " ")}</option>
          ))}
        </select>
        <span className="text-xs text-gray-400">
          {filteredCount} {itemLabel}{filteredCount !== 1 ? "s" : ""}
        </span>
      </div>
      <button
        onClick={onRefresh}
        className="text-xs px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200"
      >
        ↻ Refresh
      </button>
    </div>
  );
}
