"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";
import { FaSearchLocation } from "react-icons/fa";
import { FiRefreshCw, FiBarChart2, FiEyeOff } from "react-icons/fi";

export type PortalStatusFilter = "all" | "ACTIVE" | "INVITED" | "DISABLED";

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  statusFilter: PortalStatusFilter;
  setStatusFilter: (v: PortalStatusFilter) => void;
  companyFilter: number | "all";
  setCompanyFilter: (v: number | "all") => void;
  companies: { id: number; name: string }[];
  clearFilters: () => void;
  onRefresh?: () => void;
  showAnalytics?: boolean;
  onAnalyticsToggle?: () => void;
}

const STATUS_OPTIONS: { value: PortalStatusFilter; label: string }[] = [
  { value: "all", label: "All Statuses" },
  { value: "ACTIVE", label: "🟢 Active" },
  { value: "INVITED", label: "📩 Invited" },
  { value: "DISABLED", label: "🔒 Disabled" },
];

export default function ClientPortalFilters({
  searchTerm,
  setSearchTerm,
  statusFilter,
  setStatusFilter,
  companyFilter,
  setCompanyFilter,
  companies,
  clearFilters,
  onRefresh,
  showAnalytics = false,
  onAnalyticsToggle,
}: Props) {
  const activeFilterCount = [
    statusFilter !== "all",
    companyFilter !== "all",
  ].filter(Boolean).length;

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

        <div className={styles.toolbarActions}>
          {onAnalyticsToggle && (
            <button
              title={showAnalytics ? "Hide analytics" : "Show analytics"}
              onClick={onAnalyticsToggle}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 6,
                padding: "8px 16px",
                background: showAnalytics
                  ? "linear-gradient(135deg, #475569 0%, #64748b 100%)"
                  : "linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%)",
                color: "white",
                border: "none",
                borderRadius: 8,
                fontSize: "0.875rem",
                fontWeight: 600,
                cursor: "pointer",
                boxShadow: "0 2px 8px rgba(109,40,217,0.3)",
                whiteSpace: "nowrap",
              }}
            >
              {showAnalytics ? (
                <FiEyeOff size={14} />
              ) : (
                <FiBarChart2 size={14} />
              )}
              {showAnalytics ? "Hide Stats" : "Stats"}
            </button>
          )}

          {onRefresh && (
            <button
              className={styles.btnIcon}
              title="Refresh"
              onClick={onRefresh}
            >
              <FiRefreshCw size={14} />
            </button>
          )}
        </div>
      </div>

      {/* Bottom Row: Filters */}
      <div
        className={styles.toolbarFilters}
        style={{ flexWrap: "wrap", gap: 8 }}
      >
        {/* Status */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={statusFilter}
            onChange={(e) =>
              setStatusFilter(e.target.value as PortalStatusFilter)
            }
            style={{
              borderColor: statusFilter !== "all" ? "#8b14d4" : undefined,
              fontWeight: statusFilter !== "all" ? 600 : undefined,
            }}
          >
            {STATUS_OPTIONS.map((s) => (
              <option key={s.value} value={s.value}>
                {s.label}
              </option>
            ))}
          </select>
        </div>

        {/* Company filter */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={companyFilter}
            onChange={(e) =>
              setCompanyFilter(
                e.target.value === "all" ? "all" : Number(e.target.value),
              )
            }
            style={{
              minWidth: 200,
              borderColor: companyFilter !== "all" ? "#0891b2" : undefined,
              fontWeight: companyFilter !== "all" ? 600 : undefined,
            }}
          >
            <option value="all">🏢 All Companies</option>
            {companies.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
        </div>

        {/* Clear */}
        {activeFilterCount > 0 && (
          <button
            className={styles.clearFiltersBtn}
            onClick={clearFilters}
            title="Clear all filters"
          >
            ✕ Clear ({activeFilterCount})
          </button>
        )}
      </div>
    </div>
  );
}