'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 { FiBarChart2, FiRefreshCw, FiEyeOff } from 'react-icons/fi';
import { CLIENT_GROUP_OPTIONS } from '@/lib/api/mappers/leads.mappers';
import type {
  LeadStatus,
  LeadPriority,
  SelectableClientGroup,
} from '@/lib/api/types/leads.types';

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;

  statusFilter: LeadStatus | 'all';
  setStatusFilter: (v: LeadStatus | 'all') => void;

  /** 🆕 The client group dropdown. QRS also matches legacy QRS_B rows. */
  clientGroupFilter: SelectableClientGroup | 'all';
  setClientGroupFilter: (v: SelectableClientGroup | 'all') => void;

  priorityFilter: LeadPriority | 'all';
  setPriorityFilter: (v: LeadPriority | 'all') => void;

  assigneeFilter: number | 'all';
  setAssigneeFilter: (v: number | 'all') => void;
  assignableUsers: { id: number; label: string }[];

  dateFrom: string;
  setDateFrom: (v: string) => void;
  dateTo: string;
  setDateTo: (v: string) => void;

  clearFilters: () => void;
  onRefresh?: () => void;

  onAnalyticsToggle?: () => void;
  showAnalytics?: boolean;
}

const STATUS_OPTIONS: { value: LeadStatus | 'all'; label: string }[] = [
  { value: 'all', label: 'All Statuses' },
  { value: 'New', label: '✨ New' },
  { value: 'Interested', label: '🔥 Interested' },
  { value: 'Converted', label: '✅ Converted' },
  { value: 'Lost', label: '✕ Lost' },
];

const PRIORITY_OPTIONS: { value: LeadPriority | 'all'; label: string }[] = [
  { value: 'all', label: 'All Priorities' },
  { value: 'High', label: '🔴 High' },
  { value: 'Medium', label: '🟠 Medium' },
  { value: 'Low', label: '⚪ Low' },
];

export const LeadsFilters = ({
  searchTerm,
  setSearchTerm,
  statusFilter,
  setStatusFilter,
  clientGroupFilter,
  setClientGroupFilter,
  priorityFilter,
  setPriorityFilter,
  assigneeFilter,
  setAssigneeFilter,
  assignableUsers,
  dateFrom,
  setDateFrom,
  dateTo,
  setDateTo,
  clearFilters,
  onRefresh,
  onAnalyticsToggle,
  showAnalytics = false,
}: Props) => {
  const activeFilters = [
    searchTerm,
    statusFilter !== 'all' ? statusFilter : null,
    clientGroupFilter !== 'all' ? clientGroupFilter : null,
    priorityFilter !== 'all' ? priorityFilter : null,
    assigneeFilter !== 'all' ? assigneeFilter : null,
    dateFrom,
    dateTo,
  ].filter(Boolean).length;

  const selectStyle = (active: boolean, accent: string, tint: string) => ({
    minWidth: 150,
    padding: '7px 12px',
    borderRadius: 8,
    border: active ? `1.5px solid ${accent}` : '1px solid #cbd5e1',
    background: active ? tint : '#fff',
    fontSize: 13,
    fontWeight: 600,
    color: active ? accent : '#475569',
    cursor: 'pointer',
    outline: 'none',
  });

  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 leads"
            placeholder="Search by lead code, company, contact, email, phone..."
            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, #10b981 0%, #059669 100%)'
                  : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: 'white',
                border: 'none',
                borderRadius: 8,
                fontSize: '0.875rem',
                fontWeight: 600,
                cursor: 'pointer',
                whiteSpace: 'nowrap',
                transition: 'transform 0.15s',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-1px)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
              }}
            >
              {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}
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'center',
          gap: 10,
          padding: '12px 14px',
          background: '#f8fafc',
          border: '1px solid #e2e8f0',
          borderRadius: 10,
        }}
      >
        <span
          style={{
            fontSize: 11,
            fontWeight: 700,
            color: '#64748b',
            textTransform: 'uppercase',
            letterSpacing: '0.05em',
            marginRight: 4,
          }}
        >
          🔍 Filters:
        </span>

        {/* Status */}
        <select
          className={styles.filterSelect}
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value as LeadStatus | 'all')}
          style={selectStyle(statusFilter !== 'all', '#0f766e', '#f0fdfa')}
        >
          {STATUS_OPTIONS.map((s) => (
            <option key={s.value} value={s.value}>
              {s.label}
            </option>
          ))}
        </select>

        {/* 🆕 Client group */}
        <select
          className={styles.filterSelect}
          aria-label="Filter by client group"
          value={clientGroupFilter}
          onChange={(e) =>
            setClientGroupFilter(e.target.value as SelectableClientGroup | 'all')
          }
          title="QRS includes legacy QRS_B records"
          style={selectStyle(clientGroupFilter !== 'all', '#4338ca', '#eef2ff')}
        >
          <option value="all">All Client Groups</option>
          {CLIENT_GROUP_OPTIONS.map((g) => (
            <option key={g.value} value={g.value}>
              {g.label}
            </option>
          ))}
        </select>

        {/* Priority */}
        <select
          className={styles.filterSelect}
          value={priorityFilter}
          onChange={(e) => setPriorityFilter(e.target.value as LeadPriority | 'all')}
          style={selectStyle(priorityFilter !== 'all', '#b45309', '#fffbeb')}
        >
          {PRIORITY_OPTIONS.map((p) => (
            <option key={p.value} value={p.value}>
              {p.label}
            </option>
          ))}
        </select>

        {/* Owner */}
        <select
          className={styles.filterSelect}
          aria-label="Filter by owner"
          value={assigneeFilter}
          onChange={(e) =>
            setAssigneeFilter(
              e.target.value === 'all' ? 'all' : Number(e.target.value),
            )
          }
          style={selectStyle(assigneeFilter !== 'all', '#7c3aed', '#f5f3ff')}
        >
          <option value="all">All Owners</option>
          {assignableUsers.map((u) => (
            <option key={u.id} value={u.id}>
              {u.label}
            </option>
          ))}
        </select>

        {/* Created date range */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 6,
            padding: '4px 10px',
            borderRadius: 8,
            background: dateFrom || dateTo ? '#ecfeff' : 'transparent',
            border:
              dateFrom || dateTo ? '1px solid #67e8f9' : '1px solid transparent',
          }}
        >
          <span style={{ fontSize: 11, color: '#64748b', fontWeight: 600 }}>
            From:
          </span>
          <input
            type="date"
            value={dateFrom}
            onChange={(e) => setDateFrom(e.target.value)}
            style={{
              padding: '6px 10px',
              borderRadius: 6,
              border: '1px solid #cbd5e1',
              fontSize: 12,
              color: '#475569',
              outline: 'none',
            }}
          />
          <span style={{ fontSize: 11, color: '#64748b', fontWeight: 600 }}>
            To:
          </span>
          <input
            type="date"
            value={dateTo}
            onChange={(e) => setDateTo(e.target.value)}
            style={{
              padding: '6px 10px',
              borderRadius: 6,
              border: '1px solid #cbd5e1',
              fontSize: 12,
              color: '#475569',
              outline: 'none',
            }}
          />
        </div>

        {activeFilters > 0 && (
          <button
            onClick={clearFilters}
            type="button"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 5,
              padding: '7px 14px',
              borderRadius: 8,
              border: '1px solid #fca5a5',
              background: '#fef2f2',
              color: '#dc2626',
              cursor: 'pointer',
              fontSize: 12,
              fontWeight: 700,
              marginLeft: 'auto',
            }}
            title={`Clear ${activeFilters} active filter${activeFilters > 1 ? 's' : ''}`}
          >
            ✕ Clear ({activeFilters})
          </button>
        )}
      </div>
    </div>
  );
};

export default LeadsFilters;