"use client";

import React from "react";
import styles from "../../commonstyle/dattabale.module.css";
import { FaSearchLocation } from "react-icons/fa";
import { FcPrint } from "react-icons/fc";
import { FiRefreshCw, FiFileText } from "react-icons/fi";
import { useRouter } from "next/navigation";

interface CountryFiltersProps {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  startDate: string;
  setStartDate: (v: string) => void;
  endDate: string;
  setEndDate: (v: string) => void;
  clearFilters: () => void;
  onRefresh?: () => void;
}

export const CountryFilters = ({
  searchTerm,
  setSearchTerm,
  startDate,
  setStartDate,
  endDate,
  setEndDate,
  clearFilters,
  onRefresh,
}: CountryFiltersProps) => {
  const router = useRouter();

  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 Countries"
            placeholder="Search by name or code..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          <button
            title="View Countries Reports"
            onClick={() => router.push("/modules/countries/report")}
            style={{
              display: "flex", alignItems: "center", gap: "6px",
              padding: "8px 16px",
              background: "linear-gradient(135deg, #0f766e 0%, #14b8a6 100%)",
              color: "white", border: "none", borderRadius: "8px",
              fontSize: "0.875rem", fontWeight: "600", cursor: "pointer",
              boxShadow: "0 2px 8px rgba(15,118,110,0.3)",
            }}
          >
            <FiFileText size={16} /> Reports
          </button>

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

      {/* ── Bottom Row: Date Filters ── */}
      <div className={styles.toolbarFilters}>
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Start Date:</label>
          <input
            type="date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}
            className={styles.filterSelect}
          />
        </div>

        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>End Date:</label>
          <input
            type="date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}
            className={styles.filterSelect}
          />
        </div>

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

export default CountryFilters;