'use client';

import React from 'react';
import { Search, Filter, RefreshCw, Zap } from 'lucide-react';
import { FilterState } from './MobileFilterModal';

interface DesktopFilterPanelProps {
  readonly isOpen: boolean;
  readonly filters: FilterState;
  readonly filteredCount: number;
  readonly totalCount: number;
  readonly isRefreshing: boolean;
  readonly onToggle: () => void;
  readonly onFiltersChange: (filters: FilterState) => void;
  readonly onClearFilters: () => void;
  readonly onRefresh: () => void;
  readonly extraButtons?: React.ReactNode;
}

export function DesktopFilterPanel({
  isOpen,
  filters,
  filteredCount,
  totalCount,
  isRefreshing,
  onToggle,
  onFiltersChange,
  onClearFilters,
  onRefresh,
  extraButtons,
}: DesktopFilterPanelProps) {
  return (
    <div
      className={`absolute top-6 left-6 z-[9990] transition-all duration-300 ${
        isOpen ? 'w-80' : 'w-auto'
      } hidden lg:block`}
    >
      <div className="bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-200/50 dark:border-gray-700 overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center gap-2">
            {/* Toggle Filters */}
            <button
              onClick={onToggle}
              className="p-2 rounded-lg bg-brand-50 dark:bg-gray-800 border border-transparent hover:border-brand-300 dark:hover:border-brand-400 hover:bg-brand-100 dark:hover:bg-gray-700 transition-all duration-200 group"
              title="Toggle Filters"
            >
              <Filter className="w-5 h-5 text-brand-600 group-hover:text-brand-700 dark:group-hover:text-brand-400" />
            </button>

            {/* Refresh */}
            <button
              onClick={onRefresh}
              disabled={isRefreshing}
              className="p-2 rounded-lg bg-brand-600 text-white border border-brand-600 hover:bg-brand-500 dark:bg-brand-700 dark:border-brand-700 dark:hover:bg-brand-600 transition-all duration-200 disabled:opacity-50 group"
              title="Refresh Stations"
            >
              <RefreshCw
                className={`w-5 h-5 text-white ${isRefreshing ? 'animate-spin' : ''}`}
              />
            </button>

            {extraButtons && (
              <div className="flex items-center gap-2">
                {extraButtons}
              </div>
            )}
          </div>

          {isOpen && (
            <div className="text-xs font-medium text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 px-3 py-1 rounded-full border border-gray-200 dark:border-gray-700">
              {filteredCount} of {totalCount} stations
            </div>
          )}
        </div>

        {/* Body */}
        {isOpen && (
          <div className="p-4 space-y-5">
            {/* Search */}
            <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 stations..."
                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-gray-800 focus:ring-2 focus:ring-brand-500 dark:focus:ring-brand-400 focus:border-transparent outline-none text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
              />
            </div>

            {/* Status Filter */}
            <div>
              <label
                htmlFor="status-filter"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
              >
                Status
              </label>
              <select
                id="status-filter"
                value={filters.statusFilter}
                onChange={(e) =>
                  onFiltersChange({
                    ...filters,
                    statusFilter: e.target.value as any,
                  })
                }
                className="w-full px-3 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-brand-500 dark:focus:ring-brand-400 text-gray-800 dark:text-gray-200"
              >
                <option value="all">All Stations</option>
                <option value="available">Available</option>
                <option value="charging">Currently Charging</option>
                <option value="unavailable">Unavailable</option>
              </select>
            </div>

            {/* Connector Filter */}
            <div>
              <label
                htmlFor="connector-filter"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
              >
                Connector Type
              </label>
              <select
                id="connector-filter"
                value={filters.connectorType}
                onChange={(e) =>
                  onFiltersChange({
                    ...filters,
                    connectorType: e.target.value as any,
                  })
                }
                className="w-full px-3 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-brand-500 dark:focus:ring-brand-400 text-gray-800 dark:text-gray-200"
              >
                <option value="all">All Types</option>
                <option value="CCS">CCS</option>
                <option value="CHAdeMO">CHAdeMO</option>
                <option value="Type2">Type 2</option>
              </select>
            </div>

            {/* Fast Charger */}
            <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-2">
                <Zap className="w-4 h-4 text-yellow-500" />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Fast Chargers Only
                </span>
                <span className="text-xs text-gray-500 dark:text-gray-400">
                  (&gt;50kW)
                </span>
              </div>
              <label
                htmlFor="fast-charger-toggle"
                className="relative inline-flex items-center cursor-pointer"
              >
                <input
                  id="fast-charger-toggle"
                  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-2.5 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>
  );
}