import Link from "next/link";
import "./blogs.css";
import { getBlogPosts, formatBlogDate, BLOG_PAGE_SIZE } from "@/app/lib/blogs";
import { BlogPaginationNav } from "./blog-pagination";

function ArrowIcon() {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden>
      <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export async function Blogs({ page = 1 }: { page?: number }) {
  const { data, pagination, error } = await getBlogPosts(page, BLOG_PAGE_SIZE);

  // A page number past the end still returns 200 with an empty list, so treat
  // it as "nothing here" rather than an error and offer a way back.
  const isEmptyPage = !error && data.length === 0 && page > 1;

  return (
    <section className="wwd-section blogs-section" id="blogs">
      <div className="wwd-inner">
        <div className="wwd-top-row">
          <span className="wwd-eyebrow">Insights</span>
        </div>
        <div className="wwd-header-row">
          <h1 className="wwd-headline">From the Oxyfinz team.</h1>
          <p className="wwd-body">
            Notes on wealth data, portfolio reporting, and how family offices and advisors use Oxyfinz.
          </p>
        </div>

        {error ? (
          <p className="blogs-empty">{error}</p>
        ) : isEmptyPage ? (
          <p className="blogs-empty">
            No articles on this page.{" "}
            <Link href="/blogs" data-oxy-href="/blogs" className="blogs-empty-link">
              Back to the first page
            </Link>
          </p>
        ) : data.length === 0 ? (
          <p className="blogs-empty">No articles published yet. Check back soon.</p>
        ) : (
          <div className="blogs-grid">
            {data.map((post) => {
              const dateLabel = formatBlogDate(post.date_added);
              const kind = post.f_type === "B" ? "Blog" : "Article";
              return (
                <Link
                  key={post.id}
                  href={`/blogs/${encodeURIComponent(post.slug)}`}
                  data-oxy-href={`/blogs/${encodeURIComponent(post.slug)}`}
                  className="blog-card"
                >
                  <span className="blog-card-meta">
                    <span className="blog-card-category">{kind}</span>
                    {dateLabel ? <span className="blog-card-date">{dateLabel}</span> : null}
                  </span>
                  <h2 className="blog-card-title">{post.title}</h2>
                  {post.excerpt ? <p className="blog-card-excerpt">{post.excerpt}</p> : null}
                  {post.categories.length > 0 ? (
                    <span className="blog-card-tags">
                      {post.categories.slice(0, 3).map((category) => (
                        <span key={category.id} className="blog-card-tag">
                          {category.name}
                        </span>
                      ))}
                    </span>
                  ) : null}
                  <span className="blog-card-cta">
                    Read article
                    <ArrowIcon />
                  </span>
                </Link>
              );
            })}
          </div>
        )}

        {pagination ? <BlogPaginationNav pagination={pagination} /> : null}
      </div>
    </section>
  );
}