import { useEffect, useState, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import Skeleton from '../components/ui/Skeleton'

import {
  getDashboardSummary,
  getHealthDistribution,
  getGatewayTrend,
  getKanbanSummary,
  getCronRecent,
  type SummaryData,
  type HealthDistribution,
  type GatewayTrendItem,
  type KanbanSummaryItem,
  type CronRecentItem,
} from '../api/dashboard'

/* ---------- helpers ---------- */

function timeAgo(iso: string): string {
  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000)
  if (diff < 5) return '刚刚'
  if (diff < 60) return diff + ' 秒前'
  const m = Math.floor(diff / 60)
  if (m < 60) return m + ' 分钟前'
  return Math.floor(m / 60) + ' 小时前'
}

const VAL_COLORS: Record<string, string> = {
  green: 'var(--green)',
  red: 'var(--red)',
  yellow: 'var(--yellow)',
  blue: 'var(--blue)',
}

interface RecentEvent {
  time: string
  profile: string
  type: string
  typeClass: string
  summary: string
  status: string
  statusClass: string
}

const MOCK_EVENTS: RecentEvent[] = [
  { time: '21:13', profile: 'hindsight', type: 'Cron 失败', typeClass: 'badge-offline', summary: 'Hindsight index 更新超时', status: '待处理', statusClass: 'badge-warn' },
  { time: '18:45', profile: 'monitor', type: '心跳超时', typeClass: 'badge-warn', summary: 'Gateway 心跳 3 次无响应', status: '待处理', statusClass: 'badge-warn' },
  { time: '14:20', profile: 'feishu-gateway', type: '飞书断连', typeClass: 'badge-warn', summary: 'WebSocket 断开 8 分钟后恢复', status: '已恢复', statusClass: 'badge-a' },
]

/* ---------- Stat card ---------- */

function StatCard({
  label, value, valueColor, change, changeDirection,
}: {
  label: string; value: string | number; valueColor?: string
  change?: string; changeDirection?: 'up' | 'down'
}) {
  const dirIcon = changeDirection === 'up' ? '↑' : '↓'
  const dirColor = changeDirection === 'up' ? 'var(--green)' : 'var(--red)'
  return (
    <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: 16 }}>
      <div style={{ fontSize: 12, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>
        {label}
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: valueColor ? VAL_COLORS[valueColor] : 'var(--text)' }}>
        {value}
      </div>
      {change && (
        <div style={{ fontSize: 12, marginTop: 4, color: changeDirection ? dirColor : 'var(--text-dim)' }}>
          {changeDirection && <span>{dirIcon} </span>}
          {change}
        </div>
      )}
    </div>
  )
}

/* ---------- Health vertical bar chart ---------- */

const GRADE_META = [
  { key: 'A', color: 'var(--green)' },
  { key: 'B', color: 'var(--blue)' },
  { key: 'C', color: 'var(--yellow)' },
  { key: 'D', color: 'var(--red)' },
] as const

function HealthBarChart({ dist, onBarClick }: { dist: HealthDistribution; onBarClick: (g: string) => void }) {
  if (!dist || dist.total === 0) {
    return <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>
  }
  const maxVal = Math.max(dist.A, dist.B, dist.C, dist.D, 1)
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, height: 120, padding: '0 8px' }}>
      {GRADE_META.map(function(meta) {
        var val = dist[meta.key];
        var pct = (val / maxVal) * 100;
        return (
          <div key={meta.key} onClick={function() { onBarClick(meta.key) }}
            style={{
              flex: 1, borderRadius: '4px 4px 0 0', textAlign: 'center', position: 'relative',
              minWidth: 40, cursor: 'pointer', height: Math.max(pct, 4) + '%', backgroundColor: meta.color,
              transition: 'opacity .15s',
            }}
            onMouseEnter={function(e) { e.currentTarget.style.opacity = '0.8' }}
            onMouseLeave={function(e) { e.currentTarget.style.opacity = '1' }}
          >
            <span style={{ position: 'absolute', top: -18, left: '50%', transform: 'translateX(-50%)', fontSize: 12, fontWeight: 700, color: 'var(--text)' }}>
              {val}
            </span>
            <span style={{ position: 'absolute', bottom: -22, left: '50%', transform: 'translateX(-50%)', fontSize: 11, color: 'var(--text-dim)' }}>
              {meta.key}级
            </span>
          </div>
        )
      })}
    </div>
  )
}

/* ---------- Gateway 48-bar timeline ---------- */

function barColor(item: GatewayTrendItem): string {
  if (item.heartbeat_timeouts > 0) return 'var(--red)'
  if (item.feishu_disconnects > 0) return 'var(--orange)'
  return 'var(--green)'
}

function GatewayTimeline({ trend }: { trend: GatewayTrendItem[] }) {
  var bars = [];
  for (var i = 0; i < trend.length; i++) {
    var item = trend[i];
    var col = barColor(item);
    var details = [];
    if (item.heartbeat_timeouts > 0) details.push('心跳超时 ' + item.heartbeat_timeouts);
    if (item.feishu_disconnects > 0) details.push('飞书断连 ' + item.feishu_disconnects);
    if (item.restarts > 0) details.push('重启 ' + item.restarts);
    var tip = details.length > 0 ? details.join(' / ') : '正常运行';
    bars.push({ color: col, tooltip: item.hour + ': ' + tip });
    bars.push({ color: col, tooltip: item.hour + ': ' + tip });
  }
  return (
    <div style={{ display: 'flex', gap: 2, height: 40, alignItems: 'flex-end', marginBottom: 12 }}>
      {bars.map(function(b, i) {
        return (
          <div key={i} title={b.tooltip}
            style={{
              flex: 1, borderRadius: '2px 2px 0 0', minWidth: 3, cursor: 'pointer', position: 'relative',
              backgroundColor: b.color,
            }}
            onMouseEnter={function(e) { e.currentTarget.style.opacity = '0.7' }}
            onMouseLeave={function(e) { e.currentTarget.style.opacity = '1' }}
          />
        )
      })}
    </div>
  )
}

/* ---------- Badge helpers for events table ---------- */

function BadgeSpan({ cls, children }: { cls: string; children: React.ReactNode }) {
  var styleMap: Record<string, React.CSSProperties> = {
    'badge-offline': { background: 'rgba(255,61,61,.15)', color: 'var(--red)' },
    'badge-warn': { background: 'rgba(255,171,0,.15)', color: 'var(--yellow)' },
    'badge-a': { background: 'rgba(0,200,83,.15)', color: 'var(--green)' },
  }
  var baseStyle: React.CSSProperties = styleMap[cls] || { background: 'var(--bg-hover)', color: 'var(--text-dim)' }
  return (
    <span style={Object.assign({ display: 'inline-block', padding: '2px 8px', borderRadius: 10, fontSize: 11, fontWeight: 600 }, baseStyle)}>
      {children}
    </span>
  )
}

/* ---------- main page ---------- */

export default function DashboardPage() {
  var navigate = useNavigate()

  var _a = useState<SummaryData | null>(null), summary = _a[0], setSummary = _a[1]
  var _b = useState<HealthDistribution | null>(null), health = _b[0], setHealth = _b[1]
  var _c = useState<GatewayTrendItem[]>([]), trend = _c[0], setTrend = _c[1]
  var _d = useState<KanbanSummaryItem[]>([]), kanban = _d[0], setKanban = _d[1]
  var _e = useState<CronRecentItem[]>([]), cron = _e[0], setCron = _e[1]
  var _f = useState(true), loading = _f[0], setLoading = _f[1]
  var _g = useState<string | null>(null), error = _g[0], setError = _g[1]

  var fetchAll = useCallback(async function() {
    setLoading(true)
    setError(null)
    try {
      var res = await Promise.all([
        getDashboardSummary(),
        getHealthDistribution(),
        getGatewayTrend(),
        getKanbanSummary(),
        getCronRecent(),
      ])
      setSummary(res[0].data)
      setHealth(res[1].data)
      setTrend(res[2].data)
      setKanban(res[3].data)
      setCron(res[4].data)
    } catch (e) {
      setError('加载仪表盘数据失败')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(function() { fetchAll() }, [fetchAll])

  /* loading */
  if (loading) {
    return (
      <div>
        <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4, color: 'var(--text)' }}>蜂群总览</div>
        <Skeleton variant='card' count={4} className='mt-4' />
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20, marginTop: 20 }}>
          <Skeleton variant='card' count={1} />
          <Skeleton variant='card' count={1} />
        </div>
      </div>
    )
  }

  /* error */
  if (error) {
    return (
      <div>
        <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4, color: 'var(--text)' }}>蜂群总览</div>
        <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: 20, textAlign: 'center', marginTop: 20 }}>
          <p style={{ color: 'var(--red)', fontSize: 14, marginBottom: 12 }}>{error}</p>
          <button onClick={fetchAll} style={{ background: 'var(--honey)', color: '#000', border: 'none', borderRadius: 'var(--radius-sm)', padding: '6px 14px', fontSize: 13, cursor: 'pointer', fontWeight: 600 }}>
            重试
          </button>
        </div>
      </div>
    )
  }

  /* empty */
  if (!summary) {
    return (
      <div>
        <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4, color: 'var(--text)' }}>蜂群总览</div>
        <p style={{ color: 'var(--text-dim)', fontSize: 13, marginTop: 20 }}>暂无数据</p>
      </div>
    )
  }

  /* subtitle */
  var subtitle = summary.total_profiles + ' 个 Profile' + (summary.updated_at ? ' · 最后更新 ' + timeAgo(summary.updated_at) : '')

  return (
    <div>
      {/* page header */}
      <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4, color: 'var(--text)' }}>蜂群总览</div>
      <div style={{ color: 'var(--text-dim)', fontSize: 13, marginBottom: 20 }}>{subtitle}</div>

      {/* stat cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14, marginBottom: 20 }}>
        <StatCard label='在线 Gateway' value={summary.online_count} valueColor='green' change={'↑ vs 昨天'} changeDirection='up' />
        <StatCard label='离线 Gateway' value={summary.offline_count} valueColor='red' change={'↓ vs 昨天'} changeDirection='down' />
        <StatCard label='运行中任务' value={summary.running_tasks} valueColor='blue' change={'Kanban · ' + kanban.length + ' 个看板活跃'} />
        <StatCard label='今日 Cron 失败' value={summary.cron_failures_today} valueColor='red' />
      </div>

      {/* health + trend */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20, marginBottom: 20 }}>
        {/* health distribution */}
        <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
            <span>蜂群健康分布</span>
            <span onClick={function() { navigate('/health') }} style={{ color: 'var(--text-dim)', fontSize: 12, cursor: 'pointer' }}>
              查看全部 →
            </span>
          </div>
          <div style={{ padding: 16 }}>
            {health ? (
              <div>
                <HealthBarChart dist={health} onBarClick={function(g) { navigate('/health?filter=' + g) }} />
                {health.d_profiles && health.d_profiles.length > 0 ? (
                  <div style={{ marginTop: 16, fontSize: 12, color: 'var(--text-dim)' }}>
                    <span>⚠ {health.d_profiles.length} 个 D 级 Profile：</span>
                    <span style={{ color: 'var(--red)' }}>{health.d_profiles.join(' · ')}</span>
                  </div>
                ) : null}
              </div>
            ) : (
              <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>
            )}
          </div>
        </div>

        {/* gateway trend */}
        <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
            Gateway 异常趋势 (24h)
          </div>
          <div style={{ padding: 16 }}>
            {trend.length > 0 ? <GatewayTimeline trend={trend} /> : <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>}
            <div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-dim)' }}>
              <span><span style={{ color: 'var(--green)' }}>●</span> 正常运行</span>
              <span><span style={{ color: 'var(--red)' }}>●</span> 心跳超时</span>
              <span><span style={{ color: 'var(--orange)' }}>●</span> 飞书断连</span>
            </div>
          </div>
        </div>
      </div>

      {/* kanban + cron */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
        {/* kanban overview */}
        <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
            Kanban 任务概览
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-dim)', marginBottom: 12 }}>
              <span>看板</span>
              <span>RUNNING</span>
              <span>READY</span>
            </div>
            {kanban.length > 0 ? kanban.map(function(item) {
              return (
                <div key={item.board} onClick={function() { navigate('/kanban') }}
                  style={{ fontSize: 12, color: 'var(--text-dim)', padding: '4px 0', borderBottom: '1px solid var(--border-light)', cursor: 'pointer', display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ color: 'var(--text-dim)' }}>{item.board}</span>
                  <span style={{ color: 'var(--green)' }}>{item.running || '—'}</span>
                  <span style={{ color: 'var(--blue)', marginLeft: 40 }}>{item.ready || '—'}</span>
                </div>
              )
            }) : <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>}
          </div>
        </div>

        {/* cron recent */}
        <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
            Cron 最近执行
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-dim)', marginBottom: 8 }}>
              <span>Job</span>
              <span>状态</span>
              <span>时间</span>
            </div>
            {cron.length > 0 ? cron.map(function(item) {
              return (
                <div key={item.job} onClick={function() { navigate('/cron') }}
                  style={{ fontSize: 12, padding: '4px 0', borderBottom: '1px solid var(--border-light)', cursor: 'pointer' }}>
                  <span style={{ color: 'var(--text-dim)' }}>{item.job}</span>
                  <span style={{ float: 'right', marginRight: 80 }}>
                    {item.status === 'success' ? '✅' : item.status === 'failure' ? '❌' : item.status === 'paused' ? '⏸' : '❓'}
                  </span>
                  <span style={{ float: 'right', color: 'var(--text-muted)' }}>{item.time || '—'}</span>
                </div>
              )
            }) : <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>}
          </div>
        </div>
      </div>

      {/* recent events table */}
      <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
        <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
          最近异常事件
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr>
                <th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>时间</th>
                <th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>Profile</th>
                <th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>类型</th>
                <th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>摘要</th>
                <th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>状态</th>
              </tr>
            </thead>
            <tbody>
              {MOCK_EVENTS.map(function(evt, i) {
                return (
                  <tr key={i} style={evt.status === '待处理' ? { background: 'rgba(255,61,61,.06)' } : undefined}>
                    <td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text)' }}>{evt.time}</td>
                    <td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--blue)' }}>{evt.profile}</td>
                    <td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)' }}>
                      <BadgeSpan cls={evt.typeClass}>{evt.type}</BadgeSpan>
                    </td>
                    <td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text-dim)' }}>{evt.summary}</td>
                    <td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)' }}>
                      <BadgeSpan cls={evt.statusClass}>{evt.status}</BadgeSpan>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}