import { useState } from 'react'
import { Filter, RotateCcw, Calendar, Search } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { useAuthStore } from '@/stores/auth-store'
import { getNormalizedDateRange, type TimeGranularity } from '@/lib/time'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { DateTimePicker } from '@/components/datetime-picker'
import {
  DEFAULT_TIME_GRANULARITY,
  TIME_GRANULARITY_OPTIONS,
  TIME_RANGE_PRESETS,
  EMPTY_DASHBOARD_FILTERS,
} from '@/features/dashboard/constants'
import {
  cleanFilters,
  getSavedGranularity,
  saveGranularity,
  getDefaultDays,
} from '@/features/dashboard/lib'
import { type DashboardFilters } from '@/features/dashboard/types'

interface ModelsFilterProps {
  onFilterChange: (filters: DashboardFilters) => void
  onReset: () => void
}

/**
 * Section divider component for better visual organization
 */
const SectionDivider = ({ label }: { label: string }) => (
  <div className='relative'>
    <div className='absolute inset-0 flex items-center'>
      <span className='w-full border-t' />
    </div>
    <div className='relative flex justify-center text-xs uppercase'>
      <span className='bg-background text-muted-foreground px-2'>{label}</span>
    </div>
  </div>
)

export function ModelsFilter({ onFilterChange, onReset }: ModelsFilterProps) {
  const { t } = useTranslation()
  // 使用已缓存的用户数据，避免重复调用 API
  const user = useAuthStore((state) => state.auth.user)
  const isAdmin = user?.role && user.role >= 10

  const [open, setOpen] = useState(false)
  const [filters, setFilters] = useState<DashboardFilters>(() => {
    const granularity = getSavedGranularity()
    const days = getDefaultDays(granularity)
    const { start, end } = getNormalizedDateRange(days)
    return {
      ...EMPTY_DASHBOARD_FILTERS,
      start_timestamp: start,
      end_timestamp: end,
      time_granularity: granularity,
    }
  })
  const [selectedRange, setSelectedRange] = useState<number | null>(() =>
    getDefaultDays()
  )

  const handleApply = () => {
    onFilterChange(
      cleanFilters(
        filters as unknown as Record<string, unknown>
      ) as typeof filters
    )
    setOpen(false)
  }

  const handleReset = () => {
    const days = getDefaultDays(DEFAULT_TIME_GRANULARITY)
    const { start, end } = getNormalizedDateRange(days)
    setFilters({
      ...EMPTY_DASHBOARD_FILTERS,
      start_timestamp: start,
      end_timestamp: end,
      time_granularity: DEFAULT_TIME_GRANULARITY,
    })
    setSelectedRange(days)
    saveGranularity(DEFAULT_TIME_GRANULARITY)
    onReset()
    setOpen(false)
  }

  const handleChange = (
    field: keyof DashboardFilters,
    value: Date | string | undefined
  ) => {
    setFilters((prev) => ({ ...prev, [field]: value }))
    if (field === 'start_timestamp' || field === 'end_timestamp')
      setSelectedRange(null)
    if (field === 'time_granularity' && typeof value === 'string')
      saveGranularity(value as TimeGranularity)
  }

  const handleQuickRange = (days: number) => {
    const { start, end } = getNormalizedDateRange(days)

    setFilters((prev) => ({
      ...prev,
      start_timestamp: start,
      end_timestamp: end,
    }))
    setSelectedRange(days)
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant='outline' size='sm'>
          <Filter className='mr-2 h-4 w-4' />
          {t('Filter')}
        </Button>
      </DialogTrigger>
      <DialogContent className='flex max-h-[calc(100dvh-2rem)] flex-col sm:max-w-lg'>
        <DialogHeader>
          <DialogTitle>{t('Filter Dashboard Models')}</DialogTitle>
          <DialogDescription>
            {t(
              'Set filters to customize your dashboard statistics and charts.'
            )}
          </DialogDescription>
        </DialogHeader>

        <ScrollArea className='flex-1 pr-4'>
          <div className='grid gap-4 py-4'>
            {/* Quick time range selection */}
            <div className='grid gap-2'>
              <Label className='flex items-center gap-2'>
                <Calendar className='h-4 w-4' />
                {t('Quick Range')}
              </Label>
              <div className='flex gap-2'>
                {TIME_RANGE_PRESETS.map((range) => (
                  <Button
                    key={range.days}
                    type='button'
                    size='sm'
                    variant={
                      selectedRange === range.days ? 'default' : 'outline'
                    }
                    onClick={() => handleQuickRange(range.days)}
                    className={cn(
                      'flex-1',
                      selectedRange === range.days &&
                        'ring-ring ring-2 ring-offset-2'
                    )}
                  >
                    {t(range.label)}
                  </Button>
                ))}
              </div>
            </div>

            <SectionDivider label={t('Custom Time Range')} />

            {/* Custom time range */}
            <div className='grid gap-4'>
              <div className='grid gap-2'>
                <Label htmlFor='start_timestamp'>{t('Start Time')}</Label>
                <DateTimePicker
                  value={filters.start_timestamp}
                  onChange={(date) =>
                    handleChange('start_timestamp', date || undefined)
                  }
                  placeholder={t('Select start time')}
                />
              </div>

              <div className='grid gap-2'>
                <Label htmlFor='end_timestamp'>{t('End Time')}</Label>
                <DateTimePicker
                  value={filters.end_timestamp}
                  onChange={(date) =>
                    handleChange('end_timestamp', date || undefined)
                  }
                  placeholder={t('Select end time')}
                />
              </div>
            </div>

            <SectionDivider label={t('Chart Settings')} />

            <div className='grid gap-2'>
              <Label htmlFor='time_granularity'>{t('Time Granularity')}</Label>
              <Select
                value={filters.time_granularity}
                onValueChange={(value) =>
                  handleChange('time_granularity', value as TimeGranularity)
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder={t('Select time granularity')} />
                </SelectTrigger>
                <SelectContent>
                  {TIME_GRANULARITY_OPTIONS.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {t(option.label)}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Admin-only fields */}
            {isAdmin && (
              <>
                <SectionDivider label={t('Admin Only')} />

                <div className='grid gap-2'>
                  <Label htmlFor='username'>{t('Username')}</Label>
                  <Input
                    id='username'
                    placeholder={t('Filter by username')}
                    value={filters.username}
                    onChange={(e) => handleChange('username', e.target.value)}
                  />
                </div>
              </>
            )}
          </div>
        </ScrollArea>

        <DialogFooter>
          <Button onClick={handleReset} variant='outline' type='button'>
            <RotateCcw className='mr-2 h-4 w-4' />
            {t('Reset')}
          </Button>
          <Button onClick={handleApply} type='submit'>
            <Search className='mr-2 h-4 w-4' />
            {t('Apply Filters')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
