import { useState, useEffect } from 'react'

const TimeRangePicker = ({ 
  value = '1m', 
  onChange, 
  className = '' 
}) => {
  const [timeRange, setTimeRange] = useState(value)
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const [showDropdown, setShowDropdown] = useState(false)

  // 计算日期范围
  const calculateDateRange = (range) => {
    const end = new Date()
    const start = new Date()
    
    if (range === '1m') {
      start.setMonth(start.getMonth() - 1)
    } else if (range === '3m') {
      start.setMonth(start.getMonth() - 3)
    } else if (range === '1y') {
      start.setFullYear(start.getFullYear() - 1)
    }
    
    const formatDate = (date) => {
      return date.toISOString().split('T')[0]
    }
    
    return {
      start: formatDate(start),
      end: formatDate(end)
    }
  }

  // 初始化时设置日期范围
  useEffect(() => {
    const range = calculateDateRange(value)
    setStartDate(range.start)
    setEndDate(range.end)
  }, [value])

  // 处理时间范围变化
  const handleTimeRangeChange = (range) => {
    const dateRange = calculateDateRange(range)
    setStartDate(dateRange.start)
    setEndDate(dateRange.end)
    setTimeRange(range)
    if (onChange) {
      onChange(range, dateRange.start, dateRange.end)
    }
    setShowDropdown(false)
  }

  // 处理自定义日期范围
  const handleCustomRangeApply = () => {
    if (startDate && endDate) {
      setTimeRange('custom')
      if (onChange) {
        onChange('custom', startDate, endDate)
      }
      setShowDropdown(false)
    }
  }

  // 处理开始日期变化
  const handleStartDateChange = (e) => {
    setStartDate(e.target.value)
  }

  // 处理结束日期变化
  const handleEndDateChange = (e) => {
    setEndDate(e.target.value)
  }

  return (
    <div className={`time-range-picker ${className}`}>
      <button 
        className="time-range-btn"
        onClick={() => setShowDropdown(!showDropdown)}
      >
        {timeRange === '1m' && '近一个月'}
        {timeRange === '3m' && '近三个月'}
        {timeRange === '1y' && '近一年'}
        {timeRange === 'custom' && startDate && endDate && `${startDate} 至 ${endDate}`}
        {timeRange === 'custom' && (!startDate || !endDate) && '自定义'}
        <span className="dropdown-arrow">▼</span>
      </button>
      {showDropdown && (
        <div className="time-range-dropdown">
          <div className="dropdown-section">
            <h4 className="dropdown-title">自定义范围</h4>
            <div className="custom-date-range">
              <input 
                type="date" 
                value={startDate} 
                onChange={handleStartDateChange}
                max={endDate || new Date().toISOString().split('T')[0]}
              />
              <span>至</span>
              <input 
                type="date" 
                value={endDate} 
                onChange={handleEndDateChange}
                min={startDate}
                max={new Date().toISOString().split('T')[0]}
              />
              <button 
                className="apply-btn"
                onClick={handleCustomRangeApply}
              >
                确定
              </button>
            </div>
          </div>
          <div className="dropdown-section">
            <h4 className="dropdown-title">快捷选项</h4>
            <ul className="dropdown-options">
              <li 
                className={`dropdown-option ${timeRange === '1m' ? 'active' : ''}`}
                onClick={() => handleTimeRangeChange('1m')}
              >
                近一个月
              </li>
              <li 
                className={`dropdown-option ${timeRange === '3m' ? 'active' : ''}`}
                onClick={() => handleTimeRangeChange('3m')}
              >
                近三个月
              </li>
              <li 
                className={`dropdown-option ${timeRange === '1y' ? 'active' : ''}`}
                onClick={() => handleTimeRangeChange('1y')}
              >
                近一年
              </li>
            </ul>
          </div>
        </div>
      )}
    </div>
  )
}

export default TimeRangePicker