import React from 'react';

export type OrderFilters = {
  dateField: 'creationDate' | 'deliveryDate' | 'shipdt';
  dateFrom: string;
  dateTo: string;
  tracking: string;
  po: string;
  customerName: string;
  itemCode: string;
  farmName: string;
};

type Props = {
  filters: OrderFilters;
  onChange: (filters: OrderFilters) => void;
  onSearch: () => void;
  onClear: () => void;
};

export default function AdvancedFilters({ filters, onChange, onSearch, onClear }: Props) {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    onChange({ ...filters, [name]: value });
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') onSearch();
  };

  const labelStyle: React.CSSProperties = { display: 'block', fontSize: '0.72rem', fontWeight: 700, marginBottom: '0.2rem', color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' };

  return (
    <div style={{ background: '#f8fafc', padding: '1.25rem', borderRadius: 'var(--radius-lg)', border: '1px solid #e2e8f0', marginBottom: '1.5rem' }}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', marginBottom: '1rem', alignItems: 'flex-start' }}>
        
        {/* Rango de Fechas */}
        <div style={{ display: 'flex', gap: '0.5rem', flexDirection: 'column', flex: '0 0 auto' }}>
          <label style={labelStyle}>Rango de Fechas</label>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <select name="dateField" value={filters.dateField} onChange={handleChange} className="input-field" style={{ padding: '0.4rem', fontSize: '0.8rem', width: '110px' }}>
              <option value="creationDate">F. Orden</option>
              <option value="deliveryDate">F. Entrega</option>
              <option value="shipdt">F. Vuelo</option>
            </select>
            <input type="date" name="dateFrom" value={filters.dateFrom} onChange={handleChange} onKeyDown={handleKeyDown} className="input-field" style={{ padding: '0.4rem', fontSize: '0.8rem' }} title="Desde" />
            <input type="date" name="dateTo" value={filters.dateTo} onChange={handleChange} onKeyDown={handleKeyDown} className="input-field" style={{ padding: '0.4rem', fontSize: '0.8rem' }} title="Hasta" />
          </div>
        </div>

        {/* Campos de Texto */}
        <div style={{ flex: '1 1 150px' }}>
          <label style={labelStyle}>Tracking</label>
          <input name="tracking" placeholder="Ej: 1Z9999..." value={filters.tracking} onChange={handleChange} onKeyDown={handleKeyDown} className="input-field" style={{ width: '100%' }} />
        </div>

        <div style={{ flex: '1 1 150px' }}>
          <label style={labelStyle}>PO Number</label>
          <input name="po" placeholder="Ej: PO-123" value={filters.po} onChange={handleChange} onKeyDown={handleKeyDown} className="input-field" style={{ width: '100%' }} />
        </div>

        <div style={{ flex: '1 1 150px' }}>
          <label style={labelStyle}>Cliente (Ship To)</label>
          <input name="customerName" placeholder="Nombre cliente" value={filters.customerName} onChange={handleChange} onKeyDown={handleKeyDown} className="input-field" style={{ width: '100%' }} />
        </div>

        <div style={{ flex: '1 1 150px' }}>
          <label style={labelStyle}>Item Code</label>
          <input name="itemCode" placeholder="Ej: ROSES" value={filters.itemCode} onChange={handleChange} onKeyDown={handleKeyDown} className="input-field" style={{ width: '100%' }} />
        </div>

        <div style={{ flex: '1 1 150px' }}>
          <label style={labelStyle}>Finca (Farm)</label>
          <input name="farmName" placeholder="Nombre finca" value={filters.farmName} onChange={handleChange} onKeyDown={handleKeyDown} className="input-field" style={{ width: '100%' }} />
        </div>

      </div>

      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.75rem' }}>
        <button className="btn-secondary" onClick={onClear}>Limpiar Filtros</button>
        <button className="btn-primary" onClick={onSearch}>Buscar</button>
      </div>
    </div>
  );
}