import { Filter, X } from "lucide-react";

interface HeatmapFiltersProps {
  platforms: string[];
  onPlatformsChange: (platforms: string[]) => void;
  selectedTactics: string[];
  onTacticsChange: (tactics: string[]) => void;
  minScore: number;
  onMinScoreChange: (score: number) => void;
  availableTactics: string[];
}

const PLATFORMS = ["windows", "linux", "macos"];

const formatTacticName = (tactic: string): string =>
  tactic
    .split("-")
    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
    .join(" ");

export default function HeatmapFilters({
  platforms,
  onPlatformsChange,
  selectedTactics,
  onTacticsChange,
  minScore,
  onMinScoreChange,
  availableTactics,
}: HeatmapFiltersProps) {
  const togglePlatform = (platform: string) => {
    if (platforms.includes(platform)) {
      onPlatformsChange(platforms.filter((p) => p !== platform));
    } else {
      onPlatformsChange([...platforms, platform]);
    }
  };

  const toggleTactic = (tactic: string) => {
    if (selectedTactics.includes(tactic)) {
      onTacticsChange(selectedTactics.filter((t) => t !== tactic));
    } else {
      onTacticsChange([...selectedTactics, tactic]);
    }
  };

  const hasActiveFilters = platforms.length > 0 || selectedTactics.length > 0 || minScore > 0;

  const clearAll = () => {
    onPlatformsChange([]);
    onTacticsChange([]);
    onMinScoreChange(0);
  };

  return (
    <div className="flex flex-wrap items-center gap-4">
      <div className="flex items-center gap-2">
        <Filter className="h-4 w-4 text-gray-400" />
        <span className="text-xs font-medium text-gray-400">Filters:</span>
      </div>

      {/* Platform checkboxes */}
      <div className="flex items-center gap-2">
        {PLATFORMS.map((platform) => (
          <label
            key={platform}
            className="flex cursor-pointer items-center gap-1.5"
          >
            <input
              type="checkbox"
              checked={platforms.includes(platform)}
              onChange={() => togglePlatform(platform)}
              className="h-3.5 w-3.5 rounded border-gray-600 bg-gray-800 text-cyan-500 focus:ring-cyan-500/40"
            />
            <span className="text-xs text-gray-300 capitalize">{platform}</span>
          </label>
        ))}
      </div>

      {/* Tactic multi-select */}
      <div className="relative">
        <select
          value=""
          onChange={(e) => {
            if (e.target.value) toggleTactic(e.target.value);
          }}
          className="rounded-lg border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:border-cyan-500 focus:outline-none"
        >
          <option value="">
            {selectedTactics.length > 0
              ? `${selectedTactics.length} Tactics`
              : "All Tactics"}
          </option>
          {availableTactics
            .filter((t) => !selectedTactics.includes(t))
            .map((tactic) => (
              <option key={tactic} value={tactic}>
                {formatTacticName(tactic)}
              </option>
            ))}
        </select>
      </div>

      {/* Selected tactic pills */}
      {selectedTactics.length > 0 && (
        <div className="flex flex-wrap items-center gap-1">
          {selectedTactics.map((tactic) => (
            <button
              key={tactic}
              onClick={() => toggleTactic(tactic)}
              className="flex items-center gap-1 rounded-full bg-cyan-500/10 px-2 py-0.5 text-[10px] text-cyan-400 hover:bg-cyan-500/20"
            >
              {formatTacticName(tactic)}
              <X className="h-2.5 w-2.5" />
            </button>
          ))}
        </div>
      )}

      {/* Min score slider */}
      <div className="flex items-center gap-2">
        <span className="text-xs text-gray-400">Min Score:</span>
        <input
          type="range"
          min={0}
          max={100}
          step={5}
          value={minScore}
          onChange={(e) => onMinScoreChange(parseInt(e.target.value, 10))}
          className="h-1 w-20 cursor-pointer accent-cyan-500"
        />
        <span className="w-6 text-right text-xs font-medium text-gray-300">
          {minScore}
        </span>
      </div>

      {/* Clear all */}
      {hasActiveFilters && (
        <button
          onClick={clearAll}
          className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-400 hover:border-red-500/50 hover:text-red-400"
        >
          <X className="h-3 w-3" />
          Clear
        </button>
      )}
    </div>
  );
}
