import { EntryStatus } from "@mosaic/shared";
import type { KnowledgeTag } from "@mosaic/shared";
import { Search, Filter } from "lucide-react";

type TagFilter = "all" | (string & Record<never, never>);

interface EntryFiltersProps {
  selectedStatus: EntryStatus | "all";
  selectedTag: TagFilter;
  searchQuery: string;
  sortBy: "updatedAt" | "createdAt" | "title";
  sortOrder: "asc" | "desc";
  tags: KnowledgeTag[];
  onStatusChange: (status: EntryStatus | "all") => void;
  onTagChange: (tag: TagFilter) => void;
  onSearchChange: (query: string) => void;
  onSortChange: (sortBy: "updatedAt" | "createdAt" | "title", sortOrder: "asc" | "desc") => void;
}

export function EntryFilters({
  selectedStatus,
  selectedTag,
  searchQuery,
  sortBy,
  sortOrder,
  tags,
  onStatusChange,
  onTagChange,
  onSearchChange,
  onSortChange,
}: EntryFiltersProps): React.JSX.Element {
  const statusOptions: { value: EntryStatus | "all"; label: string }[] = [
    { value: "all", label: "All Status" },
    { value: EntryStatus.DRAFT, label: "Draft" },
    { value: EntryStatus.PUBLISHED, label: "Published" },
    { value: EntryStatus.ARCHIVED, label: "Archived" },
  ];

  const sortOptions: {
    value: "updatedAt" | "createdAt" | "title";
    label: string;
  }[] = [
    { value: "updatedAt", label: "Last Updated" },
    { value: "createdAt", label: "Created Date" },
    { value: "title", label: "Title" },
  ];

  return (
    <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-6 space-y-4">
      {/* Search */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
        <input
          type="text"
          placeholder="Search entries..."
          value={searchQuery}
          onChange={(e) => {
            onSearchChange(e.target.value);
          }}
          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
      </div>

      {/* Filters row */}
      <div className="flex flex-wrap gap-3">
        {/* Status filter */}
        <div className="flex items-center gap-2">
          <Filter className="w-4 h-4 text-gray-500" />
          <select
            value={selectedStatus}
            onChange={(e) => {
              onStatusChange(e.target.value as EntryStatus | "all");
            }}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            {statusOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>

        {/* Tag filter */}
        <div>
          <select
            value={selectedTag}
            onChange={(e) => {
              onTagChange(e.target.value);
            }}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="all">All Tags</option>
            {tags.map((tag) => (
              <option key={tag.id} value={tag.slug}>
                {tag.name}
              </option>
            ))}
          </select>
        </div>

        {/* Sort controls */}
        <div className="flex items-center gap-2 ml-auto">
          <span className="text-sm text-gray-600">Sort by:</span>
          <select
            value={sortBy}
            onChange={(e) => {
              onSortChange(e.target.value as "updatedAt" | "createdAt" | "title", sortOrder);
            }}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            {sortOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>

          <button
            onClick={() => {
              onSortChange(sortBy, sortOrder === "asc" ? "desc" : "asc");
            }}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors"
            title={sortOrder === "asc" ? "Sort descending" : "Sort ascending"}
          >
            {sortOrder === "asc" ? "↑" : "↓"}
          </button>
        </div>
      </div>
    </div>
  );
}
