import { notFound } from "next/navigation"
import { buildAbsoluteUrl } from "@/lib/seo-registry"
import { generateRegistryMetadata, generateRegistryStructuredData } from "@/lib/seo"
import { Breadcrumbs } from "@/components/breadcrumbs"
import { getPageBySlug } from "@/lib/wordpress-data-loader"
import { FAQSchema } from "@/components/faq-schema"
import { FAQSection } from "@/components/faq-section"
import type { Metadata } from "next"

const WORDPRESS_SLUG = "faqs"

export async function generateMetadata(): Promise<Metadata> {
  const page = getPageBySlug(WORDPRESS_SLUG)

  if (!page) {
    return {
      title: "Page Not Found | Rocky Mountain Vending",
    }
  }

  return generateRegistryMetadata("faqs", {
    date: page.date,
    modified: page.modified,
    image: page.images?.[0]?.localPath,
  })
}

export default async function FAQsPage() {
  try {
    const page = getPageBySlug(WORDPRESS_SLUG)

    if (!page) {
      notFound()
    }

    // Extract FAQs from content
    const faqs: Array<{ question: string; answer: string }> = []
    if (page.content) {
      const contentStr = String(page.content)
      // Extract FAQ items from accordion structure
      const questionMatches = contentStr.matchAll(
        /<span class="ekit-accordion-title">([^<]+)<\/span>/g
      )
      // Extract full answer content
      const answerMatches = contentStr.matchAll(
        /<div class="elementskit-card-body ekit-accordion--content">([\s\S]*?)<\/div>\s*<\/div>\s*<!-- \.elementskit-card END -->/g
      )

      const questions = Array.from(questionMatches).map((m) => m[1].trim())
      const answers = Array.from(answerMatches).map((m) => {
        let answer = m[1].trim()
        answer = answer
          .replace(/\n\s*\n/g, "\n")
          .replace(/>\s+</g, "><")
          .trim()
        return answer
      })

      // Match questions with answers
      questions.forEach((question, index) => {
        if (answers[index]) {
          faqs.push({ question, answer: answers[index] })
        }
      })
    }

    const pageUrl = buildAbsoluteUrl("/about/faqs")
    const structuredData = generateRegistryStructuredData("faqs", {
      datePublished: page.date,
      dateModified: page.modified || page.date,
    })

    return (
      <>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
        {faqs.length > 0 && (
          <div className="public-page">
            <Breadcrumbs
              className="mb-6"
              items={[
                { label: "About", href: "/about" },
                { label: "FAQs", href: "/about/faqs" },
              ]}
            />
            <FAQSchema
              faqs={faqs}
              pageUrl={pageUrl}
            />
            <FAQSection faqs={faqs} className="pt-0" />
          </div>
        )}
      </>
    )
  } catch (error) {
    if (process.env.NODE_ENV === "development") {
      console.error("Error rendering FAQs page:", error)
    }
    notFound()
  }
}