import { Search, RotateCcw } from "lucide-react";
import { cn, MEETING_STATUS_FILTER_OPTIONS } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { SimpleTooltip } from "@/components/ui/tooltip";

interface MeetingsFiltersProps {
  search: string;
  setSearch: (val: string) => void;
  statusFilter: string;
  setStatusFilter: (val: string) => void;
  platformFilter: string;
  setPlatformFilter: (val: string) => void;
  typeFilter: string;
  setTypeFilter: (val: string) => void;
  dateFilter: string;
  setDateFilter: (val: string) => void;
  sortBy: string;
  setSortBy: (val: string) => void;
  hasActiveFilters: boolean;
  resetFilters: () => void;
}

export function MeetingsFilters({
  search,
  setSearch,
  statusFilter,
  setStatusFilter,
  platformFilter,
  setPlatformFilter,
  typeFilter,
  setTypeFilter,
  dateFilter,
  setDateFilter,
  sortBy,
  setSortBy,
  hasActiveFilters,
  resetFilters,
}: MeetingsFiltersProps) {
  return (
    <div className="flex flex-col lg:flex-row gap-3 items-stretch lg:items-center bg-white dark:bg-gray-900 p-3 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm transition-all duration-200">
      {/* Search */}
      <div className="relative flex-1">
        <Search
          className={cn(
            "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 pointer-events-none transition-colors duration-200",
            search ? "text-blue-500" : "text-gray-400 dark:text-gray-500",
          )}
        />
        <Input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Search by title, user name, or email..."
          className={cn(
            "pl-9 pr-8 bg-transparent border-gray-200 dark:border-gray-800 focus-visible:ring-blue-500 rounded-xl transition-all duration-200",
            search &&
              "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-900 dark:text-blue-100",
          )}
        />
        {search && (
          <button
            onClick={() => setSearch("")}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs font-medium"
          >
            Clear
          </button>
        )}
      </div>

      {/* Filter Selectors */}
      <div className="flex flex-wrap items-center gap-2">
        {/* Status Filter */}
        <div className="w-[140px]">
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger
              className={cn(
                "bg-transparent border-gray-p200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                statusFilter !== "all" &&
                  "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold",
              )}
            >
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              {MEETING_STATUS_FILTER_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* Platform Filter */}
        <div className="w-[140px]">
          <Select value={platformFilter} onValueChange={setPlatformFilter}>
            <SelectTrigger
              className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                platformFilter !== "all" &&
                  "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold",
              )}
            >
              <SelectValue placeholder="Platform" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Platforms</SelectItem>
              <SelectItem value="google_meet">Google Meet</SelectItem>
              <SelectItem value="zoom">Zoom</SelectItem>
              <SelectItem value="microsoft_teams">MS Teams</SelectItem>
              <SelectItem value="jitsi">Jitsi</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Type Filter */}
        <div className="w-[130px]">
          <Select value={typeFilter} onValueChange={setTypeFilter}>
            <SelectTrigger
              className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                typeFilter !== "all" &&
                  "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold",
              )}
            >
              <SelectValue placeholder="Type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Types</SelectItem>
              <SelectItem value="recurring">Recurring</SelectItem>
              <SelectItem value="one_time">One-time</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Date Filter */}
        <div className="w-[130px]">
          <Select value={dateFilter} onValueChange={setDateFilter}>
            <SelectTrigger
              className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                dateFilter !== "all" &&
                  "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold",
              )}
            >
              <SelectValue placeholder="Date" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Time</SelectItem>
              <SelectItem value="today">Today</SelectItem>
              <SelectItem value="yesterday">Yesterday</SelectItem>
              <SelectItem value="7days">Last 7 Days</SelectItem>
              <SelectItem value="30days">Last 30 Days</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Sort Filter */}
        <div className="w-[140px]">
          <Select value={sortBy} onValueChange={setSortBy}>
            <SelectTrigger
              className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                sortBy !== "all" &&
                  "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold",
              )}
            >
              <SelectValue placeholder="Sort by" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Sort by</SelectItem>
              <SelectItem value="newest">Newest First</SelectItem>
              <SelectItem value="oldest">Oldest First</SelectItem>
              <SelectItem value="title_asc">Title (A-Z)</SelectItem>
              <SelectItem value="duration_desc">Longest First</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Reset button */}
        {hasActiveFilters && (
          <SimpleTooltip content="Reset all active filters">
            <Button
              variant="ghost"
              onClick={resetFilters}
              className="h-10 px-3 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 rounded-xl gap-1.5"
            >
              <RotateCcw className="h-3.5 w-3.5" />
              <span className="hidden md:inline">Reset</span>
            </Button>
          </SimpleTooltip>
        )}
      </div>
    </div>
  );
}