// 环境监控: 米家温湿度长期记录
//  - 顶部: 授权横幅(重新授权弹窗) + 立即同步
//  - 家庭: Collapse 手风琴, 一次只展开一个家庭
//  - 设备卡片: 标题=别名+电量, 概览+缺N天, Segmented 今天/月/年 图表
import { useEffect, useState, useRef, useCallback } from 'react'
import {
  Collapse, Popup, Dialog, Toast, Empty, DotLoading, Segmented, Button, Card, Input,
} from 'antd-mobile'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
import {
  getMihomeStatus, getMihomeHistory, setMihomeAlias, syncMihome,
  startMihomeAuth, getMihomeAuthStatus, cancelMihomeAuth, fetchMihomeQrImage,
} from '../../api/mihome.js'
import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'

const RANGE_OPTIONS = [
  { label: '今天', value: 'today' },
  { label: '月', value: 'month' },
  { label: '年', value: 'year' },
]

const round1 = (v) => (v === null || v === undefined ? null : Math.round(Number(v) * 10) / 10)
const pad = (n) => String(n).padStart(2, '0')
// 网络类失败: 不能据此断定米家授权失效
const NETWORK_ERR_RE = /fetch failed|network|ECONN|ETIMEDOUT|timeout|socket|getaddrinfo|ENOTFOUND|aborted/i

export default function EnvView() {
  const [status, setStatus] = useState(null)
  const [err, setErr] = useState('')
  const [syncing, setSyncing] = useState(false)
  const [refreshTick, setRefreshTick] = useState(0)
  const [qrOpen, setQrOpen] = useState(false)
  const autoPromptedRef = useRef(false)

  // 依赖必须为空: 之前依赖 [status] 而成功回调又 setStatus(...), 每次响应都会换掉 load,
  // 触发 effect 重新执行 -> 无限重复请求 /status. 首屏/重试用 force 强查, 定时轮询走缓存.
  const load = useCallback((silent) => {
    if (!silent) setErr('')
    getMihomeStatus(!silent)
      .then((d) => { setStatus(d); setErr('') })
      .catch((e) => {
        if (silent) return
        setErr(e.message)
        setStatus((prev) => prev || { auth: { status: 'expired' }, homes: [] })
      })
  }, [])

  useEffect(() => {
    load(false)
    const timer = setInterval(() => load(true), 60000)
    return () => clearInterval(timer)
  }, [load])
  useRefreshOnVisible(() => load(true))

  // 会话失效时直接把扫码弹窗弹出来 (每次挂载只自动弹一次, 用户取消后不再骚扰).
  // 网络抖动也会让后端判成 expired, 这类错误不自动弹, 只留横幅提示, 避免误弹.
  useEffect(() => {
    if (autoPromptedRef.current) return
    if (status?.auth?.status !== 'expired') return
    if (NETWORK_ERR_RE.test(status.auth.lastError || '')) return
    autoPromptedRef.current = true
    setQrOpen(true)
  }, [status])

  const doSync = async () => {
    setSyncing(true)
    try {
      await syncMihome()
      Toast.show({ icon: 'success', content: '已同步' })
      setRefreshTick((x) => x + 1)
      load(true)
    } catch (e) {
      Toast.show({ content: e.message })
    } finally {
      setSyncing(false)
    }
  }

  const authOk = status?.auth?.status === 'ok'
  const homes = status?.homes || []

  return (
    <div className="env-view">
      {!authOk && status && (
        <div className="env-auth-banner">
          <span>米家授权{status.auth.status === 'expired' ? '已过期' : '待授权'}，部分历史待补齐</span>
          <span className="env-auth-btn" onClick={() => setQrOpen(true)}>重新授权</span>
        </div>
      )}
      <div className="monitor-tip env-toolbar">
        <span>每小时采样 · 数据永久保留</span>
        <Button size="mini" color="primary" fill="outline" loading={syncing} onClick={doSync}>立即同步</Button>
      </div>
      {!status && !err && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
      {err && (
        <div className="error-banner">
          {err}
          <span className="retry-link" onClick={() => load(false)}>重试</span>
        </div>
      )}
      {status && homes.length === 0 && authOk && <Empty description="暂无米家环境设备" />}
      {status && homes.length > 0 && (
        <div className="env-homes">
          <Collapse accordion defaultActiveKey={homes[0].homeId}>
            {homes.map((h) => (
              <Collapse.Panel
                key={h.homeId}
                title={
                  <span className="env-home-title">
                    {h.name}
                    <span className="env-home-count">{h.devices.length ? h.devices.length + ' 台设备' : '无环境设备'}</span>
                  </span>
                }
              >
                {h.devices.length === 0 ? (
                  <Empty description="该家庭暂无环境设备" />
                ) : (
                  <div className="env-devices">
                    {h.devices.map((d) => (
                      <DeviceCard key={d.did} device={d} refreshTick={refreshTick} onChanged={() => load(true)} />
                    ))}
                  </div>
                )}
              </Collapse.Panel>
            ))}
          </Collapse>
        </div>
      )}

      <AuthPopup open={qrOpen} onClose={() => setQrOpen(false)} onOk={() => { setQrOpen(false); setRefreshTick((x) => x + 1); load(true) }} />
    </div>
  )
}

// 设备卡片: 标题=别名+电量 / 概览+缺N天 / 今天·月·年图表
function DeviceCard({ device, refreshTick, onChanged }) {
  const [range, setRange] = useState('today')
  const [buckets, setBuckets] = useState(null)
  const [loading, setLoading] = useState(false)
  const [cerr, setCerr] = useState('')

  const load = useCallback((r) => {
    setLoading(true); setCerr('')
    getMihomeHistory(device.did, r)
      .then((d) => { setBuckets(d.buckets || []); setCerr('') })
      .catch((e) => setCerr(e.message))
      .finally(() => setLoading(false))
  }, [device.did])

  useEffect(() => { load(range) }, [range, refreshTick, load])

  const missing = device.missingDays?.length || 0
  const latest = device.latest
  const title = device.title || device.name
  const batt = device.battery != null ? device.battery + '%' : null

  const editAlias = () => {
    const input = { current: null }
    const onOk = async () => {
      const val = (input.current && input.current.nativeElement) ? input.current.nativeElement.value : ''
      try {
        await setMihomeAlias(device.did, val.trim())
        Toast.show({ icon: 'success', content: '已保存' })
        onChanged()
      } catch (e) {
        Toast.show({ content: e.message })
      }
    }
    let v = device.alias || device.name
    Dialog.show({
      title: '编辑别名',
      content: <Input ref={(el) => { input.current = el }} defaultValue={v} placeholder="别名（仅本应用展示）" />,
      closeOnAction: true,
      actions: [
        { key: 'cancel', text: '取消' },
        { key: 'ok', text: '保存', onClick: () => { onOk(); } },
      ],
    })
  }

  return (
    <Card className="env-device-card">
      <div className="env-device-head">
        <div className="env-device-title">
          <span className="env-device-name">{title}</span>
          {batt && <span className="env-device-batt">电量 {batt}</span>}
          <span className="env-device-edit" onClick={editAlias}>改别名</span>
        </div>
        {missing > 0 && <span className="env-missing-badge">缺 {missing} 天</span>}
      </div>
      <div className="env-device-meta">
        {latest ? (
          <>
            <span>温度 {latest.temperature != null ? round1(latest.temperature) + '℃' : '—'}
              {latest.temperatureMin != null && <em> {round1(latest.temperatureMin)}~{round1(latest.temperatureMax)}℃</em>}</span>
            <span>湿度 {latest.humidity != null ? round1(latest.humidity) + '%' : '—'}
              {latest.humidityMin != null && <em> {round1(latest.humidityMin)}~{round1(latest.humidityMax)}%</em>}</span>
          </>
        ) : (
          <span className="env-muted">暂无样本（今天 {pad(new Date().getHours())}:00 起每小时采样）</span>
        )}
      </div>
      <div className="env-range">
        <Segmented
          options={RANGE_OPTIONS}
          value={range}
          onChange={(v) => setRange(v)}
        />
      </div>
      {cerr && <div className="env-chart-err">{cerr}</div>}
      {!cerr && loading && buckets === null && <div className="env-chart-loading"><DotLoading /></div>}
      {!cerr && buckets !== null && <EnvChart range={range} buckets={buckets} />}
    </Card>
  )
}

// 图表: 温度/湿度双轴; 月/年加 min/max 淡虚线
function EnvChart({ range, buckets }) {
  if (!buckets.length) return <div className="env-chart-empty">该视图暂无数据</div>
  const rows = buckets.map((b) => {
    let x
    let temp = round1(b.temperatureAvg ?? b.temperature)
    let hum = round1(b.humidityAvg ?? b.humidity)
    if (range === 'today') {
      const d = new Date(b.t)
      x = pad(d.getHours()) + ':00'
    } else if (range === 'month') {
      const d = new Date(b.t)
      x = (d.getMonth() + 1) + '/' + d.getDate()
    } else {
      x = b.label || ''
    }
    return {
      x,
      temp,
      hum,
      tempMin: round1(b.temperatureMin),
      tempMax: round1(b.temperatureMax),
      humMin: round1(b.humidityMin),
      humMax: round1(b.humidityMax),
      sampleCount: b.sampleCount,
    }
  })
  const showBand = range === 'month' || range === 'year'
  return (
    <div className="chart-wrap">
      <ResponsiveContainer width="100%" height={220}>
        <LineChart data={rows} margin={{ top: 6, right: 6, left: -6, bottom: 0 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="x" tick={{ fontSize: 10 }} minTickGap={range === 'today' ? 30 : 20} />
          <YAxis yAxisId="temp" tick={{ fontSize: 10 }} width={36} unit="°" />
          <YAxis yAxisId="hum" orientation="right" tick={{ fontSize: 10 }} width={40} unit="%" />
          <Tooltip />
          <Legend wrapperStyle={{ fontSize: 11 }} />
          <Line yAxisId="temp" dataKey="temp" name="温度" stroke="#1677ff" strokeWidth={1.8} dot={false} connectNulls={false} isAnimationActive={false} />
          <Line yAxisId="hum" dataKey="hum" name="湿度" stroke="#00b578" strokeWidth={1.8} dot={false} connectNulls={false} isAnimationActive={false} />
          {showBand && (
            <>
              <Line yAxisId="temp" dataKey="tempMin" name="温/最低" stroke="#1677ff" strokeWidth={1} strokeDasharray="3 3" opacity={0.45} dot={false} isAnimationActive={false} />
              <Line yAxisId="temp" dataKey="tempMax" name="温/最高" stroke="#1677ff" strokeWidth={1} strokeDasharray="3 3" opacity={0.45} dot={false} isAnimationActive={false} />
              <Line yAxisId="hum" dataKey="humMin" name="湿/最低" stroke="#00b578" strokeWidth={1} strokeDasharray="3 3" opacity={0.4} dot={false} isAnimationActive={false} />
              <Line yAxisId="hum" dataKey="humMax" name="湿/最高" stroke="#00b578" strokeWidth={1} strokeDasharray="3 3" opacity={0.4} dot={false} isAnimationActive={false} />
            </>
          )}
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}

// 重新授权弹窗: 服务端生成二维码, 3s 轮询直到 ok/failed
function AuthPopup({ open, onClose, onOk }) {
  const [state, setState] = useState(null)
  const timerRef = useRef(null)
  const [imgUrl, setImgUrl] = useState('')
  const imgSigRef = useRef('')
  const imgUrlRef = useRef('')
  // 用 ref 持有最新回调: 父组件每次渲染都会新建 onClose/onOk,
  // 若把它们放进 effect 依赖会导致 start() 反复重启、弹窗被反复关掉
  const cbRef = useRef({ onClose, onOk })
  cbRef.current = { onClose, onOk }
  // 本轮是否已经结束(成功/失败), 防止多次 poll 重复触发 onOk
  const settledRef = useRef(false)

  const stopPoll = () => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null } }

  const start = async () => {
    stopPoll()
    settledRef.current = false
    setState(null)
    try {
      await startMihomeAuth()
    } catch (e) {
      settledRef.current = true
      setState({ state: 'failed', lastError: e.message })
      return
    }
    const poll = () => {
      getMihomeAuthStatus()
        .then((s) => {
          if (settledRef.current) return
          setState(s)
          if (s.state === 'failed') {
            settledRef.current = true
            stopPoll()
            return
          }
          // done 只由服务端真正登录成功置位; 且必须 running=false 才算流程走完
          if (!s.running && s.done) {
            settledRef.current = true
            stopPoll()
            cbRef.current.onOk()
          }
        })
        .catch((e) => {
          if (settledRef.current) return
          settledRef.current = true
          stopPoll()
          setState({ state: 'failed', lastError: e.message })
        })
    }
    poll()
    timerRef.current = setInterval(poll, 3000)
  }

  // 只依赖 open: start 内部通过 ref 读回调, 不会因父组件重渲染而重启
  useEffect(() => {
    if (open) start()
    else { stopPoll(); settledRef.current = false; setState(null) }
    return stopPoll
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open])

  // 二维码变化时才重新拉图 (轮询 3s 一次, 用字符串签名去重, 避免每轮都请求图片)
  const qrSig = state?.state === 'waiting' ? state.qrImageUrl || '' : ''
  useEffect(() => {
    if (!qrSig) {
      imgSigRef.current = ''
      setImgUrl('')
      return
    }
    if (qrSig === imgSigRef.current) return
    imgSigRef.current = qrSig
    let alive = true
    setImgUrl('')
    fetchMihomeQrImage()
      .then((url) => {
        if (!alive) { URL.revokeObjectURL(url); return }
        if (imgUrlRef.current) URL.revokeObjectURL(imgUrlRef.current)
        imgUrlRef.current = url
        setImgUrl(url)
      })
      .catch((e) => {
        if (!alive) return
        // 图片拉取失败就停轮询, 让用户点「刷新二维码」重来, 否则下一轮状态会把错误盖掉
        stopPoll()
        setState({ state: 'failed', lastError: e.message })
      })
    return () => { alive = false }
  }, [qrSig])

  // 卸载时释放 blob, 防止内存泄漏
  useEffect(() => () => { if (imgUrlRef.current) URL.revokeObjectURL(imgUrlRef.current) }, [])

  const cancel = async () => {
    try { await cancelMihomeAuth() } catch { /* ignore */ }
    stopPoll()
    settledRef.current = true
    cbRef.current.onClose()
  }

  const waiting = state?.state === 'waiting' && !!imgUrl
  const loading = state?.state === 'waiting' && !imgUrl
  const failed = state?.state === 'failed'

  return (
    // 关闭遮罩点击: 手机端很容易误触导致弹窗一闪而过; 只允许显式点「取消」关闭
    <Popup visible={open} closeOnMaskClick={false} bodyStyle={{ minWidth: '78vw', padding: 20, borderRadius: 12 }}>
      <div className="env-qr">
        <div className="env-qr-title">米家扫码授权</div>
        {waiting ? (
          <img className="env-qr-img" src={imgUrl} alt="扫码授权" />
        ) : (
          <div className="env-qr-wait"><DotLoading /> {failed ? '扫码流程失败' : '正在生成二维码...'}</div>
        )}
        {failed && state?.lastError && <div className="env-qr-err">{state.lastError}</div>}
        <div className="env-qr-tip">打开米家 App → 我的 → 扫码登录，扫码后自动恢复</div>
        <div className="env-qr-actions">
          <Button size="mini" fill="outline" onClick={cancel}>取消</Button>
          <Button size="mini" color="primary" fill="outline" loading={loading} onClick={() => start()}>刷新二维码</Button>
        </div>
      </div>
    </Popup>
  )
}