// TicketFilters - Extracted filtering logic from TicketsPanel
import React, { useState, useCallback } from 'react';

const TICKET_PRIORITIES = ["critical", "high", "medium", "low"];
const TOOLS = ["vscode", "aider", "claude-code", "windsurf", "cursor", "roo-code", "continue", "copilot", "human"];

function TicketFilters({ 
  selectedMilestone, setSelectedMilestone,
  selectedSprint, setSelectedSprint,
  filterStatus, setFilterStatus,
  filterTool, setFilterTool,
  filterPriority, setFilterPriority,
  searchQuery, setSearchQuery,
  sortBy, setSortBy,
  sortOrder, setSortOrder,
  milestones, sprints
}) {
  const handleReset = useCallback(() => {
    setSelectedMilestone(null);
    setSelectedSprint(null);
    setFilterStatus("");
    setFilterTool("");
    setFilterPriority("");
    setSearchQuery("");
    setSortBy("created");
    setSortOrder("desc");
  }, [setSelectedMilestone, setSelectedSprint, setFilterStatus, setFilterTool, setFilterPriority, setSearchQuery, setSortBy, setSortOrder]);

  return (
    <div className="bg-white rounded-lg border p-4 space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-sm font-medium text-gray-900">Filters</h3>
        <button
          onClick={handleReset}
          className="text-xs text-gray-500 hover:text-gray-700"
        >
          Reset
        </button>
      </div>
      
      {/* Search */}
      <div>
        <input
          type="text"
          placeholder="Search tickets..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full px-3 py-2 border rounded-md text-sm"
        />
      </div>

      {/* Milestone/Sprint */}
      <div className="grid grid-cols-2 gap-3">
        <div>
          <select
            value={selectedMilestone || ""}
            onChange={(e) => setSelectedMilestone(e.target.value || null)}
            className="w-full px-3 py-2 border rounded-md text-sm"
          >
            <option value="">All Milestones</option>
            {milestones?.map(m => (
              <option key={m.id} value={m.id}>{m.name}</option>
            ))}
          </select>
        </div>
        <div>
          <select
            value={selectedSprint || ""}
            onChange={(e) => setSelectedSprint(e.target.value || null)}
            className="w-full px-3 py-2 border rounded-md text-sm"
          >
            <option value="">All Sprints</option>
            {sprints?.map(s => (
              <option key={s.id} value={s.id}>{s.name}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Status/Priority/Tool */}
      <div className="grid grid-cols-3 gap-3">
        <div>
          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="w-full px-3 py-2 border rounded-md text-sm"
          >
            <option value="">All Status</option>
            <option value="backlog">Backlog</option>
            <option value="todo">To Do</option>
            <option value="in_progress">In Progress</option>
            <option value="in_review">In Review</option>
            <option value="done">Done</option>
          </select>
        </div>
        <div>
          <select
            value={filterPriority}
            onChange={(e) => setFilterPriority(e.target.value)}
            className="w-full px-3 py-2 border rounded-md text-sm"
          >
            <option value="">All Priority</option>
            {TICKET_PRIORITIES.map(p => (
              <option key={p} value={p}>{p}</option>
            ))}
          </select>
        </div>
        <div>
          <select
            value={filterTool}
            onChange={(e) => setFilterTool(e.target.value)}
            className="w-full px-3 py-2 border rounded-md text-sm"
          >
            <option value="">All Tools</option>
            {TOOLS.map(t => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Sort */}
      <div className="grid grid-cols-2 gap-3">
        <div>
          <select
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value)}
            className="w-full px-3 py-2 border rounded-md text-sm"
          >
            <option value="created">Created</option>
            <option value="updated">Updated</option>
            <option value="priority">Priority</option>
            <option value="status">Status</option>
          </select>
        </div>
        <div>
          <select
            value={sortOrder}
            onChange={(e) => setSortOrder(e.target.value)}
            className="w-full px-3 py-2 border rounded-md text-sm"
          >
            <option value="desc">Newest First</option>
            <option value="asc">Oldest First</option>
          </select>
        </div>
      </div>
    </div>
  );
}

export default TicketFilters;
