import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import type { ReactNode } from "react";
import { InnerLayout } from "../../components/inner";
import { readPublishedArticle, readPublishedArticles } from "../../lib/articles";
import { siteBaseUrl } from "../../lib/site-url";

export const dynamic="force-dynamic";
export async function generateMetadata({params}:{params:Promise<{slug:string}>}):Promise<Metadata>{const {slug}=await params,article=await readPublishedArticle(slug);if(!article)return{};const image=article.featuredImageId?`${siteBaseUrl()}/api/media/${article.featuredImageId}`:undefined;return{title:article.seoTitle,description:article.metaDescription,alternates:{canonical:article.canonicalUrl},openGraph:{title:article.seoTitle,description:article.metaDescription,type:"article",publishedTime:article.publishedAt||undefined,modifiedTime:article.updatedAt,images:image?[{url:image}]:[]},twitter:{card:image?"summary_large_image":"summary",title:article.seoTitle,description:article.metaDescription,images:image?[image]:[]}}}
function InlineArticleText({text}:{text:string}){
  const pattern=/(\*\*[^*]+\*\*|~~[^~]+~~|\+\+[^+]+\+\+|`[^`]+`|_[^_]+_|\[[^\]]+\]\((?:https?:\/\/|\/)[^)\s]+\))/g,parts:ReactNode[]=[];let cursor=0,match:RegExpExecArray|null;
  while((match=pattern.exec(text))){if(match.index>cursor)parts.push(text.slice(cursor,match.index));const token=match[0],key=`${match.index}-${token.length}`;if(token.startsWith("**"))parts.push(<strong key={key}>{token.slice(2,-2)}</strong>);else if(token.startsWith("~~"))parts.push(<s key={key}>{token.slice(2,-2)}</s>);else if(token.startsWith("++"))parts.push(<u key={key}>{token.slice(2,-2)}</u>);else if(token.startsWith("`"))parts.push(<code key={key}>{token.slice(1,-1)}</code>);else if(token.startsWith("_"))parts.push(<em key={key}>{token.slice(1,-1)}</em>);else{const link=token.match(/^\[([^\]]+)\]\(((?:https?:\/\/|\/)[^)\s]+)\)$/);if(link)parts.push(link[2].startsWith("/")?<Link href={link[2]} key={key}>{link[1]}</Link>:<a href={link[2]} key={key} rel="noopener noreferrer">{link[1]}</a>)}cursor=pattern.lastIndex}
  if(cursor<text.length)parts.push(text.slice(cursor));return <>{parts}</>;
}
function ArticleContent({body}:{body:string}){
  const lines=body.replace(/\r\n/g,"\n").split("\n"),content:ReactNode[]=[];
  for(let index=0;index<lines.length;){
    const block=lines[index].trim();if(!block){index++;continue}
    const image=block.match(/^\[\[image:([a-zA-Z0-9_-]+)\|([^\]]+)\]\]$/);
    if(image){content.push(<figure className="article-inline-image" key={`image-${index}`}><div><Image src={`/api/media/${image[1]}`} unoptimized fill sizes="(max-width: 900px) 100vw, 760px" alt={image[2].trim()}/></div><figcaption>{image[2].trim()}</figcaption></figure>);index++;continue}
    if(block==="---"){content.push(<hr key={`hr-${index}`}/>);index++;continue}
    if(block.startsWith("```")){const code:string[]=[];index++;while(index<lines.length&&!lines[index].trim().startsWith("```")){code.push(lines[index]);index++}if(index<lines.length)index++;content.push(<pre key={`pre-${index}`}><code>{code.join("\n")}</code></pre>);continue}
    if(/^\|.+\|$/.test(block)&&index+1<lines.length&&/^\|(?:\s*:?-+:?\s*\|)+$/.test(lines[index+1].trim())){const rows:string[][]=[];rows.push(block.slice(1,-1).split("|").map(cell=>cell.trim()));index+=2;while(index<lines.length&&/^\|.+\|$/.test(lines[index].trim())){rows.push(lines[index].trim().slice(1,-1).split("|").map(cell=>cell.trim()));index++}content.push(<div className="article-table-wrap" key={`table-${index}`}><table><thead><tr>{rows[0].map((cell,cellIndex)=><th key={`th-${cellIndex}`}><InlineArticleText text={cell}/></th>)}</tr></thead><tbody>{rows.slice(1).map((row,rowIndex)=><tr key={`tr-${rowIndex}`}>{row.map((cell,cellIndex)=><td key={`td-${rowIndex}-${cellIndex}`}><InlineArticleText text={cell}/></td>)}</tr>)}</tbody></table></div>);continue}
    const aligned=block.match(/^\[(left|center|right|justify)\](.*)\[\/\1\]$/);if(aligned){content.push(<p style={{textAlign:aligned[1] as "left"|"center"|"right"|"justify"}} key={`align-${index}`}><InlineArticleText text={aligned[2]}/></p>);index++;continue}
    if(block.startsWith("###### ")){content.push(<h6 key={`h6-${index}`}><InlineArticleText text={block.slice(7)}/></h6>);index++;continue}
    if(block.startsWith("##### ")){content.push(<h5 key={`h5-${index}`}><InlineArticleText text={block.slice(6)}/></h5>);index++;continue}
    if(block.startsWith("#### ")){content.push(<h4 key={`h4-${index}`}><InlineArticleText text={block.slice(5)}/></h4>);index++;continue}
    if(block.startsWith("### ")){content.push(<h3 key={`h3-${index}`}><InlineArticleText text={block.slice(4)}/></h3>);index++;continue}
    if(block.startsWith("## ")){content.push(<h2 key={`h2-${index}`}><InlineArticleText text={block.slice(3)}/></h2>);index++;continue}
    if(block.startsWith("- ")){const items:ReactNode[]=[];while(index<lines.length&&lines[index].trim().startsWith("- ")){items.push(<li key={`ul-${index}`}><InlineArticleText text={lines[index].trim().slice(2)}/></li>);index++}content.push(<ul key={`ul-group-${index}`}>{items}</ul>);continue}
    if(/^\d+\.\s/.test(block)){const items:ReactNode[]=[];while(index<lines.length&&/^\d+\.\s/.test(lines[index].trim())){items.push(<li key={`ol-${index}`}><InlineArticleText text={lines[index].trim().replace(/^\d+\.\s/,"")}/></li>);index++}content.push(<ol key={`ol-group-${index}`}>{items}</ol>);continue}
    if(block.startsWith("> ")){content.push(<blockquote key={`quote-${index}`}><InlineArticleText text={block.slice(2)}/></blockquote>);index++;continue}
    content.push(<p key={`p-${index}`}><InlineArticleText text={block}/></p>);index++;
  }
  return <>{content}</>;
}
export default async function ArticleDetail({params}:{params:Promise<{slug:string}>}){
  const {slug}=await params;
  const [article,articles]=await Promise.all([readPublishedArticle(slug),readPublishedArticles(10)]);
  if(!article)notFound();
  const otherArticles=articles.filter(item=>item.id!==article.id).slice(0,7);
  const publishedDate=new Date(article.publishedAt||article.updatedAt).toLocaleDateString("id-ID",{day:"numeric",month:"long",year:"numeric"});

  return <InnerLayout>
    <section className="article-subheader">
      <div className="shell">
        <nav className="breadcrumbs" aria-label="Breadcrumb"><Link href="/">Beranda</Link><span>/</span><Link href="/artikel">Artikel</Link><span>/</span><strong>{article.title}</strong></nav>
      </div>
    </section>
    <section className="article-detail-section">
      <div className="shell article-detail-layout">
        <main className="article-detail">
          <header className="article-title-block">
            {article.categories.length>0&&<Link className="article-category-kicker" href={`/artikel/kategori/${article.categories[0].slug}`}>{article.categories[0].name}</Link>}
            <h1>{article.title}</h1>
            <p>{article.excerpt}</p>
            <div className="article-meta"><span>{article.authorName}</span><span>{publishedDate}</span><span>{article.readingMinutes} menit baca</span></div>
          </header>
          {(article.categories.length>1||article.tags.length>0)&&<nav className="article-taxonomy-links" aria-label="Kategori dan tag artikel">{article.categories.slice(1).map(item=><Link className="article-category-link" href={`/artikel/kategori/${item.slug}`} key={`category-${item.id}`}>{item.name}</Link>)}{article.tags.map(item=><Link className="article-tag-link" href={`/artikel/tag/${item.slug}`} key={`tag-${item.id}`}>#{item.name}</Link>)}</nav>}
          {article.featuredImageId&&<div className="article-featured"><Image src={`/api/media/${article.featuredImageId}`} unoptimized fill sizes="(max-width: 760px) 100vw, (max-width: 1100px) 68vw, 800px" priority alt={article.title}/></div>}
          <div className="prose article-prose"><ArticleContent body={article.contentBody}/></div>
        </main>
        <aside className="article-sidebar" aria-label="Daftar artikel lainnya">
          <div className="article-sidebar-card">
            <span className="eyebrow">Baca berikutnya</span>
            <h2>Artikel lainnya</h2>
            {otherArticles.length>0?<nav>{otherArticles.map((item,index)=><Link href={`/artikel/${item.slug}`} key={item.id}><span>{String(index+1).padStart(2,"0")}</span><strong>{item.title}</strong></Link>)}</nav>:<p>Artikel lainnya akan tampil setelah diterbitkan.</p>}
            <Link className="article-all-link" href="/artikel">Lihat semua artikel →</Link>
          </div>
        </aside>
      </div>
    </section>
  </InnerLayout>
}