import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'

interface FilterOption {
  label: string
  value: string
}

interface RouteFilterProps {
  routeType?: string
  vehicleType?: string
  sortBy?: string
  sortOrder?: 'asc' | 'desc'
  onRouteTypeChange?: (type: string) => void
  onVehicleTypeChange?: (type: string) => void
  onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void
}

export const RouteFilter: React.FC<RouteFilterProps> = ({
  routeType = 'all',
  vehicleType = 'all',
  sortBy = 'departureTime',
  sortOrder = 'asc',
  onRouteTypeChange,
  onVehicleTypeChange,
  onSortChange
}) => {
  const [showFilters, setShowFilters] = useState(false)

  // 路线类型选项
  const routeTypeOptions: FilterOption[] = [
    { label: '全部', value: 'all' },
    { label: '去程', value: 'departure' },
    { label: '返程', value: 'return' }
  ]

  // 车辆类型选项
  const vehicleTypeOptions: FilterOption[] = [
    { label: '全部', value: 'all' },
    { label: '大巴拼车', value: 'bus' },
    { label: '商务拼车', value: 'business' },
    { label: '包车', value: 'charter' }
  ]

  // 排序选项
  const sortOptions: FilterOption[] = [
    { label: '出发时间', value: 'departureTime' },
    { label: '价格', value: 'price' }
  ]

  // 处理路线类型选择
  const handleRouteTypeChange = (type: string) => {
    if (onRouteTypeChange) {
      onRouteTypeChange(type)
    }
  }

  // 处理车辆类型选择
  const handleVehicleTypeChange = (type: string) => {
    if (onVehicleTypeChange) {
      onVehicleTypeChange(type)
    }
  }

  // 处理排序选择
  const handleSortChange = (newSortBy: string) => {
    if (onSortChange) {
      const newSortOrder = sortBy === newSortBy && sortOrder === 'asc' ? 'desc' : 'asc'
      onSortChange(newSortBy, newSortOrder)
    }
  }

  // 获取排序图标
  const getSortIcon = (optionValue: string) => {
    if (sortBy !== optionValue) return ''
    return sortOrder === 'asc' ? '↑' : '↓'
  }

  return (
    <View className="bg-white border-b border-gray-200">
      {/* 主要筛选栏 */}
      <View className="flex justify-between items-center p-3">
        {/* 路线类型筛选 */}
        <View className="flex space-x-1">
          {routeTypeOptions.map(option => (
            <View
              key={option.value}
              className={`px-3 py-1 rounded-full text-sm border ${
                routeType === option.value
                  ? 'bg-blue-500 text-white border-blue-500'
                  : 'bg-white text-gray-600 border-gray-300'
              }`}
              onClick={() => handleRouteTypeChange(option.value)}
            >
              <Text>{option.label}</Text>
            </View>
          ))}
        </View>

        {/* 筛选按钮 */}
        <View
          className="flex items-center space-x-1 px-3 py-1 rounded-full border border-gray-300"
          onClick={() => setShowFilters(!showFilters)}
        >
          <Text className="text-sm text-gray-600">筛选</Text>
          <Text className="text-xs text-gray-400">{showFilters ? '▲' : '▼'}</Text>
        </View>
      </View>

      {/* 扩展筛选区域 */}
      {showFilters && (
        <View className="border-t border-gray-100 p-3 space-y-3">
          {/* 车辆类型筛选 */}
          <View>
            <Text className="text-sm text-gray-600 mb-2 block">车辆类型</Text>
            <View className="flex flex-wrap gap-2">
              {vehicleTypeOptions.map(option => (
                <View
                  key={option.value}
                  className={`px-3 py-1 rounded-full text-sm border ${
                    vehicleType === option.value
                      ? 'bg-green-500 text-white border-green-500'
                      : 'bg-white text-gray-600 border-gray-300'
                  }`}
                  onClick={() => handleVehicleTypeChange(option.value)}
                >
                  <Text>{option.label}</Text>
                </View>
              ))}
            </View>
          </View>

          {/* 排序选项 */}
          <View>
            <Text className="text-sm text-gray-600 mb-2 block">排序方式</Text>
            <View className="flex space-x-2">
              {sortOptions.map(option => (
                <View
                  key={option.value}
                  className={`px-3 py-1 rounded-full text-sm border flex items-center space-x-1 ${
                    sortBy === option.value
                      ? 'bg-orange-500 text-white border-orange-500'
                      : 'bg-white text-gray-600 border-gray-300'
                  }`}
                  onClick={() => handleSortChange(option.value)}
                >
                  <Text>{option.label}</Text>
                  {sortBy === option.value && (
                    <Text className="text-xs">{getSortIcon(option.value)}</Text>
                  )}
                </View>
              ))}
            </View>
          </View>
        </View>
      )}

      {/* 当前筛选状态显示 */}
      <View className="px-3 py-2 bg-gray-50 border-t border-gray-100">
        <View className="flex flex-wrap gap-1">
          {routeType !== 'all' && (
            <View className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
              {routeTypeOptions.find(o => o.value === routeType)?.label}
            </View>
          )}
          {vehicleType !== 'all' && (
            <View className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
              {vehicleTypeOptions.find(o => o.value === vehicleType)?.label}
            </View>
          )}
          <View className="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">
            {sortOptions.find(o => o.value === sortBy)?.label}
            {sortOrder === 'asc' ? '↑' : '↓'}
          </View>
        </View>
      </View>
    </View>
  )
}