"use client";

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

interface TemplateFiltersProps {
  searchTerm:          string;
  setSearchTerm:       (v: string) => void;
  stageFilter:         string;
  setStageFilter:      (v: string) => void;
  typeFilter:          string;
  setTypeFilter:       (v: string) => void;
  clearFilters:        () => void;
  onRefresh?:          () => void;
  onAnalyticsToggle?:  () => void;
  showAnalytics?:      boolean;
}

export const TemplateFilters = ({
  searchTerm, setSearchTerm,
  stageFilter, setStageFilter,
  typeFilter, setTypeFilter,
  clearFilters, onRefresh, onAnalyticsToggle, showAnalytics = false,
}: TemplateFiltersProps) => {
  const router = useRouter();

  return (
    <div className={styles.toolbar}>
      {/* Top Row */}
      <div className={styles.toolbarTop}>
        <div className={styles.searchBox}>
          <span className={styles.searchIcon}><FaSearchLocation /></span>
          <input
            type="text"
            aria-label="Search Templates"
            placeholder="Search by name, file path, version..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          <button
            title="View Template Reports"
            onClick={() => router.push("/modules/templates/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>

          {onAnalyticsToggle && (
            <button
              title={showAnalytics ? "Hide Analytics" : "Show Analytics"}
              onClick={onAnalyticsToggle}
              style={{ display: "flex", alignItems: "center", gap: "6px", padding: "8px 16px", background: showAnalytics ? "linear-gradient(135deg,#10b981,#059669)" : "linear-gradient(135deg,#667eea,#764ba2)", color: "white", border: "none", borderRadius: "8px", fontSize: "0.875rem", fontWeight: "600", cursor: "pointer" }}
            >
              {showAnalytics ? <><FiEyeOff size={16} /> Hide Analytics</> : <><FiBarChart2 size={16} /> Analytics</>}
            </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: Filters */}
      <div className={styles.toolbarFilters}>
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Stage:</label>
          <select className={styles.filterSelect} value={stageFilter} onChange={(e) => setStageFilter(e.target.value)}>
            <option value="all">All Stages</option>
            <option value="Stage 1">Stage 1</option>
            <option value="Stage 2">Stage 2</option>
          </select>
        </div>
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Type:</label>
          <select className={styles.filterSelect} value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)}>
            <option value="all">All Types</option>
            <option value="DOCUMENT">DOCUMENT</option>
            <option value="CERTIFICATE">CERTIFICATE</option>
          </select>
        </div>
        <button className={styles.clearFiltersBtn} onClick={clearFilters} type="button">✕ Clear Filters</button>
      </div>
    </div>
  );
};

export default TemplateFilters;