'use client';

import { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Search, Filter, X, Zap } from 'lucide-react';
import { CHARGE_POINT_STATUSES, ChargePoint, CONNECTOR_TYPES } from '@/types/chargepoint/chargepoint';
import type { ChargepointFilters } from '../types/chargepoint.type';

// use shared type

interface StationFilterProps {
  defaultFilters: ChargepointFilters;
}

export default function ChargepointFilter({  defaultFilters }: StationFilterProps) {
  const router = useRouter();

  const searchParams = useSearchParams();
  const currentQuery = searchParams.get('query') || defaultFilters.query;
  const currentStatus = searchParams.get('status') || defaultFilters.status;
  const currentConnectorType = searchParams.get('connector_type') || defaultFilters.connector_type;
  const currentMinPower = Number(searchParams.get('min_power')) || defaultFilters.min_power || 0;
  const currentMaxPower = Number(searchParams.get('max_power')) || defaultFilters.max_power || 350;

  const [query, setQuery] = useState(currentQuery);
  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(currentStatus?.split(',').filter(Boolean) || []);
  const [selectedConnectorTypes, setSelectedConnectorTypes] = useState<string[]>(    currentConnectorType?.split(',').filter(Boolean) || []);
  const [minPower, setMinPower] = useState(currentMinPower);
  const [maxPower, setMaxPower] = useState(currentMaxPower);
  const [isFilterOpen, setIsFilterOpen] = useState(false);


  const applyFilters = () => {
    const params = new URLSearchParams(searchParams.toString());

    if (query?.trim()) {
      params.set('query', query.trim());
    } else {
      params.delete('query');
    }

    if (selectedStatuses.length > 0) {
      params.set('status', selectedStatuses.join(','));
    } else {
      params.delete('status');
    }

    if (selectedConnectorTypes.length > 0) {
      params.set('connector_type', selectedConnectorTypes.join(','));
    } else {
      params.delete('connector_type');
    }

    if (minPower > 0) {
      params.set('min_power', minPower.toString());
    } else {
      params.delete('min_power');
    }

    if (maxPower < 350) {
      params.set('max_power', maxPower.toString());
    } else {
      params.delete('max_power');
    }

    params.delete('page');

    const newUrl = params.toString() ? `?${params.toString()}` : '/stations';
    router.replace(newUrl, { scroll: false });
  };

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    applyFilters();
  };

  const handleStatusToggle = (statusValue: string) => {
    const newStatuses = selectedStatuses.includes(statusValue)
      ? selectedStatuses.filter(s => s !== statusValue)
      : [...selectedStatuses, statusValue];
    setSelectedStatuses(newStatuses);
  };

  const handleConnectorTypeToggle = (typeValue: string) => {
    const newTypes = selectedConnectorTypes.includes(typeValue)
      ? selectedConnectorTypes.filter(t => t !== typeValue)
      : [...selectedConnectorTypes, typeValue];
    setSelectedConnectorTypes(newTypes);
  };

  const handleMinPowerChange = (newMinPower: number) => {
    setMinPower(newMinPower);
  };

  const handleMaxPowerChange = (newMaxPower: number) => {
    setMaxPower(newMaxPower);
  };

  const clearFilters = () => {
    setQuery('');
    setSelectedStatuses([]);
    setSelectedConnectorTypes([]);
    setMinPower(0);
    setMaxPower(350);
    router.replace('/stations', { scroll: false });
  };

  const hasActiveFilters =
    query ||
    selectedStatuses.length > 0 ||
    selectedConnectorTypes.length > 0 ||
    minPower > 0 ||
    maxPower < 350;

  return (
    <div className="space-y-5">
      {/* Search Bar */}
      <form onSubmit={handleSearchSubmit} className="relative">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-brand-500 dark:text-brand-100" />
          <input
            type="text"
            placeholder="Cari nama charging station..."
            value={query}
            onChange={e => setQuery(e.target.value)}
            className="w-full rounded-lg border border-brand-300 bg-white py-3 pl-11 pr-4 text-black placeholder-brand-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-400 dark:border-brand-00 dark:bg-gray-800 dark:text-white dark:placeholder-brand-200"
          />
        </div>
      </form>

      {/* Filter Toggle and Clear */}
      <div className="flex items-center justify-between">
        <button
          type="button"
          onClick={() => setIsFilterOpen(!isFilterOpen)}
          className="flex items-center gap-2 rounded-lg border border-brand-500 bg-brand-100 px-4 py-2 text-sm font-semibold text-brand-700 transition hover:bg-brand-200 dark:border-brand-600 dark:bg-brand-800 dark:text-brand-300 dark:hover:bg-brand-700"
        >
          <Filter className="h-5 w-5" />
          Filter
          {hasActiveFilters && <span className="ml-2 inline-block h-3 w-3 rounded-full bg-brand-600"></span>}
        </button>

        {hasActiveFilters && (
          <button
            type="button"
            onClick={clearFilters}
            className="flex items-center gap-1 rounded-lg border border-transparent bg-brand-500 px-4 py-2 text-sm font-semibold text-white shadow-md transition hover:bg-brand-600 dark:bg-brand-600 dark:hover:bg-brand-700"
          >
            <X className="h-4 w-4" />
            Clear Filters
          </button>
        )}
      </div>

      {/* Filter Options */}
      {isFilterOpen && (
        <div className="grid grid-cols-1 gap-5 rounded-lg border border-brand-300 bg-white p-5 dark:border-brand-700 dark:bg-gray-800 md:grid-cols-3">
          {/* Status Filter */}
          <div>
            <div className="mb-3 text-sm font-semibold text-brand-700 dark:text-brand-300">
              Status
            </div>
            <div className="max-h-44 overflow-y-auto space-y-2 rounded-lg border border-brand-200 bg-gray-100 p-4 dark:border-brand-700 dark:bg-gray-900">
              {CHARGE_POINT_STATUSES.map(statusOption => (
                <label
                  key={statusOption.value}
                  className="flex cursor-pointer items-center space-x-3 text-brand-800 dark:text-brand-300"
                >
                  <input
                    type="checkbox"
                    checked={selectedStatuses.includes(statusOption.value)}
                    onChange={() => handleStatusToggle(statusOption.value)}
                    className="accent-brand-500 h-4 w-4 rounded-xl border-brand-400 text-brand-600 focus:ring-brand-500"
                  />
                  <span className="text-sm">{statusOption.label}</span>
                </label>
              ))}
            </div>
          </div>

          {/* Connector Type Filter */}
          <div>
            <div className="mb-3 text-sm font-semibold text-brand-700 dark:text-brand-300">
              Connector Type
            </div>
            <div className="max-h-44 overflow-y-auto space-y-2 rounded-lg border border-brand-200 bg-gray-100 p-4 dark:border-brand-700 dark:bg-gray-900">
              {CONNECTOR_TYPES.map(connectorTypeOption => (
                <label
                  key={connectorTypeOption.value}
                  className="flex cursor-pointer items-center space-x-3 text-brand-800 dark:text-brand-300"
                >
                  <input
                    type="checkbox"
                    checked={selectedConnectorTypes.includes(connectorTypeOption.value)}
                    onChange={() => handleConnectorTypeToggle(connectorTypeOption.value)}
                    className="accent-brand-500 h-4 w-4 rounded-xl border-brand-400 text-brand-600 focus:ring-brand-500"
                  />
                  <span className="text-sm">{connectorTypeOption.label}</span>
                </label>
              ))}
            </div>
          </div>

          {/* Power Range Filter */}
          <div>
            <label className="mb-3 flex items-center gap-2 text-sm font-semibold text-brand-700 dark:text-brand-300">
              <Zap className="inline w-5 h-5 text-brand-500" />
              Power Range: {minPower} - {maxPower} kW
            </label>
            <div className="space-y-4 rounded-lg border border-brand-200 bg-gray-100 p-4 dark:border-brand-700 dark:bg-gray-900">
              {/* Min Power */}
              <div>
                <label className="mb-1 block text-xs text-brand-600 dark:text-brand-300">
                  Min Power: {minPower} kW
                </label>
                <input
                  type="range"
                  min="0"
                  max="350"
                  step="10"
                  value={minPower}
                  onChange={e => handleMinPowerChange(Number(e.target.value))}
                  className="w-full h-2 accent-brand-400 cursor-pointer"
                />
              </div>
              {/* Max Power */}
              <div>
                <label className="mb-1 block text-xs text-brand-600 dark:text-brand-300">
                  Max Power: {maxPower} kW
                </label>
                <input
                  type="range"
                  min="0"
                  max="350"
                  step="10"
                  value={maxPower}
                  onChange={e => handleMaxPowerChange(Number(e.target.value))}
                  className="w-full h-2 accent-brand-400 cursor-pointer"
                />
              </div>
              <div className="flex justify-between text-xs text-brand-500 dark:text-brand-400">
                <span>0 kW</span>
                <span>350 kW</span>
              </div>
            </div>
          </div>

          {/* Apply Filters Button */}
          <div className="md:col-span-3 flex justify-end gap-3 border-t border-brand-300 pt-5 dark:border-brand-700">
            <button
              type="button"
              onClick={clearFilters}
              className="rounded-lg border-2 border-brand-400 bg-white px-6 py-2 text-sm font-semibold text-brand-600 shadow-sm transition hover:bg-brand-100 dark:border-brand-600 dark:bg-gray-800 dark:text-brand-300 dark:hover:bg-brand-700"
            >
              Clear All
            </button>
            <button
              type="button"
              onClick={applyFilters}
              className="rounded-lg bg-brand-500 px-8 py-2 text-sm font-semibold text-white shadow-md transition hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-400"
            >
              Apply Filters
            </button>
          </div>
        </div>
      )}

      {/* Active Filters Display */}
      {hasActiveFilters && (
        <div className="flex flex-wrap gap-2">
          {query && (
            <span className="inline-flex items-center gap-1 rounded-full bg-brand-100 px-3 py-1 text-sm text-brand-700 dark:bg-brand-900 dark:text-brand-300">
              Search: "{query}"
              <button
                onClick={() => setQuery('')}
                className="ml-1 rounded-full p-0.5 hover:bg-brand-200 dark:hover:bg-brand-800"
                aria-label="Clear search filter"
              >
                <X className="h-3 w-3 text-brand-600" />
              </button>
            </span>
          )}
          {selectedStatuses.map(status => (
            <span
              key={status}
              className="inline-flex items-center gap-1 rounded-full bg-green-100 px-3 py-1 text-sm text-green-800 dark:bg-green-900 dark:text-green-300"
            >
              Status: {CHARGE_POINT_STATUSES.find(s => s.value === status)?.label || status}
              <button
                onClick={() => handleStatusToggle(status)}
                className="ml-1 rounded-full p-0.5 hover:bg-green-200 dark:hover:bg-green-800"
                aria-label={`Clear status filter ${status}`}
              >
                <X className="h-3 w-3 text-green-700 dark:text-green-200" />
              </button>
            </span>
          ))}
          {selectedConnectorTypes.map(connectorType => (
            <span
              key={connectorType}
              className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-800 dark:bg-blue-900 dark:text-blue-300"
            >
              Connector: {CONNECTOR_TYPES.find(c => c.value === connectorType)?.label || connectorType}
              <button
                onClick={() => handleConnectorTypeToggle(connectorType)}
                className="ml-1 rounded-full p-0.5 hover:bg-blue-200 dark:hover:bg-blue-800"
                aria-label={`Clear connector filter ${connectorType}`}
              >
                <X className="h-3 w-3 text-blue-700 dark:text-blue-200" />
              </button>
            </span>
          ))}
          {(minPower > 0 || maxPower < 350) && (
            <span className="inline-flex items-center gap-1 rounded-full bg-orange-100 px-3 py-1 text-sm text-orange-800 dark:bg-orange-900 dark:text-orange-300">
              <Zap className="h-3 w-3" />
              Power: {minPower}-{maxPower} kW
              <button
                onClick={() => {
                  setMinPower(0);
                  setMaxPower(350);
                }}
                className="ml-1 rounded-full p-0.5 hover:bg-orange-200 dark:hover:bg-orange-800"
                aria-label="Clear power filter"
              >
                <X className="h-3 w-3 text-orange-700 dark:text-orange-200" />
              </button>
            </span>
          )}
        </div>
      )}
    </div>
  );
};