/* global React, useLang, Arrow, useBlogPosts, BlogInsightVisual */

function BlogPostPage() {
  const { t } = useLang();
  const posts = useBlogPosts();
  const slug = window.FORSVAR_BLOG_POST_SLUG;
  const currentIndex = Math.max(0, posts.findIndex((post) => post.slug === slug));
  const post = posts[currentIndex] || posts[0];
  const previous = posts[currentIndex - 1] || null;
  const next = posts[currentIndex + 1] || null;
  const related = posts.filter((candidate) => candidate.slug !== post.slug);

  return (
    <>
      <BlogPostBreadcrumb post={post} />
      <article className="blog-post">
        <BlogPostHeader post={post} />
        <BlogPostContent post={post} />
        <BlogPostAuthor post={post} />
        <BlogPostNavigation previous={previous} next={next} />
        <BlogPostRelated posts={related} />
      </article>
    </>
  );
}

function BlogPostBreadcrumb({ post }) {
  const { t } = useLang();
  return (
    <nav className="blog-breadcrumb" aria-label={t("blog.article.breadcrumb")}>
      <div className="container">
        <a href="index.html">{t("blog.article.home")}</a>
        <span>/</span>
        <a href="blog.html">{t("p2.footer.blog")}</a>
        <span>/</span>
        <span>{post.category}</span>
      </div>
    </nav>
  );
}

function BlogPostHeader({ post }) {
  const { t } = useLang();
  const copyLink = (event) => {
    event.preventDefault();
    if (navigator.clipboard && window.location.href) {
      navigator.clipboard.writeText(window.location.href);
    }
  };
  return (
    <header className="blog-post-header">
      <div className="container">
        <div className="blog-post-kicker">
          <span className="blog-post-mark" aria-hidden="true">F</span>
          <span className="kicker">{post.category}</span>
        </div>
        {post.partner === "fintech" && <FintechPartnerLogo />}
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
        <div className="blog-post-meta">
          <span>{post.date}</span>
          <span>{post.reading}</span>
          <span>{t("blog.article.views")}</span>
        </div>
        <div className="blog-post-share" aria-label={t("blog.article.share")}>
          <a href="contact_us.html">
            {t("blog.article.contactPageLink")}
          </a>
          <a href="https://www.linkedin.com/company/forsvar-risk-solution/" target="_blank" rel="noopener noreferrer">
            LinkedIn
          </a>
          <a href={post.href} onClick={copyLink}>{t("blog.article.copyLink")}</a>
        </div>
        <div className="blog-post-featured">
          <BlogInsightVisual post={post} large />
        </div>
      </div>
    </header>
  );
}

function BlogPostContent({ post }) {
  const { t } = useLang();
  return (
    <section className="blog-post-content">
      <div className="container">
        <div className="blog-post-layout">
          <aside className="blog-post-aside">
            <div className="blog-post-aside-card">
              <span className="kicker">{t("blog.article.takeaways")}</span>
              <ul>
                {post.takeaways.map((item, i) => <li key={i}>{item}</li>)}
              </ul>
            </div>
          </aside>
          <div className="blog-post-copy">
            {post.body.map((paragraph, i) => (
              <React.Fragment key={i}>
                <p>{paragraph}</p>
                {post.manualHref && i === 2 && (
                  <a href={post.manualHref} className="btn btn-primary blog-manual-link blog-manual-link-inline">
                    {post.manualLabel} <Arrow />
                  </a>
                )}
              </React.Fragment>
            ))}
            {post.sections.map((section, i) => (
              <section key={i} className="blog-post-section">
                <h2>{section.heading}</h2>
                {section.body.map((paragraph, j) => <p key={j}>{paragraph}</p>)}
                <ul>
                  {section.bullets.map((bullet, j) => <li key={j}>{bullet}</li>)}
                </ul>
              </section>
            ))}
            <div className="blog-post-callout">
              <span className="kicker">{t("blog.article.operatorNote")}</span>
              <p>{t("blog.article.operatorNoteText")}</p>
              {post.manualHref && (
                <a href={post.manualHref} className="btn btn-primary blog-manual-link">
                  {post.manualLabel} <Arrow />
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FintechPartnerLogo() {
  return (
    <div className="fintech-partner-logo" aria-label="Cámara Uruguaya de Fintech">
      <span className="fintech-partner-mark">UY</span>
      <span>
        <strong>Cámara Uruguaya</strong>
        <em>de Fintech</em>
      </span>
    </div>
  );
}

function BlogPostAuthor({ post }) {
  const { t } = useLang();
  const author = post.author;
  const label = author ? author.label : t("blog.article.authorLabel");
  const name = author ? author.name : t("blog.article.authorName");
  const bio = author ? author.bio : t("blog.article.authorBio");
  const linkedinHref = author?.linkedin || "https://www.linkedin.com/company/forsvar-risk-solution/";
  return (
    <section className="blog-post-author-section">
      <div className="container">
        <div className="blog-post-author">
          <div className={`blog-author-avatar${author?.img ? " has-photo" : ""}`}>
            {author?.img ? (
              <img src={author.img} alt={name} />
            ) : (
              <span aria-hidden="true">{t("blog.article.authorInitials")}</span>
            )}
          </div>
          <div>
            <span className="kicker">{label}</span>
            <h2>{name}</h2>
            <p>{bio}</p>
            <div className="blog-author-links">
              <a href={linkedinHref} target="_blank" rel="noopener noreferrer">LinkedIn</a>
              <a href={post.href}>{post.category}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BlogPostNavigation({ previous, next }) {
  const { t } = useLang();
  if (!previous && !next) return null;
  return (
    <section className="blog-post-navigation-section">
      <div className="container">
        <div className="blog-post-navigation">
          {previous ? (
            <a href={previous.href} className="blog-post-nav-card">
              <span>{t("blog.article.previous")}</span>
              <strong>{previous.title}</strong>
            </a>
          ) : <span />}
          {next ? (
            <a href={next.href} className="blog-post-nav-card blog-post-nav-card-next">
              <span>{t("blog.article.next")}</span>
              <strong>{next.title}</strong>
            </a>
          ) : <span />}
        </div>
      </div>
    </section>
  );
}

function BlogPostRelated({ posts }) {
  const { t } = useLang();
  if (!posts.length) return null;
  return (
    <section className="blog-post-related">
      <div className="container">
        <div className="eyebrow-row">
          <div>
            <span className="kicker"><span className="dot" />{t("blog.article.relatedKicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("blog.article.relatedTitle")}</h2>
          </div>
          <a href="blog.html" className="btn btn-ghost">{t("p2.blog.all")} <Arrow /></a>
        </div>
        <div className="cards-2 blog-related-grid">
          {posts.map((post) => <BlogPageCard key={post.slug} post={post} />)}
        </div>
      </div>
    </section>
  );
}

window.BlogPostPage = BlogPostPage;
window.FintechPartnerLogo = FintechPartnerLogo;