'use client';

import React from 'react';
import { Search, Filter, Zap, X } from 'lucide-react';

export interface FilterState {
  readonly searchQuery: string;
  readonly statusFilter: 'all' | 'available' | 'charging' | 'unavailable';
  readonly connectorType: 'all' | 'CCS' | 'CHAdeMO' | 'Type2';
  readonly showOnlyFastChargers: boolean;
}

interface MobileFilterModalProps {
  readonly isOpen: boolean;
  readonly filters: FilterState;
  readonly filteredCount: number;
  readonly totalCount: number;
  readonly onClose: () => void;
  readonly onFiltersChange: (filters: FilterState) => void;
  readonly onClearFilters: () => void;
}

export function MobileFilterModal({
  isOpen,
  filters,
  filteredCount,
  totalCount,
  onClose,
  onFiltersChange,
  onClearFilters,
}: MobileFilterModalProps) {
  if (!isOpen) return null;

  return (
    <>
      {/* Backdrop */}
      <button
        className="fixed inset-0 bg-black/50 z-[9998] lg:hidden backdrop-blur-sm"
        onClick={onClose}
        onKeyDown={(e) => e.key === 'Escape' && onClose()}
        aria-label="Close filter modal"
      />

      {/* Modal */}
      <div className="fixed bottom-0 left-0 right-0 z-[9999] lg:hidden animate-slide-up">
        <div className="bg-white dark:bg-slate-900 rounded-t-3xl shadow-2xl max-h-[80vh] overflow-hidden border-t border-gray-200 dark:border-gray-700">
          {/* Header */}
          <div className="flex items-center justify-between p-5 border-b border-gray-200 dark:border-gray-700">
            <div className="flex items-center gap-3">
              <Filter className="w-6 h-6 text-brand-600 dark:text-brand-400" />
              <div>
                <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                  Filters
                </h2>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {filteredCount} of {totalCount} stations
                </p>
              </div>
            </div>
            <button
              onClick={onClose}
              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors"
            >
              <X className="w-5 h-5 text-gray-600 dark:text-gray-300" />
            </button>
          </div>

          {/* Content */}
          <div className="p-5 space-y-6 max-h-[calc(80vh-120px)] overflow-y-auto pb-28">
            {/* Search */}
            <div>
              <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Search Stations
              </span>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="Search by name or location..."
                  value={filters.searchQuery}
                  onChange={(e) =>
                    onFiltersChange({ ...filters, searchQuery: e.target.value })
                  }
                  className="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-800 focus:ring-2 focus:ring-brand-500 dark:focus:ring-brand-400 focus:border-transparent text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
                  aria-label="Search stations by name or location"
                />
              </div>
            </div>

            {/* Status Filter */}
            <div>
              <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Station Status
              </span>
              <div className="grid grid-cols-2 gap-3">
                {[
                  { value: 'all', label: 'All Stations' },
                  { value: 'available', label: 'Available' },
                  { value: 'charging', label: 'In Use' },
                  { value: 'unavailable', label: 'Unavailable' },
                ].map((option) => {
                  const isActive = filters.statusFilter === option.value;
                  return (
                    <button
                      key={option.value}
                      onClick={() =>
                        onFiltersChange({
                          ...filters,
                          statusFilter: option.value as any,
                        })
                      }
                      className={`p-2.5 rounded-lg border text-sm font-medium transition-all ${
                        isActive
                          ? 'bg-brand-50 dark:bg-brand-900 border-brand-300 dark:border-brand-400 text-brand-700 dark:text-brand-300'
                          : 'bg-white dark:bg-slate-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-brand-300 dark:hover:border-brand-400'
                      }`}
                    >
                      {option.label}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Connector Type Filter */}
            <div>
              <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Connector Type
              </span>
              <div className="grid grid-cols-2 gap-3">
                {[
                  { value: 'all', label: 'All Types' },
                  { value: 'CCS', label: 'CCS' },
                  { value: 'CHAdeMO', label: 'CHAdeMO' },
                  { value: 'Type2', label: 'Type 2' },
                ].map((option) => {
                  const isActive = filters.connectorType === option.value;
                  return (
                    <button
                      key={option.value}
                      onClick={() =>
                        onFiltersChange({
                          ...filters,
                          connectorType: option.value as any,
                        })
                      }
                      className={`p-2.5 rounded-lg border text-sm font-medium transition-all ${
                        isActive
                          ? 'bg-brand-50 dark:bg-brand-900 border-brand-300 dark:border-brand-400 text-brand-700 dark:text-brand-300'
                          : 'bg-white dark:bg-slate-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-brand-300 dark:hover:border-brand-400'
                      }`}
                    >
                      {option.label}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Fast Charger Toggle */}
            <div className="flex items-center justify-between p-3 bg-brand-50 dark:bg-slate-800 border border-brand-200 dark:border-gray-600 rounded-lg">
              <div className="flex items-center gap-3">
                <Zap className="w-4 h-4 text-yellow-500" />
                <div>
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Fast Chargers Only
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    &gt;50kW charging speed
                  </p>
                </div>
              </div>
              <label
                className="relative inline-flex items-center cursor-pointer"
                aria-label="Toggle fast chargers only filter"
              >
                <input
                  type="checkbox"
                  checked={filters.showOnlyFastChargers}
                  onChange={(e) =>
                    onFiltersChange({
                      ...filters,
                      showOnlyFastChargers: e.target.checked,
                    })
                  }
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-500"></div>
              </label>
            </div>

            {/* Clear Filters */}
            <button
              onClick={onClearFilters}
              className="w-full py-3 text-sm font-medium rounded-lg border border-brand-400 dark:border-brand-300 text-brand-600 dark:text-brand-300 hover:bg-brand-50 dark:hover:bg-slate-800 transition-colors"
            >
              Clear All Filters
            </button>
          </div>
        </div>
      </div>
    </>
  );
}