import Foundation
import HTML
import Saga

func tagPrefix(index: Int, totalTags: Int) -> Node {
  if index > 0 {
    if index == totalTags - 1 {
      return " and "
    } else {
      return ", "
    }
  }
  return ""
}

func renderArticleInfo(_ article: Item<ArticleMetadata>) -> Node {
  div(class: "text-slate-400 gray-links text-sm mb-8") {
    span(class: "border-r border-gray pr-2 mr-2") {
      article.getDate().formatted("MMMM dd, yyyy")
    }

    if let updated = article.getUpdatedDate() {
      span(class: "border-r border-gray pr-2 mr-2") {
        "Updated: \(updated.formatted("MMMM dd, yyyy"))"
      }
    }

    %.text("\(article.body.withoutHtmlTags.numberOfWords) words, posted in ")

    article.metadata.tags.sorted().enumerated().map { index, tag in
      Node.fragment([
        %tagPrefix(index: index, totalTags: article.metadata.tags.count),
        Node.raw("""
        <i class="fa fa-home"></i>
        """),
        %a(class: "text-orange-400 [&:hover]:border-b border-green-400", href: "/articles/tag/\(tag.slugified)/") {
          tag
        }
      ])
    }
  }
}

func ogURL(_ article: Item<ArticleMetadata>) -> String {
  SiteMetadata.url
    .appendingPathComponent("/articles/images/\(article.url)")
    .absoluteString
}

private func parseOtherArticles(_ context: ItemRenderingContext<ArticleMetadata>) -> OtherArticles {
  let allArticles = context.allItems.compactMap { $0 as? Item<ArticleMetadata> }
  let otherArticles = allArticles
    .filter { $0.url != context.item.url }

  guard let primaryTag = context.item.getPrimaryTag() else {
    return .all(otherArticles)
  }

  return .related(
    tag: primaryTag,
    items: otherArticles.sorted { lhs, rhs in
      switch (lhs.metadata.tags.contains(primaryTag), rhs.metadata.tags.contains(primaryTag)) {
      case (true, false): return true
      default: return false
      }
    }
  )
}

private enum OtherArticles {
  case all([Item<ArticleMetadata>])
  case related(tag: String, items: [Item<ArticleMetadata>])

  var items: [Item<ArticleMetadata>] {
    switch self {
    case let .all(items): return items
    case let .related(_, items): return items
    }
  }

  var title: String {
    switch self {
    case .all: return "Recent Articles"
    case .related: return "Related Articles"
    }
  }

  var tag: String? {
    guard case let .related(tag, _) = self else { return nil }
    return tag
  }
}

func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
  let otherArticles = parseOtherArticles(context)

  return baseLayout(
    canocicalURL: context.item.url,
    section: .articles,
    title: context.item.title,
    extraHeader: generateHeader(.article(context.item))
  ) {
    article(class: "pt-8") {
      h1 { context.item.title }
      div {
        renderArticleInfo(context.item)
      }
      // Only index the body of the articles for search.
      div(customAttributes: ["data-pagefind-body": ""]) {
        Node.raw(context.item.body)
      }
    }

    div(class: "border-t border-light pt-8 mt-16", id: "recents") {
      div(class: "grid lg:grid-cols-2") {
        h4(class: "text-3xl text-amber-500 font-extrabold mb-8") { otherArticles.title }
        if let tag = otherArticles.tag {
          a(href: "/articles/tag/\(tag)") {
            div(class: " [&:hover]:border-b border-orange px-5 flex flex-row gap-5") {
              img(src: "/static/img/tag.svg", width: "40")
              span(class: "text-4xl font-extrabold text-orange") { tag }
            }
          }
        }
      }

      div(class: "grid lg:grid-cols-2 gap-10") {
        otherArticles.items.prefix(2).map { renderArticleForGrid(article: $0) }
      }

      div(class: "mt-10") {
        a(href: "/articles/") {
          div(class: "flex flex-row gap-2") {
            span(class: "mt-4") { "All Articles" }
            img(src: "/static/img/document.svg", width: "40")
          }
        }
      }
    }
  }
}

func renderArticleForGrid(article: Item<ArticleMetadata>) -> Node {
  section {
    h3(class: "post-title text-2xl font-bold mb-2") {
      a(class: "[&:hover]:border-b border-orange-400", href: article.url) { article.title }
    }
    renderArticleInfo(article)
    p {
      a(href: article.url) {
        div {
          article.summary
        }
      }
    }
  }
}