"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 JobFiltersProps {
  searchTerm:         string;
  setSearchTerm:      (v: string) => void;
  stageFilter:        string;
  setStageFilter:     (v: string) => void;
  startDate:          string;
  setStartDate:       (v: string) => void;
  endDate:            string;
  setEndDate:         (v: string) => void;
  clearFilters:       () => void;
  onRefresh?:         () => void;
  onAnalyticsToggle?: () => void;
  showAnalytics?:     boolean;
}

export const JobFilters = ({
  searchTerm, setSearchTerm,
  stageFilter, setStageFilter,
  startDate, setStartDate,
  endDate, setEndDate,
  clearFilters, onRefresh, onAnalyticsToggle, showAnalytics = false,
}: JobFiltersProps) => {
  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 Jobs"
            placeholder="Search by company, job code, auditor, template..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

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