"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { Tag, EntryStatus, SearchFiltersState } from "./types";

interface SearchFiltersProps {
  availableTags: Tag[];
  selectedTags: string[];
  selectedStatus?: EntryStatus;
  onFilterChange: (filters: SearchFiltersState) => void;
}

/**
 * Status options with PDA-friendly visual indicators
 */
const STATUS_OPTIONS: { value: EntryStatus; label: string; icon: string }[] = [
  { value: "ACTIVE", label: "Active", icon: "🟢" },
  { value: "SCHEDULED", label: "Scheduled", icon: "🔵" },
  { value: "PAUSED", label: "Paused", icon: "⏸️" },
  { value: "DORMANT", label: "Dormant", icon: "💤" },
  { value: "ARCHIVED", label: "Archived", icon: "⚪" },
];

/**
 * Filter sidebar for search results
 * Supports filtering by status and tags with PDA-friendly language
 */
export function SearchFilters({
  availableTags,
  selectedTags,
  selectedStatus,
  onFilterChange,
}: SearchFiltersProps): React.JSX.Element {
  const handleStatusClick = (status: EntryStatus): void => {
    const filters: SearchFiltersState = {
      tags: selectedTags,
    };
    if (selectedStatus !== status) {
      filters.status = status;
    }
    onFilterChange(filters);
  };

  const handleTagClick = (tagSlug: string): void => {
    const newTags = selectedTags.includes(tagSlug)
      ? selectedTags.filter((t) => t !== tagSlug)
      : [...selectedTags, tagSlug];

    const filters: SearchFiltersState = {
      tags: newTags,
    };
    if (selectedStatus) {
      filters.status = selectedStatus;
    }
    onFilterChange(filters);
  };

  const handleClearFilters = (): void => {
    onFilterChange({
      tags: [],
    });
  };

  const activeFilterCount = (selectedStatus ? 1 : 0) + selectedTags.length;
  const hasActiveFilters = activeFilterCount > 0;

  return (
    <div className="w-64 border-l border-gray-200 bg-white p-4 space-y-6">
      {/* Header with clear button */}
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold text-gray-900">Filters</h3>
        {hasActiveFilters && (
          <div className="flex items-center gap-2">
            <Badge variant="secondary" className="text-xs">
              {activeFilterCount}
            </Badge>
            <Button
              variant="ghost"
              size="sm"
              onClick={handleClearFilters}
              className="text-xs text-gray-600 hover:text-gray-900"
            >
              Clear filters
            </Button>
          </div>
        )}
      </div>

      {/* Status filter section */}
      <div>
        <h4 className="text-xs font-medium text-gray-700 mb-2">Status</h4>
        <div className="space-y-1">
          {STATUS_OPTIONS.map((option) => (
            <button
              key={option.value}
              onClick={() => {
                handleStatusClick(option.value);
              }}
              className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${
                selectedStatus === option.value
                  ? "bg-blue-50 text-blue-700 font-medium selected"
                  : "text-gray-700 hover:bg-gray-50"
              }`}
            >
              <span>{option.icon}</span>
              <span>{option.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Tags filter section */}
      {availableTags.length > 0 && (
        <div>
          <h4 className="text-xs font-medium text-gray-700 mb-2">Tags</h4>
          <div className="space-y-1">
            {availableTags.map((tag) => {
              const isSelected = selectedTags.includes(tag.slug);
              return (
                <button
                  key={tag.id}
                  onClick={() => {
                    handleTagClick(tag.slug);
                  }}
                  className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${
                    isSelected
                      ? "bg-blue-50 text-blue-700 font-medium selected"
                      : "text-gray-700 hover:bg-gray-50"
                  }`}
                >
                  {tag.color && (
                    <span className="w-3 h-3 rounded-full" style={{ backgroundColor: tag.color }} />
                  )}
                  <span className="truncate">{tag.name}</span>
                  {isSelected && <span className="ml-auto text-blue-600">✓</span>}
                </button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}
