import { ChevronLeft, ChevronRight } from 'lucide-react'
import { useMemo } from 'react'
import { Segmented } from '@shared/ui'

const MIN = 60_000
const DAY = 24 * 60 * MIN

/** 线路详情页的时间范围：只提供这条线路“有数据”的档位。 */
export const PRESETS = [
  { value: '5m', label: '5 分钟', ms: 5 * MIN },
  { value: '15m', label: '15 分钟', ms: 15 * MIN },
  { value: '30m', label: '30 分钟', ms: 30 * MIN },
  { value: '1d', label: '1 天', ms: DAY },
  { value: '3d', label: '3 天', ms: 3 * DAY },
  { value: '7d', label: '7 天', ms: 7 * DAY },
  { value: '14d', label: '14 天', ms: 14 * DAY },
  { value: '30d', label: '一个月', ms: 30 * DAY },
] as const

export type PresetValue = (typeof PRESETS)[number]['value']

/** 进入某个月之后的切片：整月，或者从月初起按固定长度翻页。 */
export const SLICES = [
  { value: 'all', label: '整月', ms: 0 },
  { value: '14d', label: '14 天', ms: 14 * DAY },
  { value: '7d', label: '7 天', ms: 7 * DAY },
  { value: '3d', label: '3 天', ms: 3 * DAY },
  { value: '1d', label: '1 天', ms: DAY },
] as const

export type SliceValue = (typeof SLICES)[number]['value']

/** 数据不足整档时允许 10% 的误差：29 分钟的数据算得上“30 分钟”。至少保留最小的一档。 */
const TOLERANCE = 0.9

export function availablePresets(spanMs: number | null) {
  if (spanMs === null) return [PRESETS[0]]
  const list = PRESETS.filter((p) => spanMs >= p.ms * TOLERANCE)
  return list.length > 0 ? list : [PRESETS[0]]
}

/** 默认选“有数据的最大档”，但最长到 1 天（再长的范围图会很挤，用户可以自己点）。 */
export function defaultPreset(spanMs: number | null): PresetValue {
  const list = availablePresets(spanMs).filter((p) => p.ms <= DAY)
  return list[list.length - 1]?.value ?? '5m'
}

export interface MonthInfo {
  key: string // YYYY-MM
  label: string
  start: number
  end: number // 不含
}

const pad = (n: number) => String(n).padStart(2, '0')

export function monthOf(ms: number): MonthInfo {
  const d = new Date(ms)
  const start = new Date(d.getFullYear(), d.getMonth(), 1).getTime()
  const end = new Date(d.getFullYear(), d.getMonth() + 1, 1).getTime()
  return { key: `${d.getFullYear()}-${pad(d.getMonth() + 1)}`, label: `${d.getFullYear()} 年 ${d.getMonth() + 1} 月`, start, end }
}

/** 从有数据的第一个月到当前月，新的在前。 */
export function monthsWithData(sinceMs: number | null, nowMs: number): MonthInfo[] {
  if (sinceMs === null) return []
  const months: MonthInfo[] = []
  let cursor = monthOf(sinceMs)
  const last = monthOf(nowMs)
  while (cursor.start <= last.start) {
    months.push(cursor)
    cursor = monthOf(cursor.end)
  }
  return months.reverse()
}

export interface RangeState {
  /** 没有 month 就是“最近一段”。 */
  preset: PresetValue
  month: string | null
  slice: SliceValue
  page: number
}

export interface ResolvedRange {
  query: { range?: string; from?: string; to?: string; anchor?: string }
  /** 主机历史只支持 ≥ 1 小时的 range，这里给一个对应的值。 */
  hostRange: string
  label: string
}

const fmtDay = (ms: number) => {
  const d = new Date(ms)
  return `${d.getMonth() + 1}/${d.getDate()}`
}

export function resolveRange(state: RangeState, months: MonthInfo[], nowMs: number): ResolvedRange {
  if (!state.month) {
    const hostRange = state.preset === '5m' || state.preset === '15m' || state.preset === '30m' ? '1h' : state.preset
    return { query: { range: state.preset, anchor: 'latest' }, hostRange, label: PRESETS.find((p) => p.value === state.preset)?.label ?? state.preset }
  }
  const month = months.find((m) => m.key === state.month) ?? monthOf(nowMs)
  const slice = SLICES.find((s) => s.value === state.slice) ?? SLICES[0]
  const end = Math.min(month.end, nowMs)
  let from = month.start
  let to = end
  if (slice.ms > 0) {
    from = month.start + state.page * slice.ms
    to = Math.min(from + slice.ms, end)
  }
  const spanDays = Math.max(1, Math.round((to - from) / DAY))
  return {
    query: { from: new Date(from).toISOString(), to: new Date(to).toISOString() },
    hostRange: spanDays >= 30 ? '30d' : `${Math.max(1, spanDays)}d`,
    label: slice.ms > 0 ? `${month.label} ${fmtDay(from)} – ${fmtDay(to - 1)}` : month.label,
  }
}

/** 一个月里按固定长度能翻几页。 */
function pagesIn(month: MonthInfo, sliceMs: number, nowMs: number, sinceMs: number | null): { first: number; last: number } {
  const start = Math.max(month.start, sinceMs === null ? month.start : sinceMs - (sinceMs % DAY))
  const end = Math.min(month.end, nowMs)
  return { first: Math.max(0, Math.floor((start - month.start) / sliceMs)), last: Math.max(0, Math.ceil((end - month.start) / sliceMs) - 1) }
}

interface Props {
  state: RangeState
  onChange: (next: RangeState) => void
  sinceMs: number | null
  nowMs: number
}

export function RangePicker({ state, onChange, sinceMs, nowMs }: Props) {
  const spanMs = sinceMs === null ? null : nowMs - sinceMs
  const presets = useMemo(() => availablePresets(spanMs), [spanMs])
  const months = useMemo(() => monthsWithData(sinceMs, nowMs), [sinceMs, nowMs])
  const month = state.month ? months.find((m) => m.key === state.month) : undefined
  const monthLength = month ? Math.min(month.end, nowMs) - Math.max(month.start, sinceMs ?? month.start) : 0
  const slices = SLICES.filter((s) => s.ms === 0 || monthLength >= s.ms * TOLERANCE)
  const slice = SLICES.find((s) => s.value === state.slice) ?? SLICES[0]
  const pages = month && slice.ms > 0 ? pagesIn(month, slice.ms, nowMs, sinceMs) : undefined

  return (
    <div className="range-picker">
      <div className="row wrap">
        <Segmented
          options={PRESETS.map((p) => {
            const ok = presets.some((x) => x.value === p.value)
            return { value: p.value, label: p.label, disabled: !ok, title: ok ? undefined : '这条线路的数据还没有这么长' }
          })}
          value={state.month ? ('' as PresetValue) : state.preset}
          onChange={(v) => onChange({ ...state, preset: v, month: null, page: 0 })}
        />
        {months.length > 0 ? (
          <select
            className="select"
            style={{ width: 'auto' }}
            disabled={spanMs === null || spanMs < DAY}
            title={spanMs !== null && spanMs >= DAY ? undefined : '数据超过 1 天之后可以按月查看'}
            value={state.month ?? ''}
            onChange={(e) => onChange({ ...state, month: e.target.value || null, slice: 'all', page: 0 })}
            aria-label="按月查看"
          >
            <option value="">按月查看</option>
            {months.map((m) => (
              <option key={m.key} value={m.key}>
                {m.label}
              </option>
            ))}
          </select>
        ) : null}
      </div>
      {month ? (
        <div className="row wrap" style={{ marginTop: 12 }}>
          <Segmented options={slices.map((s) => ({ value: s.value, label: s.label }))} value={state.slice} onChange={(v) => onChange({ ...state, slice: v, page: 0 })} />
          {pages ? (
            <span className="row" style={{ gap: 4 }}>
              <button type="button" className="btn icon small" disabled={state.page <= pages.first} onClick={() => onChange({ ...state, page: state.page - 1 })} aria-label="上一段">
                <ChevronLeft size={16} />
              </button>
              <button type="button" className="btn icon small" disabled={state.page >= pages.last} onClick={() => onChange({ ...state, page: state.page + 1 })} aria-label="下一段">
                <ChevronRight size={16} />
              </button>
            </span>
          ) : null}
        </div>
      ) : null}
    </div>
  )
}