import type { Catalogue, Course, Setting } from '@/payload-types'
import { type Locale, localHref, media, price } from '@/lib/site'

const TONE: Record<string, string> = {
  'royal-700': 'var(--tk-royal-700)',
  'royal-800': 'var(--tk-royal-800)',
  'azure-700': 'var(--tk-azure-700)',
  'navy-900': 'var(--tk-navy-900)',
  'navy-700': 'var(--tk-navy-700)',
}

export function StatusBadge({ course, settings }: { course: Course; settings: Setting }) {
  // the platform always sends a status; a CMS row made only for a picture may not have one
  const status = course.status || 'soon'
  const cls = { live: 'badge--live', partial: 'badge--soon', soon: 'badge--plain' }[status]
  const icon = { live: '●', partial: '◐', soon: '○' }[status]
  return (
    <span className={`badge ${cls}`}>
      <span aria-hidden="true">{icon}</span>
      {settings.status?.[status]}
    </span>
  )
}

export function CourseCard({
  course: c,
  locale,
  settings,
  level = 3,
}: {
  course: Course
  locale: Locale
  settings: Setting
  level?: 2 | 3
}) {
  const url = localHref(locale, `/courses/${c.slug}`)
  const poster = c.status !== 'soon' ? media(c.poster) : null
  const facts = (c.facts || []).slice(0, 2).map((f) => f.text).join(' · ')
  const H = `h${level}` as 'h2' | 'h3'
  const money = price(c, settings)
  return (
    <article className="card course-card">
      {poster?.url ? (
        <div className="thumb thumb--photo">
          <img src={poster.sizes?.card?.url || poster.url} alt="" width={640} height={360} loading="lazy" />
        </div>
      ) : (
        <div className="thumb" style={{ background: TONE[c.tone || 'royal-700'] }}>
          <img src="/brand/thinkera-mark-white.svg" alt="" width={120} height={120} />
        </div>
      )}
      <StatusBadge course={c} settings={settings} />
      <H className="ccard-title">
        <a href={url}>{c.title}</a>
      </H>
      <p className="muted">{c.tagline}</p>
      <p className="meta">{facts}</p>
      <div className="spacer" />
      <div className="foot">
        <span className="price">
          {money.now}
          {money.was ? <s className="price-was">{money.was}</s> : null}
        </span>
        <a className="btn btn--secondary" href={url}>
          {c.status !== 'soon' ? settings.cta?.primary : settings.cta?.notify}
        </a>
      </div>
    </article>
  )
}

type Labels = NonNullable<Catalogue['labels']>
type Unit = NonNullable<Course['units']>[number]

function UnitCount({ u, labels }: { u: Unit; labels: Labels }) {
  if (u.kind === 'labs')
    return (
      <>
        <span className="num">{u.lessons}</span> {labels.labsWord}
      </>
    )
  if (u.kind === 'projects')
    return (
      <>
        <span className="num">{u.lessons}</span> {labels.projectsWord}
      </>
    )
  if (u.book !== null && u.book !== undefined)
    return (
      <>
        <span className="num">{u.book}</span> {labels.fromBook} + <span className="num">{u.lessons - u.book}</span> {labels.added}
      </>
    )
  return (
    <>
      <span className="num">{u.lessons}</span> {labels.lessonsWord}
    </>
  )
}

export function UnitList({ course, labels }: { course: Course; labels: Labels }) {
  return (
    <ol className="unit-list">
      {(course.units || []).map((u) => {
        const added = u.source === 'added'
        return (
          <li key={u.id || u.n} className={added ? 'is-added' : ''}>
            <span className="n">{u.n}</span>
            <span className="name">
              {u.name}
              {added ? <span className="unit-flag">{labels.addedUnit}</span> : null}
            </span>
            <span className="c">
              <UnitCount u={u} labels={labels} />
            </span>
          </li>
        )
      })}
    </ol>
  )
}