import type { Course, Setting } from '@/payload-types'
import type { FeedExtras } from '@/lib/catalogueFeed'
import { Icon, look } from './icons'
import { counted, type CountForms } from '@/lib/plural'
import { type Category, type Locale, localHref, media, price } from '@/lib/site'

export type CardCourse = Course & Partial<FeedExtras>

/**
 * What a course card and a category card show.
 *
 * Both are plain server components: a card is a link and some text, so there is nothing for the browser
 * to run and nothing of either ships as JavaScript.
 */

/** The status chip: the word comes from the CMS, the colour from the status, and the two always agree. */
function Chip({ status, s }: { status: Course['status']; s: Setting }) {
  const word = status === 'live' ? s.status?.live : status === 'partial' ? s.status?.partial : s.status?.soon
  if (!word) return null
  return <span className={`chip ${status === 'live' ? '' : status}`}>{word}</span>
}

export function CourseCard({
  course: c,
  settings: s,
  locale,
  category,
  priceWasLabel,
}: {
  course: CardCourse
  settings: Setting
  locale: Locale
  /** The course's category, for the line above the title and for the icon. */
  category?: Category | null
  /** Read by a screen reader before the struck-through figure, so it is heard as the normal price. */
  priceWasLabel?: string | null
}) {
  const { icon, cover } = look(category?.slug)
  const poster = media(c.poster)
  // The CMS poster wins over the platform's picture: it is the one an editor chose for this site.
  const img = poster?.url || c.image || null
  const p = price(c, s)
  const href = localHref(locale, `/courses/${c.slug}`)

  return (
    <article className="course-card">
      <div className={`course-cover ${cover}`}>
        <Chip status={c.status} s={s} />
        {img ? (
          <img src={img} alt="" width={640} height={360} loading="lazy" />
        ) : (
          <Icon name={icon} />
        )}
      </div>
      <div className="course-body">
        {category ? <div className="course-category">{category.name}</div> : null}
        {/* The whole heading is the link, so the link's name is the course's name — a list of
            «details ↗» tells a screen-reader user nothing about which course each one opens. */}
        <h3>
          <a href={href}>{c.title}</a>
        </h3>
        <p>{c.tagline}</p>
        {c.level ? (
          <div className="meta">
            <span>
              <Icon name="clock" />
              {c.level}
            </span>
          </div>
        ) : null}
        <div className="bottom">
          {c.price?.amount !== null && c.price?.amount !== undefined ? (
            <div className="price">
              {p.now}
              {p.was ? (
                <>
                  {' '}
                  {priceWasLabel ? <span className="sr-only">{priceWasLabel}</span> : null}
                  <del>{p.was}</del>
                </>
              ) : null}
            </div>
          ) : (
            <div className="soon">{c.status === 'soon' ? s.status?.soon : c.price?.note}</div>
          )}
          <a className="link" href={href}>
            {s.cta?.primary} ↗
          </a>
        </div>
      </div>
    </article>
  )
}

export function CategoryCard({
  category,
  count,
  forms,
  locale,
}: {
  category: Category
  count: number
  /** The counted noun's forms, so «4 مناهج» reads correctly and «1 منهج» does too. */
  forms: CountForms
  locale: Locale
}) {
  const { icon } = look(category.slug)
  return (
    <a className="cat-card" href={`${localHref(locale, '/courses')}?category=${encodeURIComponent(category.slug)}`}>
      <div className="cat-icon">
        <Icon name={icon} />
      </div>
      <h3>{category.name}</h3>
      <span>
        {counted(count, forms, locale)} ↗
      </span>
    </a>
  )
}