/**
 * [INPUT]: 依赖 react、components/v4/CoverImage、components/v4/Skeleton 的 Skel;
 *   props: course{num,name,intro,aud,art:{pl,dt},cover?}、meta(N系列·M节)、
 *   cta(脚注动作文案,默认「进入课程 →」)、ctaColor(脚注色,落地页传朱色)、onClick、loading(骨架态)
 * [OUTPUT]: 对外提供 CourseCard 组件——综合首页/落地页共用的课程卡(16:9 暗底星座缩略/封面 + 文案)
 * [POS]: components/v4 共享原语,被 screens/v4/hub/HubHome 与 landing/LandingPage 消费;还原 DC 源行 162-181。
 *   ★ 登录后 Hub 卡即基准形态:落地页不再维护本地变体(原 LpCourseCard 已删),尺寸/图片比例两处恒同源。
 *   封面经 CoverImage 三态渲染(加载期暗底、就绪淡入、失败回退星座线稿),不再先画线稿再跳变。
 *   ★ 封面不叠蒙层:左上编号自带深色 chip 底(与 LessonCard 四角元素同一词汇),
 *     不靠 textShadow——后台可上传白底海报,浅字带投影在白底上一样糊
 *   ★ 骨架同源(loading)：布局全走模块常量 CC_LAYOUT，真实态与骨架态共用同一段 JSX/style——
 *     改 padding/字号骨架自动跟随，独立 CourseCardSkeleton 已删（能消失的分支 > 能写对的分支）
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
import { CoverImage } from './CoverImage'
import { Skel } from './Skeleton'

const ACC = 'var(--zzm-accent,#A6402F)'
const paint = (v) => (v === '@' ? ACC : v) // 源用 '@' 占位品牌朱

// ── 布局单一真相源：真实态与骨架态共用 → 改这里两态同时变，永不漂移 ──
const CC_LAYOUT = {
  card: { border: '1px solid rgba(0,0,0,.09)', borderRadius: 16, background: '#FFFFFF', overflow: 'hidden' },
  header: { aspectRatio: '16/9', background: '#131316', position: 'relative', overflow: 'hidden' },
  body: { padding: '16px 18px 17px' },
}

// 星座线稿：仅作「未配置封面 / 封面加载失败」的设计兜底,不再作恒定底层
function ArtSvg({ pl, dt }) {
  return (
    <svg viewBox="0 0 240 135" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      {pl.map((l, i) => (
        <polyline key={i} points={l.pts} fill="none" stroke={paint(l.c)} strokeWidth={l.w}
          strokeLinecap="round" strokeLinejoin="round" />
      ))}
      {dt.map((d, i) => (
        <circle key={i} cx={d.x} cy={d.y} r={d.r} fill={paint(d.f)} />
      ))}
    </svg>
  )
}

export function CourseCard({ course, meta, cta = '进入课程 →', ctaColor = '#161616', onClick, loading = false }) {
  // ── 骨架态：同一外壳(CC_LAYOUT) + 16:9 暗底头图 + 文案位换 Skel 块；无 onClick/cursor/悬停 ──
  if (loading) {
    return (
      <div style={CC_LAYOUT.card}>
        <div style={CC_LAYOUT.header} />
        <div style={CC_LAYOUT.body}>
          <Skel w="62%" h={16} />
          <Skel w="92%" h={13} style={{ marginTop: 6 }} />
          <Skel w="40%" h={11.5} style={{ marginTop: 10 }} />
          <div style={{ marginTop: 13, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Skel w={86} h={10.5} />
            <span style={{ flex: 1 }} />
            <Skel w={58} h={12} />
          </div>
        </div>
      </div>
    )
  }

  const pl = course.art?.pl ?? []
  const dt = course.art?.dt ?? []
  return (
    <div onClick={onClick} className="zzm-hovercard" style={{ ...CC_LAYOUT.card, cursor: 'pointer' }}>
      <div style={CC_LAYOUT.header}>
        <CoverImage src={course.cover} fallback={<ArtSvg pl={pl} dt={dt} />} />
        {/* 编号自持底色（不靠 textShadow）：封面由后台上传，白底海报上的白字带投影一样糊。
            与 LessonCard 四角元素同一词汇——深色小底 + 浅字，与封面明暗无关 */}
        <div style={{
          position: 'absolute', top: 10, left: 11, fontFamily: 'var(--zzm-mono)', fontSize: 10,
          letterSpacing: '2px', padding: '3px 7px', borderRadius: 4,
          background: 'rgba(0,0,0,.55)', color: 'rgba(255,255,255,.82)',
        }}>{course.num}</div>
      </div>
      <div style={CC_LAYOUT.body}>
        <div style={{ fontSize: 16, fontWeight: 650 }}>{course.name}</div>
        <div style={{ marginTop: 6, fontSize: 13, lineHeight: 1.65, color: '#72726E' }}>{course.intro}</div>
        <div style={{ marginTop: 10, fontSize: 11.5, color: '#A2A29C' }}>适合 · {course.aud}</div>
        <div style={{ marginTop: 13, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontFamily: 'var(--zzm-mono)', fontSize: 10.5, color: '#8B8B85' }}>{meta}</span>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 12, fontWeight: 600, color: ctaColor, whiteSpace: 'nowrap' }}>{cta}</span>
        </div>
      </div>
    </div>
  )
}