import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { MarkdownPreview } from "@/components/markdown-preview";
import { PublicBlogHeader } from "@/components/public-blog-header";
import { SiteFooter } from "@/components/site-footer";
import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";
import {
  getPublishedMarketingBlogPost,
  getPublishedMarketingBlogPosts,
  type MarketingBlogPost,
} from "@/lib/marketing-blog";

type BlogArticlePageProps = {
  params: Promise<{ slug: string }>;
};

export const dynamic = "force-dynamic";

function formatDate(value: string | null) {
  if (!value) return "";

  return new Intl.DateTimeFormat("ko-KR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(new Date(value));
}

function readingMinutes(content: string) {
  return Math.max(3, Math.round(content.replace(/\s/g, "").length / 450));
}

function JsonLd({ data }: { data: Record<string, unknown> }) {
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />;
}

function articleUrl(slug: string) {
  return getPublicSiteAbsoluteUrl(`/blog/${slug}`);
}

function tableOfContents(content: string) {
  return content
    .split("\n")
    .map((line) => line.trim())
    .filter((line) => /^##\s+/.test(line))
    .map((line) => line.replace(/^##\s+/, ""));
}

export async function generateMetadata({ params }: BlogArticlePageProps): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPublishedMarketingBlogPost(slug);

  if (!post) return {};

  const url = articleUrl(post.slug);

  return {
    title: `${post.title} | 오피셜메일 가이드`,
    description: post.seoDescription,
    keywords: post.keywords,
    alternates: {
      canonical: url,
      languages: {
        "ko-KR": url,
        "x-default": url,
      },
    },
    openGraph: {
      title: post.title,
      description: post.seoDescription,
      url,
      siteName: "오피셜메일",
      locale: "ko_KR",
      type: "article",
      publishedTime: post.publishedAt ?? undefined,
      modifiedTime: post.updatedAt,
      images: [{ url: getPublicSiteAbsoluteUrl("/images/officialmail-og.png"), width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.seoDescription,
      images: [getPublicSiteAbsoluteUrl("/images/officialmail-og.png")],
    },
    robots: { index: true, follow: true },
  };
}

function buildSchemas(post: MarketingBlogPost) {
  const url = articleUrl(post.slug);

  return {
    article: {
      "@context": "https://schema.org",
      "@type": "Article",
      author: {
        "@type": "Organization",
        name: post.authorName,
      },
      dateModified: post.updatedAt,
      datePublished: post.publishedAt,
      description: post.seoDescription,
      headline: post.title,
      image: getPublicSiteAbsoluteUrl("/images/officialmail-og.png"),
      inLanguage: "ko-KR",
      mainEntityOfPage: url,
      publisher: {
        "@type": "Organization",
        logo: getPublicSiteAbsoluteUrl("/officialmail-icon.svg"),
        name: "오피셜메일",
      },
      url,
    },
    breadcrumb: {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "오피셜메일", item: getPublicSiteAbsoluteUrl("/") },
        { "@type": "ListItem", position: 2, name: "정보 가이드", item: getPublicSiteAbsoluteUrl("/blog") },
        { "@type": "ListItem", position: 3, name: post.title, item: url },
      ],
    },
    faq: post.faqs.length > 0 ? {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: post.faqs.map((faq) => ({
        "@type": "Question",
        name: faq.question,
        acceptedAnswer: {
          "@type": "Answer",
          text: faq.answer,
        },
      })),
    } : null,
  };
}

export default async function BlogArticlePage({ params }: BlogArticlePageProps) {
  const { slug } = await params;
  const post = await getPublishedMarketingBlogPost(slug);

  if (!post) {
    notFound();
  }

  const [allPosts] = await Promise.all([getPublishedMarketingBlogPosts()]);
  const relatedPosts = allPosts.filter((item) => item.id !== post.id).slice(0, 3);
  const toc = tableOfContents(post.contentMarkdown);
  const schemas = buildSchemas(post);

  return (
    <main className="min-h-screen bg-white text-[#16233c]">
      <JsonLd data={schemas.article} />
      <JsonLd data={schemas.breadcrumb} />
      {schemas.faq ? <JsonLd data={schemas.faq} /> : null}
      <PublicBlogHeader />

      <article>
        <header className="border-b border-[#edf1f6] bg-[radial-gradient(circle_at_78%_12%,rgba(185,212,255,0.27),transparent_30%),linear-gradient(180deg,#fbfdff_0%,#ffffff_100%)]">
          <div className="mx-auto w-full max-w-[1420px] px-4 pb-14 pt-10 sm:px-8 sm:pb-20 sm:pt-14 xl:px-10">
            <nav aria-label="현재 위치" className="flex flex-wrap items-center gap-2 text-[12px] text-[#8290a6]">
              <Link href="/" className="hover:text-[#2f6df6]">오피셜메일</Link>
              <span>/</span>
              <Link href="/blog" className="hover:text-[#2f6df6]">정보 가이드</Link>
              <span>/</span>
              <span className="truncate text-[#546783]">{post.title}</span>
            </nav>
            <p className="mt-9 text-[13px] font-semibold text-[#2f6df6]">{post.keywords[0] || "오피셜메일 가이드"}</p>
            <h1 className="mt-4 max-w-[960px] text-balance text-[36px] font-semibold leading-[1.15] tracking-[-0.075em] text-[#16233c] sm:text-[54px]">
              {post.title}
            </h1>
            <p className="mt-6 max-w-[740px] text-[16px] leading-8 text-[#64748b] sm:text-[18px]">{post.seoDescription}</p>
            <div className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-2 text-[12px] text-[#7c8da8]">
              <span className="font-semibold text-[#526784]">{post.authorName}</span>
              <span className="h-1 w-1 rounded-full bg-[#b2bed0]" />
              <time dateTime={post.publishedAt ?? post.updatedAt}>{formatDate(post.publishedAt ?? post.updatedAt)}</time>
              <span className="h-1 w-1 rounded-full bg-[#b2bed0]" />
              <span>약 {readingMinutes(post.contentMarkdown)}분 읽기</span>
            </div>
          </div>
        </header>

        <div className="mx-auto grid w-full max-w-[1420px] gap-10 px-4 py-12 sm:px-8 sm:py-16 xl:grid-cols-[210px_minmax(0,820px)_minmax(0,1fr)] xl:px-10">
          <aside className="hidden xl:block">
            <div className="sticky top-28 border-l border-[#e5ecf7] pl-4">
              <p className="text-[12px] font-semibold text-[#526784]">이 글의 내용</p>
              <ol className="mt-4 space-y-2.5 text-[12px] leading-5 text-[#8190a6]">
                {toc.map((item, index) => <li key={`${item}-${index}`}>{String(index + 1).padStart(2, "0")}. {item}</li>)}
              </ol>
            </div>
          </aside>
          <div className="min-w-0">
            <MarkdownPreview content={post.contentMarkdown} />
            <div className="mt-14 border-y border-[#e8eef7] py-7">
              <p className="text-[13px] font-semibold text-[#2f6df6]">오피셜메일로 시작하기</p>
              <h2 className="mt-2 text-[24px] font-semibold tracking-[-0.055em] text-[#16233c]">대표 메일 하나부터 공식 주소로 운영해보세요.</h2>
              <p className="mt-3 text-[14px] leading-7 text-[#64748b]">대표 메일 1개는 무료로 시작할 수 있습니다. 도메인 연결 값은 메일함에서 바로 확인하세요.</p>
              <Link href="/login" className="om-btn-primary mt-5 h-10 rounded-[10px] px-4 text-[13px] shadow-none">오피셜메일 시작하기</Link>
            </div>
          </div>
          <aside className="hidden xl:block" />
        </div>
      </article>

      {relatedPosts.length > 0 ? (
        <section className="border-t border-[#edf1f6] bg-[#fbfcff]">
          <div className="mx-auto w-full max-w-[1420px] px-4 py-12 sm:px-8 sm:py-16 xl:px-10">
            <div className="flex items-end justify-between gap-4">
              <div>
                <p className="text-[12px] font-semibold text-[#2f6df6]">NEXT GUIDE</p>
                <h2 className="mt-2 text-[26px] font-semibold tracking-[-0.06em] text-[#16233c] sm:text-[34px]">함께 보면 좋은 가이드</h2>
              </div>
              <Link href="/blog" className="text-[13px] font-semibold text-[#526784] hover:text-[#2f6df6]">전체 글 보기 →</Link>
            </div>
            <div className="mt-8 divide-y divide-[#e5ecf7] border-y border-[#e5ecf7]">
              {relatedPosts.map((related) => (
                <Link key={related.id} href={`/blog/${related.slug}`} className="group grid gap-3 py-5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                  <div>
                    <p className="text-[12px] font-semibold text-[#2f6df6]">{related.keywords[0] || "기업메일 가이드"}</p>
                    <p className="mt-1.5 text-[17px] font-semibold tracking-[-0.04em] text-[#30425f] transition-colors group-hover:text-[#2f6df6]">{related.title}</p>
                  </div>
                  <span className="text-[13px] font-semibold text-[#70819d] group-hover:text-[#2f6df6]">읽기 →</span>
                </Link>
              ))}
            </div>
          </div>
        </section>
      ) : null}
      <SiteFooter className="bg-white pt-12" />
    </main>
  );
}