"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";

import { FaSearchLocation } from "react-icons/fa";
import { FiRefreshCw } from "react-icons/fi";
import { UserFiltersProps } from "@/lib/api/types/user.types";

export const UserFilters = ({
  searchTerm,
  setSearchTerm,
  statusFilter,
  setStatusFilter,
  roleFilter,
  setRoleFilter,
  roles,
  clearFilters,
  onRefresh,
}: UserFiltersProps) => {
  const hasActiveFilters =
    !!searchTerm || statusFilter !== "all" || roleFilter !== "all";

  return (
    <div className={styles.toolbar}>

      {/* ── Top Row: Search + Actions ── */}
      <div className={styles.toolbarTop}>
        <div className={styles.searchBox}>
          <span className={styles.searchIcon}>
            <FaSearchLocation />
          </span>
          <input
            type="text"
            aria-label="Search Users"
            placeholder="Search by name or email..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          <button
            className={styles.btnIcon}
            title="Refresh Data"
            onClick={onRefresh}
          >
            <FiRefreshCw size={16} />
          </button>
        </div>
      </div>

      {/* ── Bottom Row: Filters ── */}
      <div className={styles.toolbarFilters}>

        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Status:</label>
          <select
            className={styles.filterSelect}
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            <option value="all">All Status</option>
            <option value="active">Active</option>
            <option value="pending">Pending Approval</option>
            <option value="unverified">Unverified</option>
            <option value="rejected">Rejected</option>
            <option value="inactive">Inactive</option>
          </select>
        </div>

        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Role:</label>
          <select
            className={styles.filterSelect}
            value={roleFilter}
            onChange={(e) => setRoleFilter(e.target.value)}
          >
            <option value="all">All Roles</option>
            {roles.map((r) => (
              <option key={r.id} value={String(r.id)}>
                {r.name}
              </option>
            ))}
          </select>
        </div>

        {hasActiveFilters && (
          <button
            className={styles.clearFiltersBtn}
            onClick={clearFilters}
            type="button"
          >
            ✕ Clear Filters
          </button>
        )}
      </div>
    </div>
  );
};

export default UserFilters;