/**
 * [INPUT]: 依赖 react 的 useMemo、components/v4/CoverImage、components/v4/Skeleton 的 Skel；
 *   props: cat{name,sub,cover,ls[]}、hist(useV4Data().hist)、selected、onClick、loading(骨架态)
 * [OUTPUT]: 对外提供 SeriesCard 组件——课程总览的系列卡片（16:9 头图 + 简介 + 总时长 + 进度热力图）
 * [POS]: screens/v4/course 的系列卡，OverviewPage 每系列一张；视觉母版对齐综合首页 CourseCard(白卡+16:9头图)
 *   进度热力图：每课一格，完成态查 hist.doneIds.has(a[7]) 打勾；头图 cat.cover 优先，回退首课封面/星座线稿
 *   封面经 CoverImage 三态渲染(加载期暗底、就绪淡入、失败回退线稿)，不再先画线稿再跳变。
 *   ★ 头图【不叠任何蒙层】：本卡文案全在下方白卡区、图上零叠字，压暗只会让封面偏离上传原图的颜色
 *   ★ 骨架同源(loading)：共用同一外壳(SC_CARD/SC_HEADER/SC_BODY)，文案位换 Skel 块——改布局骨架自动跟随
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
import { useMemo } from 'react'
import { CoverImage } from '../../../components/v4/CoverImage'
import { Skel } from '../../../components/v4/Skeleton'

const ACCENT = 'var(--zzm-accent,#A6402F)'
const MONO = 'var(--zzm-mono)'

// ── 布局单一真相源：真实态与骨架态共用 ──
const SC_CARD = { borderRadius: 16, background: '#FFFFFF', overflow: 'hidden' }
const SC_HEADER = { aspectRatio: '16/9', background: '#131316', position: 'relative', overflow: 'hidden' }
const SC_BODY = { padding: '15px 17px 16px' }

// 分钟 → 「N 分钟 / H 小时 M 分」。总时长由课节 duration_minutes 求和派生。
function fmtDur(min) {
  if (!(min > 0)) return '—'
  if (min < 60) return `${min} 分钟`
  const h = Math.floor(min / 60)
  const m = min % 60
  return m ? `${h} 小时 ${m} 分` : `${h} 小时`
}

export function SeriesCard({ cat, hist, selected, onClick, loading = false }) {
  // ls 用 useMemo 稳定引用（cat.ls||[] 的逻辑表达式否则每帧新建、令下游 useMemo 依赖恒变）
  const ls = useMemo(() => cat?.ls || [], [cat])
  // 每课一格的完成态（a[7]=课节ID）；doneIds 每次渲染新建，用 useMemo 缓存派生数组
  // （hooks 必须无条件先跑——骨架态 ls 为空、hist 可能缺省，用可选链兜底）
  const done = useMemo(() => ls.map((a) => hist?.doneIds?.has(a[7])), [ls, hist])
  const doneCount = done.filter(Boolean).length
  const totalMin = useMemo(
    () => ls.reduce((t, a) => t + (Number(a[8]?.duration_minutes) || 0), 0),
    [ls],
  )
  // 头图：系列封面优先 → 回退系列内首个有封面的课节 → 再回退星座线稿
  const cover = cat?.cover || ls.find((a) => a[8]?.cover_url)?.[8]?.cover_url || null

  // ── 骨架态：同一外壳 + 16:9 暗底头图 + 文案/热力图位换 Skel（热力图占位取记忆或默认 8 格） ──
  if (loading) {
    return (
      <div style={{ ...SC_CARD, border: '1px solid rgba(0,0,0,.09)' }}>
        <div style={SC_HEADER} />
        <div style={SC_BODY}>
          <Skel w="58%" h={16} />
          <Skel w="94%" h={12.5} style={{ marginTop: 5 }} />
          <Skel w="70%" h={12.5} style={{ marginTop: 5 }} />
          <Skel w={150} h={10.5} style={{ marginTop: 10 }} />
          <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {Array.from({ length: 8 }, (_, i) => <Skel key={i} w={16} h={16} r={4} />)}
          </div>
          {/* 真实卡热力图下【无条件】有「已完成 N/M」行（marginTop:7 + fontSize:10 ≈ 19px）——
              骨架须补等高占位，否则数据到达时每张卡高约 19px、总览网格整体下移（复核确认的错位） */}
          <Skel w={60} h={10} style={{ marginTop: 7 }} />
        </div>
      </div>
    )
  }

  return (
    <div
      onClick={onClick}
      className="zzm-hovercard"
      style={{
        ...SC_CARD,
        border: `1px solid ${selected ? ACCENT : 'rgba(0,0,0,.09)'}`,
        cursor: 'pointer',
        boxShadow: selected ? `0 0 0 1px ${ACCENT}` : 'none',
      }}
    >
      {/* 16:9 头图：封面三态(加载暗底/淡入/失败回退线稿)，线稿只作无封面兜底。
          ★ 不叠任何蒙层：本卡的文案全在下方白卡区，图上零叠字，压暗只会让封面偏离原图颜色 */}
      <div style={SC_HEADER}>
        <CoverImage
          src={cover}
          fallback={
            <svg viewBox="0 0 240 135" preserveAspectRatio="xMidYMid slice"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5 }}>
              <polyline points="18,110 62,48 120,92 178,40 224,104" fill="none" stroke="rgba(255,255,255,.09)" strokeWidth="1" />
              <circle cx="62" cy="48" r="2" fill="rgba(255,255,255,.18)" />
              <circle cx="120" cy="92" r="2" fill="rgba(255,255,255,.18)" />
              <circle cx="178" cy="40" r="2" fill="rgba(255,255,255,.18)" />
            </svg>
          }
        />
      </div>

      {/* 文案区：名称 → 简介 → 节数·总时长 → 进度热力图 */}
      <div style={SC_BODY}>
        <div style={{ fontSize: 16, fontWeight: 650 }}>{cat.name}</div>
        <div style={{
          marginTop: 5, fontSize: 12.5, lineHeight: 1.6, color: '#72726E',
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
        }}>{cat.sub}</div>
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8, fontFamily: MONO, fontSize: 10.5, color: '#8B8B85' }}>
          <span>{ls.length} 节课</span>
          <span aria-hidden="true">·</span>
          <span>总时长 {fmtDur(totalMin)}</span>
        </div>

        <div style={{ marginTop: 12 }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {done.map((d, i) => (
              <span key={i} title={`第 ${i + 1} 节${d ? ' · 已完成' : ''}`} style={{
                width: 16, height: 16, borderRadius: 4,
                background: d ? ACCENT : 'transparent',
                border: `1px solid ${d ? ACCENT : 'rgba(0,0,0,.14)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#FFFFFF', fontSize: 10, lineHeight: 1,
              }}>{d ? '✓' : ''}</span>
            ))}
          </div>
          <div style={{ marginTop: 7, fontFamily: MONO, fontSize: 10, color: '#A2A29C' }}>
            已完成 {doneCount}/{ls.length}
          </div>
        </div>
      </div>
    </div>
  )
}