"use client";

import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import type { Goal, Project, Tag } from "@/types";

export interface TaskFilterValues {
  search: string;
  status: string;
  priority: string;
  projectId: string;
  goalId: string;
  tagId: string;
  dueState: string;
}

interface TaskFiltersProps {
  filters: TaskFilterValues;
  onChange: (filters: TaskFilterValues) => void;
  projects: Project[];
  goals: Goal[];
  tags: Tag[];
}

export function TaskFilters({
  filters,
  onChange,
  projects,
  goals,
  tags,
}: TaskFiltersProps) {
  function update(key: keyof TaskFilterValues, value: string) {
    onChange({ ...filters, [key]: value });
  }

  const hasFilters =
    filters.search ||
    filters.status ||
    filters.priority ||
    filters.projectId ||
    filters.goalId ||
    filters.tagId ||
    filters.dueState;

  return (
    <div className="flex items-center gap-2 flex-wrap">
      <div className="relative min-w-[220px] flex-1 sm:flex-none">
        <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
        <Input
          value={filters.search}
          onChange={(e) => update("search", e.target.value)}
          placeholder="Search tasks..."
          className="h-8 pl-8 text-xs"
        />
      </div>

      <Select
        value={filters.status}
        onChange={(e) => update("status", e.target.value)}
        className="w-auto min-w-[120px] h-8 text-xs"
      >
        <option value="">All statuses</option>
        <option value="todo">To do</option>
        <option value="in_progress">In progress</option>
        <option value="done">Done</option>
        <option value="cancelled">Cancelled</option>
      </Select>

      <Select
        value={filters.priority}
        onChange={(e) => update("priority", e.target.value)}
        className="w-auto min-w-[120px] h-8 text-xs"
      >
        <option value="">All priorities</option>
        <option value="urgent">Urgent</option>
        <option value="high">High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
        <option value="none">No priority</option>
      </Select>

      {projects.length > 0 && (
        <Select
          value={filters.projectId}
          onChange={(e) => update("projectId", e.target.value)}
          className="w-auto min-w-[120px] h-8 text-xs"
        >
          <option value="">All projects</option>
          {projects.map((p) => (
            <option key={p.id} value={p.id}>
              {p.icon} {p.name}
            </option>
          ))}
        </Select>
      )}

      {goals.length > 0 && (
        <Select
          value={filters.goalId}
          onChange={(e) => update("goalId", e.target.value)}
          className="w-auto min-w-[120px] h-8 text-xs"
        >
          <option value="">All goals</option>
          {goals.map((goal) => (
            <option key={goal.id} value={goal.id}>
              {goal.icon} {goal.title}
            </option>
          ))}
        </Select>
      )}

      {tags.length > 0 && (
        <Select
          value={filters.tagId}
          onChange={(e) => update("tagId", e.target.value)}
          className="w-auto min-w-[100px] h-8 text-xs"
        >
          <option value="">All tags</option>
          {tags.map((t) => (
            <option key={t.id} value={t.id}>
              {t.name}
            </option>
          ))}
        </Select>
      )}

      <Select
        value={filters.dueState}
        onChange={(e) => update("dueState", e.target.value)}
        className="w-auto min-w-[120px] h-8 text-xs"
      >
        <option value="">Any due date</option>
        <option value="overdue">Overdue</option>
        <option value="today">Due today</option>
        <option value="upcoming">Upcoming</option>
        <option value="none">No due date</option>
      </Select>

      {hasFilters && (
        <button
          onClick={() =>
            onChange({
              search: "",
              status: "",
              priority: "",
              projectId: "",
              goalId: "",
              tagId: "",
              dueState: "",
            })
          }
          className="text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer px-2 py-1"
        >
          Clear filters
        </button>
      )}
    </div>
  );
}