"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";
import type { TrainingStatus } from "@/lib/api/types/training-certificate.types";

export type ScanFilter = "all" | "with_scan" | "pending_scan";

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  statusFilter: TrainingStatus | "all";
  setStatusFilter: (v: TrainingStatus | "all") => void;
  scanFilter: ScanFilter;
  setScanFilter: (v: ScanFilter) => void;
  clearFilters: () => void;
  onRefresh: () => void;
}

export function TrainingFilters({
  searchTerm,
  setSearchTerm,
  statusFilter,
  setStatusFilter,
  scanFilter,
  setScanFilter,
  clearFilters,
  onRefresh,
}: Props) {
  return (
    <div className={styles.toolbar}>
      <div className={styles.toolbarTop}>
        <div className={styles.searchBox}>
          <span className={styles.searchIcon}>🔍</span>
          <input
            className={styles.searchInput}
            placeholder="Search cert no, participant, company, course or batch ref…"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          <button
            className={styles.btnIcon}
            onClick={onRefresh}
            title="Refresh"
            type="button"
          >
            🔄
          </button>
        </div>
      </div>

      <div className={styles.toolbarFilters}>
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={statusFilter}
            onChange={(e) =>
              setStatusFilter(e.target.value as TrainingStatus | "all")
            }
          >
            <option value="all">All Statuses</option>
            <option value="pending_scan">Pending Scan</option>
            <option value="active">Active</option>
            <option value="expired">Expired</option>
            <option value="revoked">Revoked</option>
            <option value="fake">Fake</option>
          </select>
        </div>

        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={scanFilter}
            onChange={(e) => setScanFilter(e.target.value as ScanFilter)}
          >
            <option value="all">All Documents</option>
            <option value="with_scan">Scan Uploaded</option>
            <option value="pending_scan">Scan Pending</option>
          </select>
        </div>

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