'use client';

import React from 'react';
import {
  FiSearch,
  FiX,
  FiRefreshCw,
  FiBarChart2,
  FiFilter,
  FiCalendar,
  FiFileText,
  FiUser,
} from 'react-icons/fi';
import type { PreviousNcUserOption } from '@/lib/api/types/previous-nc.types';

export type NcSourceFilter = 'all' | 'QRS' | 'TQS' | 'NEW';
export type NcStatusFilter = 'all' | 'open' | 'closed';
export type NcTypeFilter = 'all' | 'Major' | 'Minor' | 'Observation';

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

  sourceFilter: NcSourceFilter;
  setSourceFilter: (v: NcSourceFilter) => void;

  statusFilter: NcStatusFilter;
  setStatusFilter: (v: NcStatusFilter) => void;

  ncTypeFilter: NcTypeFilter;
  setNcTypeFilter: (v: NcTypeFilter) => void;

  auditTypeFilter: string;
  setAuditTypeFilter: (v: string) => void;

  userFilter: string;
  setUserFilter: (v: string) => void;
  availableUsers: PreviousNcUserOption[];

  dateFrom: string;
  setDateFrom: (v: string) => void;
  dateTo: string;
  setDateTo: (v: string) => void;
  // 🆕 year + month (used by Audit-Status view)
  year: number;
  setYear: (v: number) => void;
  month: number | 'all';
  setMonth: (v: number | 'all') => void;
  showMonthYear?: boolean;   // only show these in audit-status mode
  clearFilters: () => void;
  onRefresh: () => void;
  onReports: () => void;
  onAnalyticsToggle: () => void;
  showAnalytics: boolean;
}

export default function PreviousNcFilters({
  searchTerm,
  setSearchTerm,
  sourceFilter,
  setSourceFilter,
  statusFilter,
  setStatusFilter,
  ncTypeFilter,
  setNcTypeFilter,
  auditTypeFilter,
  setAuditTypeFilter,
  userFilter,
  setUserFilter,
  availableUsers,
  dateFrom,
  setDateFrom,
  dateTo,
  setDateTo,
  year,
  setYear,
  month,
  setMonth,
  showMonthYear,
  clearFilters,
  onRefresh,
  onReports,
  onAnalyticsToggle,
  showAnalytics,
}: Props) {
  const activeCount =
    (searchTerm ? 1 : 0) +
    (sourceFilter !== 'all' ? 1 : 0) +
    (statusFilter !== 'all' ? 1 : 0) +
    (ncTypeFilter !== 'all' ? 1 : 0) +
    (auditTypeFilter !== 'all' ? 1 : 0) +
    (userFilter !== 'all' ? 1 : 0) +
    (dateFrom ? 1 : 0) +
    (dateTo ? 1 : 0);

  return (
    <div
      style={{
        background: '#ffffff',
        border: '1px solid #e2e8f0',
        borderRadius: 12,
        padding: 16,
        marginBottom: 14,
        display: 'flex',
        flexDirection: 'column',
        gap: 14,
        boxShadow:
          '0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04)',
      }}
    >
      {/* ─── Top row: search + action buttons ─── */}
      <div
        style={{
          display: 'flex',
          gap: 10,
          alignItems: 'center',
          flexWrap: 'wrap',
        }}
      >
        {/* Search */}
        <div style={{ position: 'relative', flex: '1 1 320px', minWidth: 280 }}>
          <FiSearch
            size={14}
            strokeWidth={2.2}
            style={{
              position: 'absolute',
              left: 13,
              top: '50%',
              transform: 'translateY(-50%)',
              color: '#94a3b8',
              pointerEvents: 'none',
            }}
          />
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder="Search by NC id, company, contact…"
            style={{
              width: '100%',
              background: '#f8fafc',
              border: `1px solid ${searchTerm ? '#0f766e' : '#e2e8f0'}`,
              borderRadius: 9,
              padding: '10px 36px 10px 38px',
              fontSize: 13,
              fontWeight: 500,
              color: '#0f172a',
              height: 40,
              outline: 'none',
              transition: 'all 0.15s',
            }}
            onFocus={(e) => {
              e.currentTarget.style.background = '#fff';
              e.currentTarget.style.borderColor = '#0f766e';
              e.currentTarget.style.boxShadow =
                '0 0 0 3px rgba(15,118,110,0.10)';
            }}
            onBlur={(e) => {
              e.currentTarget.style.background = '#f8fafc';
              e.currentTarget.style.borderColor = searchTerm
                ? '#0f766e'
                : '#e2e8f0';
              e.currentTarget.style.boxShadow = 'none';
            }}
          />
          {searchTerm && (
            <button
              onClick={() => setSearchTerm('')}
              aria-label="Clear search"
              style={{
                position: 'absolute',
                right: 10,
                top: '50%',
                transform: 'translateY(-50%)',
                background: '#e2e8f0',
                border: 'none',
                cursor: 'pointer',
                padding: 0,
                width: 18,
                height: 18,
                borderRadius: 9,
                color: '#475569',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <FiX size={11} strokeWidth={2.5} />
            </button>
          )}
        </div>

        {/* Reports button */}
        <button
          onClick={onReports}
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 7,
            padding: '10px 16px',
            background: 'linear-gradient(135deg, #0f766e 0%, #14b8a6 100%)',
            color: '#fff',
            border: 'none',
            borderRadius: 9,
            fontSize: 13,
            fontWeight: 700,
            cursor: 'pointer',
            height: 40,
            boxShadow:
              '0 1px 3px rgba(15,118,110,0.30), 0 4px 12px rgba(15,118,110,0.20)',
            whiteSpace: 'nowrap',
            letterSpacing: '-0.01em',
            transition: 'transform 0.12s',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-1px)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <FiFileText size={13} strokeWidth={2.4} />
          Reports
        </button>

        {/* Analytics button */}
        <button
          onClick={onAnalyticsToggle}
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 7,
            padding: '10px 16px',
            background: showAnalytics
              ? '#6d28d9'
              : 'linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%)',
            color: '#fff',
            border: showAnalytics ? '2px solid #c4b5fd' : 'none',
            borderRadius: 9,
            fontSize: 13,
            fontWeight: 700,
            cursor: 'pointer',
            height: 40,
            boxShadow:
              '0 1px 3px rgba(124,58,237,0.35), 0 4px 12px rgba(124,58,237,0.25)',
            whiteSpace: 'nowrap',
            letterSpacing: '-0.01em',
            transition: 'transform 0.12s',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-1px)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <FiBarChart2 size={13} strokeWidth={2.4} />
          {showAnalytics ? 'Hide Analytics' : 'Analytics'}
        </button>

        {/* Refresh icon */}
        <button
          onClick={onRefresh}
          title="Refresh"
          aria-label="Refresh"
          style={{
            width: 40,
            height: 40,
            background: '#fff',
            border: '1px solid #e2e8f0',
            borderRadius: 9,
            cursor: 'pointer',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: '#475569',
            transition: 'all 0.15s',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = '#f8fafc';
            e.currentTarget.style.borderColor = '#94a3b8';
            e.currentTarget.style.color = '#0f172a';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = '#fff';
            e.currentTarget.style.borderColor = '#e2e8f0';
            e.currentTarget.style.color = '#475569';
          }}
        >
          <FiRefreshCw size={14} strokeWidth={2.2} />
        </button>
      </div>

      {/* ─── Bottom row: filter selects ─── */}
      <div
        style={{
          display: 'flex',
          gap: 10,
          alignItems: 'center',
          flexWrap: 'wrap',
          paddingTop: 12,
          borderTop: '1px solid #f1f5f9',
        }}
      >
        <span
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            fontSize: 11,
            fontWeight: 800,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: '#0f766e',
            marginRight: 4,
          }}
        >
          <FiFilter size={12} strokeWidth={2.4} />
          Filters
          {activeCount > 0 && (
            <span
              style={{
                background: '#0f766e',
                color: '#fff',
                fontSize: 9,
                fontWeight: 800,
                padding: '1px 6px',
                borderRadius: 99,
                letterSpacing: 0,
              }}
            >
              {activeCount}
            </span>
          )}
        </span>

        <FilterSelect
          value={sourceFilter}
          onChange={(v) => setSourceFilter(v as NcSourceFilter)}
          options={[
            { value: 'all', label: 'All Sources' },
            { value: 'QRS', label: 'QRS only' },
            { value: 'TQS', label: 'TQS only' },
            { value: 'NEW', label: 'New (QRS|TQS)' },
          ]}
        />

        <FilterSelect
          value={statusFilter}
          onChange={(v) => setStatusFilter(v as NcStatusFilter)}
          options={[
            { value: 'all', label: 'All Statuses' },
            { value: 'open', label: 'Open' },
            { value: 'closed', label: 'Closed' },
          ]}
        />

        <FilterSelect
          value={ncTypeFilter}
          onChange={(v) => setNcTypeFilter(v as NcTypeFilter)}
          options={[
            { value: 'all', label: 'All NC Types' },
            { value: 'Major', label: 'Major' },
            { value: 'Minor', label: 'Minor' },
            { value: 'Observation', label: 'Observation' },
          ]}
        />

        <FilterSelect
          value={auditTypeFilter}
          onChange={(v) => setAuditTypeFilter(v)}
          options={[
            { value: 'all', label: 'All Audit Types' },
            { value: 'initial audit', label: 'Initial Audit' },
            { value: 'surveillance(No. 01)', label: 'Surveillance (No. 01)' },
            { value: 'surveillance(No. 02)', label: 'Surveillance (No. 02)' },
            { value: 'Re-Assessment', label: 'Re-Assessment' },
          ]}
        />

        {/* User filter with icon */}
        <UserFilterSelect
          value={userFilter}
          onChange={setUserFilter}
          users={availableUsers}
        />
        {/* 🆕 Year + Month — only shown in audit-status mode */}
        {showMonthYear && (
          <>
            <FilterSelect
              value={String(year)}
              onChange={(v) => setYear(Number(v))}
              options={Array.from({ length: 7 }, (_, i) => {
                const y = new Date().getFullYear() - i;
                return { value: String(y), label: String(y) };
              })}
            />
            <FilterSelect
              value={month === 'all' ? 'all' : String(month)}
              onChange={(v) => setMonth(v === 'all' ? 'all' : Number(v))}
              options={[
                { value: 'all', label: 'All Months (Jan–Dec)' },
                { value: '1', label: 'January' },
                { value: '2', label: 'February' },
                { value: '3', label: 'March' },
                { value: '4', label: 'April' },
                { value: '5', label: 'May' },
                { value: '6', label: 'June' },
                { value: '7', label: 'July' },
                { value: '8', label: 'August' },
                { value: '9', label: 'September' },
                { value: '10', label: 'October' },
                { value: '11', label: 'November' },
                { value: '12', label: 'December' },
              ]}
            />
          </>
        )}
        <DateInput label="From" value={dateFrom} onChange={setDateFrom} />
        <DateInput label="To" value={dateTo} onChange={setDateTo} />

        {activeCount > 0 && (
          <button
            onClick={clearFilters}
            style={{
              marginLeft: 'auto',
              padding: '7px 12px',
              background: '#fef2f2',
              border: '1px solid #fecaca',
              borderRadius: 7,
              cursor: 'pointer',
              fontSize: 11,
              fontWeight: 700,
              color: '#dc2626',
              height: 34,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 5,
              transition: 'all 0.15s',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#fee2e2';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = '#fef2f2';
            }}
          >
            <FiX size={11} strokeWidth={2.5} />
            Clear filters
          </button>
        )}
      </div>
    </div>
  );
}

// ─── Sub-components ─────────────────────────────────────────────────

function FilterSelect({
  value,
  onChange,
  options,
}: {
  value: string;
  onChange: (v: string) => void;
  options: { value: string; label: string }[];
}) {
  const isActive = !!value && value !== 'all';
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      style={{
        appearance: 'none',
        WebkitAppearance: 'none',
        MozAppearance: 'none',
        background: '#fff',
        border: '1px solid #e2e8f0',
        borderRadius: 7,
        padding: '7px 28px 7px 12px',
        fontSize: 12,
        fontWeight: 600,
        color: '#1f2937',
        cursor: 'pointer',
        height: 34,
        outline: 'none',
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'right 8px center',
        transition: 'all 0.15s',
      }}
    >
      {options.map((opt) => (
        <option key={opt.value} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </select>
  );
}

function UserFilterSelect({
  value,
  onChange,
  users,
}: {
  value: string;
  onChange: (v: string) => void;
  users: PreviousNcUserOption[];
}) {
  const isActive = !!value && value !== 'all';
  return (
    <div
      style={{
        position: 'relative',
        display: 'inline-flex',
        alignItems: 'center',
      }}
    >
      <FiUser
        size={11}
        strokeWidth={2.4}
        style={{
          position: 'absolute',
          left: 9,
          top: '50%',
          transform: 'translateY(-50%)',
          color: '#64748b',
          pointerEvents: 'none',
        }}
      />
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        style={{
          appearance: 'none',
          WebkitAppearance: 'none',
          MozAppearance: 'none',
          background: '#fff',
          border: '1px solid #e2e8f0',
          borderRadius: 7,
          padding: '7px 28px 7px 26px',
          fontSize: 12,
          fontWeight: 600,
          color: '#1f2937',
          cursor: 'pointer',
          height: 34,
          outline: 'none',
          maxWidth: 200,
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'right 8px center',
          textOverflow: 'ellipsis',
          transition: 'all 0.15s',
        }}
      >
        <option value="all">
          All Users{users.length > 0 ? ` (${users.length})` : ''}
        </option>
        {users.map((u) => (
          <option key={u.name} value={u.name}>
            {u.name}
            {u.count !== undefined ? ` (${u.count})` : ''}
          </option>
        ))}
      </select>
    </div>
  );
}

function DateInput({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
}) {
  const isActive = !!value;
  return (
    <label
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
        fontSize: 11,
        color: '#475569',
        fontWeight: 700,
        letterSpacing: '0.02em',
      }}
    >
      <FiCalendar size={11} strokeWidth={2.4} color="#64748b" />
      {label}:
      <input
        type="date"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        style={{
          background: '#fff',
          border: '1px solid #e2e8f0',
          borderRadius: 7,
          padding: '6px 10px',
          fontSize: 12,
          fontWeight: 600,
          color: '#1f2937',
          cursor: 'pointer',
          height: 34,
          outline: 'none',
          fontFamily: 'inherit',
          transition: 'all 0.15s',
        }}
      />
    </label>
  );
}