import { Search } from "lucide-react";
import { cn } from "../../lib/utils";

// ---------------------------------------------------------------------------
// SearchFilterBar Component
// ---------------------------------------------------------------------------

export function SearchFilterBar({
  search,
  onSearchChange,
  classId,
  onClassChange,
  isActive,
  onActiveChange,
  sortBy,
  onSortByChange,
  sortOrder,
  onSortOrderChange,
  onClear,
  classes,
}: {
  search: string;
  onSearchChange: (v: string) => void;
  classId: string | null;
  onClassChange: (v: string | null) => void;
  isActive: boolean | null;
  onActiveChange: (v: boolean | null) => void;
  sortBy: string;
  onSortByChange: (v: string) => void;
  sortOrder: string;
  onSortOrderChange: (v: string) => void;
  onClear: () => void;
  classes: { id: string; name: string }[];
}) {
  return (
    <div className="flex flex-wrap gap-3 items-center">
      {/* Search input */}
      <div className="relative flex-1 min-w-[200px]">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
        <input
          type="text"
          value={search}
          onChange={(e) => onSearchChange(e.target.value)}
          placeholder="Search by username..."
          className={cn(
            "w-full bg-input border border-border rounded-md pl-10 pr-3 py-2 text-sm text-foreground",
            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
            "transition-colors"
          )}
        />
      </div>

      {/* Class filter */}
      <select
        value={classId ?? ""}
        onChange={(e) => onClassChange(e.target.value || null)}
        className={cn(
          "bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
          "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
          "transition-colors"
        )}
      >
        <option value="">All Classes</option>
        {Array.isArray(classes) && classes.map((c) => (
          <option key={c.id} value={c.id}>
            {c.name}
          </option>
        ))}
      </select>

      {/* Active status filter */}
      <select
        value={isActive === null ? "" : String(isActive)}
        onChange={(e) =>
          onActiveChange(e.target.value === "" ? null : e.target.value === "true")
        }
        className={cn(
          "bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
          "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
          "transition-colors"
        )}
      >
        <option value="">All Status</option>
        <option value="true">Active</option>
        <option value="false">Inactive</option>
      </select>

      {/* Sort by */}
      <select
        value={sortBy}
        onChange={(e) => onSortByChange(e.target.value)}
        className={cn(
          "bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
          "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
          "transition-colors"
        )}
      >
        <option value="balance">Sort by Balance</option>
        <option value="level">Sort by Level</option>
        <option value="xp">Sort by XP</option>
        <option value="username">Sort by Username</option>
      </select>

      {/* Sort order */}
      <button
        onClick={() => onSortOrderChange(sortOrder === "asc" ? "desc" : "asc")}
        className={cn(
          "bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
          "hover:bg-raised transition-colors"
        )}
      >
        {sortOrder === "asc" ? "\u2191 Asc" : "\u2193 Desc"}
      </button>

      {/* Clear filters */}
      <button
        onClick={onClear}
        className={cn(
          "bg-input border border-border rounded-md px-3 py-2 text-sm text-text-secondary",
          "hover:bg-destructive hover:text-white hover:border-destructive transition-colors"
        )}
      >
        Clear
      </button>
    </div>
  );
}
