/**
 * Advanced Booking Filters Component
 */

'use client';

import React, { useState } from 'react';
import { useTranslations } from 'next-intl';
import { BookingFilters as IBookingFilters, BookingStatus } from '@/types/booking';

interface BookingFiltersProps {
  filters: IBookingFilters;
  onFiltersChange: (filters: Partial<IBookingFilters>) => void;
  onReset: () => void;
}

export const BookingFilters: React.FC<BookingFiltersProps> = ({
  filters,
  onFiltersChange,
  onReset,
}) => {
  const t = useTranslations('components.bookingFilters');
  const [isExpanded, setIsExpanded] = useState(false);

  const handleStatusChange = (status: BookingStatus) => {
    const currentStatuses = filters.status || [];
    const newStatuses = currentStatuses.includes(status)
      ? currentStatuses.filter((s: BookingStatus) => s !== status)
      : [...currentStatuses, status];

    onFiltersChange({ status: newStatuses });
  };

  const activeCount = Object.keys(filters).filter(key => {
    const value = filters[key as keyof IBookingFilters];
    return Array.isArray(value) ? value.length > 0 : Boolean(value);
  }).length;

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-gray-900">{t('title')}</h3>
        <div className="flex gap-2">
          <button
            onClick={() => setIsExpanded(!isExpanded)}
            className="text-sm text-blue-600 hover:text-blue-700"
          >
            {isExpanded ? t('showLess') : t('showMore')}
          </button>
          <button onClick={onReset} className="text-sm text-gray-600 hover:text-gray-700">
            {t('reset')}
          </button>
        </div>
      </div>

      {/* Always visible filters */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        {/* Search */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">{t('search')}</label>
          <input
            type="text"
            placeholder={t('searchPlaceholder')}
            value={filters.search || ''}
            onChange={e => onFiltersChange({ search: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {/* Carrier */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">{t('carrier')}</label>
          <input
            type="text"
            placeholder={t('carrierPlaceholder')}
            value={filters.carrier || ''}
            onChange={e => onFiltersChange({ carrier: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {/* Origin Port */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">{t('originPort')}</label>
          <input
            type="text"
            placeholder={t('portCodePlaceholder')}
            value={filters.originPort || ''}
            onChange={e => onFiltersChange({ originPort: e.target.value })}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>

      {/* Status filters */}
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">{t('status')}</label>
        <div className="flex flex-wrap gap-2">
          {Object.values(BookingStatus).map((status: BookingStatus) => (
            <button
              key={status as string}
              onClick={() => handleStatusChange(status)}
              className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
                filters.status?.includes(status)
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              {(status as string).replace('_', ' ').toUpperCase()}
            </button>
          ))}
        </div>
      </div>

      {/* Expanded filters */}
      {isExpanded && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-4 border-t border-gray-200">
          {/* Destination Port */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('destinationPort')}
            </label>
            <input
              type="text"
              placeholder={t('portCodePlaceholder')}
              value={filters.destinationPort || ''}
              onChange={e => onFiltersChange({ destinationPort: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* Shipper */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('shipper')}</label>
            <input
              type="text"
              placeholder={t('shipperPlaceholder')}
              value={filters.shipper || ''}
              onChange={e => onFiltersChange({ shipper: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* Consignee */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('consignee')}</label>
            <input
              type="text"
              placeholder={t('consigneePlaceholder')}
              value={filters.consignee || ''}
              onChange={e => onFiltersChange({ consignee: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* Created From */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {t('createdFrom')}
            </label>
            <input
              type="date"
              value={filters.createdFrom || ''}
              onChange={e => onFiltersChange({ createdFrom: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* Created To */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('createdTo')}</label>
            <input
              type="date"
              value={filters.createdTo || ''}
              onChange={e => onFiltersChange({ createdTo: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* ETD From */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('etdFrom')}</label>
            <input
              type="date"
              value={filters.etdFrom || ''}
              onChange={e => onFiltersChange({ etdFrom: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* ETD To */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('etdTo')}</label>
            <input
              type="date"
              value={filters.etdTo || ''}
              onChange={e => onFiltersChange({ etdTo: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* Sort By */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('sortBy')}</label>
            <select
              value={filters.sortBy || 'createdAt'}
              onChange={e => onFiltersChange({ sortBy: e.target.value })}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="createdAt">{t('sortOptions.createdAt')}</option>
              <option value="bookingNumber">{t('sortOptions.bookingNumber')}</option>
              <option value="status">{t('sortOptions.status')}</option>
              <option value="etd">{t('sortOptions.etd')}</option>
              <option value="eta">{t('sortOptions.eta')}</option>
            </select>
          </div>
        </div>
      )}

      {/* Active filters count */}
      {activeCount > 0 && (
        <div className="mt-4 text-sm text-gray-600">{t('activeCount', { count: activeCount })}</div>
      )}
    </div>
  );
};
