/**
 * Log Filters
 * Enterprise Logging System — Admin Dashboard
 *
 * Reusable filter bar for log tables: keyword, date range, and an
 * optional typed selector (e.g., event/status/severity/type).
 */

'use client';

import { useState } from 'react';

interface LogFiltersProps {
  onApply: (filters: { query?: string; from?: string; to?: string; [key: string]: any }) => void;
  typeOptions?: Array<{ label: string; value: string }>;
  typeLabel?: string;
  typeValue?: string;
  onTypeChange?: (value: string) => void;
  showQuery?: boolean;
  queryPlaceholder?: string;
}

export function LogFilters({
  onApply,
  typeOptions,
  typeLabel = 'Type',
  typeValue,
  onTypeChange,
  showQuery = true,
  queryPlaceholder = 'Search...',
}: LogFiltersProps) {
  const [query, setQuery] = useState('');
  const [from, setFrom] = useState('');
  const [to, setTo] = useState('');

  const handleApply = () => {
    onApply({ query: query || undefined, from: from || undefined, to: to || undefined });
  };

  const handleReset = () => {
    setQuery('');
    setFrom('');
    setTo('');
    onApply({});
    if (onTypeChange && typeValue) onTypeChange('');
  };

  return (
    <div className="flex flex-wrap items-end gap-3 rounded-xl border border-white/5 bg-slate-900/50 p-3">
      {typeOptions && onTypeChange && (
        <div className="flex flex-col gap-1">
          <label className="text-xs font-medium text-slate-400">{typeLabel}</label>
          <select
            value={typeValue ?? ''}
            onChange={(e) => onTypeChange(e.target.value)}
            className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-emerald-400/50"
          >
            <option value="">All</option>
            {typeOptions.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        </div>
      )}

      {showQuery && (
        <div className="flex min-w-[220px] flex-1 flex-col gap-1">
          <label className="text-xs font-medium text-slate-400">Search</label>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleApply()}
            placeholder={queryPlaceholder}
            className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none placeholder:text-slate-600 focus:border-emerald-400/50"
          />
        </div>
      )}

      <div className="flex flex-col gap-1">
        <label className="text-xs font-medium text-slate-400">From</label>
        <input
          type="date"
          value={from}
          onChange={(e) => setFrom(e.target.value)}
          className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-emerald-400/50"
        />
      </div>

      <div className="flex flex-col gap-1">
        <label className="text-xs font-medium text-slate-400">To</label>
        <input
          type="date"
          value={to}
          onChange={(e) => setTo(e.target.value)}
          className="rounded-lg border border-white/10 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-emerald-400/50"
        />
      </div>

      <div className="flex gap-2">
        <button
          onClick={handleApply}
          className="rounded-lg bg-emerald-500 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-400"
        >
          Apply
        </button>
        <button
          onClick={handleReset}
          className="rounded-lg border border-white/10 px-4 py-2 text-sm font-medium text-slate-300 hover:bg-white/5"
        >
          Reset
        </button>
      </div>
    </div>
  );
}