import React from 'react'
import Link from 'next/link'
import SeoNavbar from '@/components/seo/SeoNavbar'
import SeoFooter from '@/components/seo/SeoFooter'
import { BlogPost } from '@/lib/blogPosts'

const SITE = 'https://greenlenspro.com'

/**
 * JSON-LD für Blogposts. BlogPosting liefert Autor und Datum, FAQPage und HowTo
 * sind die beiden Formate, aus denen AI-Antwortsysteme direkt extrahieren.
 * Ohne diese Blöcke bleibt der Beitrag für sie unstrukturierter Fließtext.
 */
function buildBlogSchema(post: BlogPost) {
  const graph: Record<string, unknown>[] = [
    {
      '@type': 'BlogPosting',
      '@id': `${SITE}${post.canonical}#article`,
      headline: post.title,
      description: post.metaDescription,
      image: `${SITE}${post.heroImage}`,
      datePublished: post.publishedAtIso,
      dateModified: post.updatedAtIso || post.publishedAtIso,
      inLanguage: post.locale,
      mainEntityOfPage: { '@type': 'WebPage', '@id': `${SITE}${post.canonical}` },
      author: {
        '@type': 'Person',
        name: post.author.name,
        jobTitle: post.author.role,
      },
      publisher: {
        '@type': 'Organization',
        name: 'GreenLens',
        url: SITE,
      },
      ...(post.sources?.length
        ? { citation: post.sources.map((source) => ({ '@type': 'CreativeWork', name: source.title, url: source.url })) }
        : {}),
    },
  ]

  if (post.faqs?.length) {
    graph.push({
      '@type': 'FAQPage',
      '@id': `${SITE}${post.canonical}#faq`,
      mainEntity: post.faqs.map((faq) => ({
        '@type': 'Question',
        name: faq.question,
        acceptedAnswer: { '@type': 'Answer', text: faq.answer },
      })),
    })
  }

  if (post.howToSteps?.length) {
    graph.push({
      '@type': 'HowTo',
      '@id': `${SITE}${post.canonical}#howto`,
      name: post.howToName || post.title,
      step: post.howToSteps.map((step, index) => ({
        '@type': 'HowToStep',
        position: index + 1,
        name: step.name.replace(/^\d+\.\s*/, ''),
        text: step.text,
      })),
    })
  }

  return { '@context': 'https://schema.org', '@graph': graph }
}

function renderFormattedText(text: string) {
  if (!text) return null
  const regex = /\[([^\]]+)\]\(([^)]+)\)/g
  const parts: React.ReactNode[] = []
  let lastIndex = 0
  let match: RegExpExecArray | null

  while ((match = regex.exec(text)) !== null) {
    if (match.index > lastIndex) {
      parts.push(text.substring(lastIndex, match.index))
    }
    const linkText = match[1]
    const url = match[2]
    const isExternal = url.startsWith('http')
    if (isExternal) {
      parts.push(
        <a
          key={match.index}
          href={url}
          target="_blank"
          rel="noopener noreferrer"
          className="text-emerald-700 underline underline-offset-2 hover:text-emerald-900 font-semibold"
        >
          {linkText}
        </a>
      )
    } else {
      parts.push(
        <Link
          key={match.index}
          href={url}
          className="text-emerald-700 underline underline-offset-2 hover:text-emerald-900 font-semibold"
        >
          {linkText}
        </Link>
      )
    }
    lastIndex = regex.lastIndex
  }

  if (lastIndex < text.length) {
    parts.push(text.substring(lastIndex))
  }

  return parts.length > 0 ? parts : text
}

export function BlogPostTemplate({ post }: { post: BlogPost }) {
  return (
    <div className="bg-[#fdfbf6] text-on-surface font-body antialiased min-h-screen relative overflow-hidden">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(buildBlogSchema(post)) }}
      />

      {/* Navigation Header */}
      <SeoNavbar locale="en" />

      {/* Decorative Green Glow Blobs */}
      <div className="absolute inset-0 pointer-events-none -z-10" aria-hidden="true">
        <div className="absolute top-[-5%] left-[-10%] w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#c2e5cc] blur-[120px] rounded-full mix-blend-multiply opacity-70" />
        <div className="absolute top-[20%] right-[-5%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] bg-[#e5f0cb] blur-[100px] rounded-full mix-blend-multiply opacity-80" />
        <div className="absolute top-[50%] left-[10%] w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-[#a8e0b8] blur-[110px] rounded-full mix-blend-multiply opacity-60" />
      </div>

      {/* Main Container */}
      <main className="pt-28 pb-20">
        {/* Header / Breadcrumb & Meta */}
        <header className="py-12 bg-white/80 backdrop-blur-md border-b border-emerald-900/10 shadow-xs">
          <div className="max-w-[1320px] mx-auto px-6">
            {/* Breadcrumbs */}
            <nav className="flex items-center gap-2 text-xs text-emerald-800/70 mb-6 font-semibold tracking-wide">
              <Link href="/" className="hover:text-emerald-700 transition-colors">
                Home
              </Link>
              <span>/</span>
              <Link href="/blog" className="hover:text-emerald-700 transition-colors">
                Blog
              </Link>
              <span>/</span>
              <span className="text-emerald-700 font-bold">{post.category}</span>
            </nav>

            {/* Category & Read Time */}
            <div className="flex items-center gap-3 mb-5">
              <span className="bg-emerald-600/10 text-emerald-800 border border-emerald-600/20 text-xs font-extrabold tracking-wider uppercase px-3.5 py-1 rounded-full shadow-xs">
                🌿 {post.category}
              </span>
              <span className="text-xs text-emerald-900/70 font-semibold">
                • {post.readTime}
              </span>
            </div>

            {/* Title & Subtitle */}
            <h1 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-emerald-950 mb-5 leading-[1.15]">
              {post.title}
            </h1>
            <p className="text-lg md:text-xl text-emerald-900/80 leading-relaxed max-w-[850px] mb-8 font-medium">
              {post.subtitle}
            </p>

            {/* Author Info */}
            <div className="flex items-center gap-4 pt-6 border-t border-emerald-900/10">
              <div className="w-12 h-12 rounded-full bg-emerald-600 text-white font-bold text-lg flex items-center justify-center shadow-md border-2 border-emerald-400">
                🌱
              </div>
              <div>
                <div className="font-bold text-sm text-emerald-950">{post.author.name}</div>
                <div className="text-xs text-emerald-700 font-medium">
                  {post.author.role} • Updated {post.publishedAt}
                </div>
              </div>
            </div>
          </div>
        </header>

        {/* Content & Sidebar Grid */}
        <div className="max-w-[1320px] mx-auto px-6 pt-10 grid grid-cols-1 lg:grid-cols-12 gap-12">
          {/* Main Article Content */}
          <div className="lg:col-span-8">
            {/* Featured Hero Image */}
            <div className="relative w-full h-[360px] sm:h-[450px] rounded-2xl overflow-hidden shadow-2xl mb-10 border-2 border-emerald-900/10 group">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={post.heroImage}
                alt={post.heroImageAlt}
                className="w-full h-full object-cover"
              />
              {/* Dynamic Hero Overlay Badge */}
              <div className="absolute bottom-6 left-6 right-6 sm:right-auto max-w-[350px] bg-white/95 backdrop-blur-md p-4 rounded-xl border-2 border-emerald-600/30 flex items-center gap-3 shadow-2xl">
                <div className="w-2 h-10 bg-emerald-600 rounded-full shrink-0"></div>
                <div>
                  <div className="font-display font-bold text-sm text-emerald-950 mb-0.5">
                    {post.heroImageBadgeTitle}
                  </div>
                  <div className="text-[10px] font-extrabold tracking-[0.15em] uppercase text-emerald-700">
                    {post.heroImageBadgeLabel}
                  </div>
                </div>
              </div>
            </div>

            {/* Direct Answer Summary Callout Box (AI-Overview Ready) */}
            {post.directAnswer && (
              <div className="bg-emerald-500/10 border-l-4 border-emerald-600 p-6 rounded-r-2xl mb-10 shadow-sm border-y border-r border-emerald-600/20">
                <div className="flex items-center gap-2 text-emerald-800 font-extrabold text-xs uppercase tracking-wider mb-2">
                  <span>⚡ Quick Botanical Answer</span>
                </div>
                <p className="text-emerald-950 font-medium leading-relaxed text-base max-w-[72ch]">
                  {renderFormattedText(post.directAnswer)}
                </p>
              </div>
            )}

            {/* Mobile TOC */}
            {post.toc && post.toc.length > 0 && (
              <div className="lg:hidden bg-white p-6 rounded-2xl border-2 border-emerald-600/20 mb-10 shadow-sm">
                <div className="font-extrabold text-xs text-emerald-800 uppercase tracking-widest mb-3">
                  Table of Contents
                </div>
                <ul className="space-y-2.5 text-sm font-medium">
                  {post.toc.map((item) => (
                    <li key={item.id}>
                      <a href={`#${item.id}`} className="text-emerald-700 hover:text-emerald-900 hover:underline">
                        {item.label}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {/* Body Sections */}
            <div className="space-y-12 text-emerald-950 text-base leading-relaxed">
              {post.sections.map((section, sIdx) => (
                <React.Fragment key={section.id}>
                  <section id={section.id} className="scroll-mt-28">
                    {section.eyebrow && (
                      <div className="text-xs font-extrabold tracking-widest text-emerald-700 uppercase mb-1">
                        {section.eyebrow}
                      </div>
                    )}
                    <h2 className="font-display text-2xl sm:text-3xl font-bold text-emerald-950 mb-4">
                      {section.title}
                    </h2>
                    <p className="text-emerald-900/80 text-base sm:text-lg leading-relaxed mb-6 font-normal max-w-[68ch]">
                      {renderFormattedText(section.body)}
                    </p>

                    {/* Bullets */}
                    {section.bullets && section.bullets.length > 0 && (
                      <ul className="space-y-3 mb-6 bg-white p-6 rounded-2xl border border-emerald-600/20 shadow-xs">
                        {section.bullets.map((bullet, idx) => (
                          <li key={idx} className="flex items-start gap-3 text-sm sm:text-base text-emerald-900">
                            <span className="w-2.5 h-2.5 rounded-full bg-emerald-600 mt-2 shrink-0 shadow-xs" />
                            <span className="max-w-[76ch]">{renderFormattedText(bullet)}</span>
                          </li>
                        ))}
                      </ul>
                    )}

                    {/* Table */}
                    {section.table && (
                      <div className="overflow-x-auto mb-8 rounded-2xl border-2 border-emerald-600/20 shadow-sm bg-white">
                        <table className="w-full text-left border-collapse text-sm">
                          <thead className="bg-emerald-900 text-white font-bold">
                            <tr>
                              {section.table.headers.map((h, i) => (
                                <th key={i} className="p-3.5 sm:p-4 border-b border-emerald-800">
                                  {h}
                                </th>
                              ))}
                            </tr>
                          </thead>
                          <tbody className="divide-y divide-emerald-600/10">
                            {section.table.rows.map((row, rIdx) => (
                              <tr key={rIdx} className="hover:bg-emerald-500/5 transition-colors">
                                {row.map((cell, cIdx) => (
                                  <td
                                    key={cIdx}
                                    className={`p-3.5 sm:p-4 text-emerald-900 ${
                                      cIdx === 0 ? 'font-bold text-emerald-950' : ''
                                    }`}
                                  >
                                    {renderFormattedText(cell)}
                                  </td>
                                ))}
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    )}

                    {/* Callout */}
                    {section.callout && (
                      <div
                        className={`p-5 rounded-2xl border-2 mb-6 ${
                          section.callout.type === 'warning'
                            ? 'bg-amber-500/10 border-amber-500/30 text-amber-950'
                            : 'bg-emerald-500/10 border-emerald-600/30 text-emerald-950'
                        }`}
                      >
                        <div className="font-bold text-sm mb-1">{section.callout.title}</div>
                        <div className="text-sm opacity-90">{renderFormattedText(section.callout.body)}</div>
                      </div>
                    )}
                  </section>

                  {/* Mid-Content Conversion CTA Widget after 2nd section */}
                  {sIdx === 1 && (
                    <div className="my-10 p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-emerald-900 via-emerald-950 to-ink text-white border-2 border-emerald-400/30 shadow-xl flex flex-col sm:flex-row items-center justify-between gap-6">
                      <div className="space-y-1.5 text-center sm:text-left">
                        <div className="flex items-center justify-center sm:justify-start gap-2 text-xs font-extrabold tracking-widest text-emerald-400 uppercase">
                          <span>🌿 Instant AI Health Diagnosis</span>
                        </div>
                        <h3 className="font-display text-xl sm:text-2xl font-bold text-white">
                          Unsure what is wrong with your plant?
                        </h3>
                        <p className="text-white/80 text-sm max-w-[480px]">
                          Scan your plant leaf with GreenLens AI for an immediate disease check, pest identification, and custom care plan.
                        </p>
                      </div>
                      <Link
                        href="/"
                        className="shrink-0 bg-emerald-500 hover:bg-emerald-400 text-ink font-bold px-6 py-3.5 rounded-full text-sm shadow-xl hover:scale-105 transition-all duration-200"
                      >
                        Start Free Scan ➔
                      </Link>
                    </div>
                  )}
                </React.Fragment>
              ))}

              {/* HowTo Step Guide */}
              {post.howToSteps && post.howToSteps.length > 0 && (
                <section
                  id="howto-step"
                  className="scroll-mt-28 bg-white p-6 sm:p-8 rounded-2xl border-2 border-emerald-600/20 shadow-md"
                >
                  <div className="text-xs font-extrabold tracking-widest text-emerald-700 uppercase mb-2">
                    Action Plan
                  </div>
                  <h2 className="font-display text-2xl font-bold text-emerald-950 mb-6">
                    {post.howToName ?? 'Step-by-Step Action Guide'}
                  </h2>
                  <div className="space-y-4">
                    {post.howToSteps.map((step, idx) => (
                      <div
                        key={idx}
                        className="flex items-start gap-4 p-4.5 rounded-xl bg-emerald-50/50 border border-emerald-600/20"
                      >
                        <div className="w-8 h-8 rounded-full bg-emerald-600 text-white font-bold flex items-center justify-center shrink-0 text-sm shadow-sm">
                          {idx + 1}
                        </div>
                        <div>
                          <div className="font-bold text-emerald-950 text-base mb-1">{step.name}</div>
                          <div className="text-emerald-900/80 text-sm">{step.text}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* FAQs */}
              {post.faqs && post.faqs.length > 0 && (
                <section id="faq" className="scroll-mt-28 pt-8 border-t-2 border-emerald-600/20">
                  <div className="text-xs font-extrabold tracking-widest text-emerald-700 uppercase mb-2">
                    Questions & Answers
                  </div>
                  <h2 className="font-display text-2xl sm:text-3xl font-bold text-emerald-950 mb-6">
                    Frequently Asked Questions
                  </h2>
                  <div className="space-y-4">
                    {post.faqs.map((faq, idx) => (
                      <div key={idx} className="p-6 rounded-2xl bg-white border border-emerald-600/20 shadow-xs">
                        <h3 className="font-bold text-base sm:text-lg text-emerald-950 mb-2">
                          {faq.question}
                        </h3>
                        <p className="text-emerald-900/80 text-sm sm:text-base leading-relaxed">
                          {faq.answer}
                        </p>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* App Banner */}
              <div className="p-8 sm:p-10 rounded-3xl bg-gradient-to-br from-emerald-900 via-emerald-950 to-ink text-white border-2 border-emerald-400/30 text-center shadow-2xl my-12 relative overflow-hidden">
                <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 blur-3xl rounded-full pointer-events-none" />
                <span className="text-xs font-extrabold tracking-widest uppercase text-emerald-400 block mb-2">
                  GreenLens Pro iOS App
                </span>
                <h3 className="font-display text-2xl sm:text-3xl font-bold mt-1 mb-3 text-white">
                  Identify Any Plant & Get Custom Care Plans
                </h3>
                <p className="text-white/80 text-sm sm:text-base max-w-[600px] mx-auto mb-6 leading-relaxed">
                  Scan your houseplants in seconds, diagnose leaf diseases, and get automatic watering reminders tailored to your space.
                </p>
                <a
                  href="https://apps.apple.com/app/greenlens"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-ink font-bold px-7 py-3.5 rounded-full shadow-xl hover:scale-105 transition-all duration-200"
                >
                  <span>Start First Scan Free — No Account Needed</span>
                </a>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <aside className="lg:col-span-4 hidden lg:block">
            <div className="sticky top-28 space-y-8">
              {/* Table of Contents */}
              {post.toc && post.toc.length > 0 && (
                <div className="bg-white p-6 rounded-2xl border-2 border-emerald-600/20 shadow-sm">
                  <div className="font-extrabold text-xs uppercase tracking-widest text-emerald-800 mb-4">
                    Table of Contents
                  </div>
                  <nav className="space-y-2 text-sm font-medium">
                    {post.toc.map((item) => (
                      <a
                        key={item.id}
                        href={`#${item.id}`}
                        className="block text-emerald-900/70 hover:text-emerald-700 transition-colors py-1 border-l-2 border-transparent hover:border-emerald-600 pl-3"
                      >
                        {item.label}
                      </a>
                    ))}
                  </nav>
                </div>
              )}

              {/* Related Articles */}
              {post.relatedPosts && post.relatedPosts.length > 0 && (
                <div className="bg-white p-6 rounded-2xl border-2 border-emerald-600/20 shadow-sm">
                  <div className="font-extrabold text-xs uppercase tracking-widest text-emerald-800 mb-4">
                    Related Guides
                  </div>
                  <div className="space-y-4">
                    {post.relatedPosts.map((related) => (
                      <Link
                        key={related.slug}
                        href={`/blog/${related.slug}`}
                        className="group block p-3.5 rounded-xl hover:bg-emerald-50 border border-transparent hover:border-emerald-600/20 transition-all"
                      >
                        <div className="text-[10px] font-extrabold text-emerald-700 uppercase tracking-wider mb-1">
                          {related.category} • {related.readTime}
                        </div>
                        <div className="font-bold text-sm text-emerald-950 group-hover:text-emerald-700 transition-colors line-clamp-2 leading-snug">
                          {related.title}
                        </div>
                      </Link>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </aside>
        </div>

        {/* Methodik & Quellen — Vertrauenssignal, bewusst am Ende und vollständig sichtbar */}
        {(post.methodology || post.sources?.length) && (
          <div className="max-w-[1320px] mx-auto px-6 mt-16 lg:pr-[calc(33.333%+3rem)]">
            <section className="bg-white/80 border border-emerald-900/10 rounded-2xl p-7">
              {post.methodology && (
                <>
                  <h2 className="text-sm font-extrabold uppercase tracking-widest text-emerald-800 mb-3">
                    How this guide was compiled
                  </h2>
                  <p className="text-[15px] leading-relaxed text-emerald-950/80">{post.methodology}</p>
                </>
              )}

              {post.sources && post.sources.length > 0 && (
                <>
                  <h2 className="text-sm font-extrabold uppercase tracking-widest text-emerald-800 mt-7 mb-3">
                    Sources
                  </h2>
                  <ul className="space-y-2">
                    {post.sources.map((source) => (
                      <li key={source.url} className="text-[15px] leading-relaxed">
                        <a
                          href={source.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-emerald-700 underline underline-offset-2 hover:text-emerald-900"
                        >
                          {source.title}
                        </a>
                        <span className="text-emerald-950/60"> — {source.publisher}</span>
                      </li>
                    ))}
                  </ul>
                </>
              )}

              <p className="text-xs text-emerald-950/50 mt-6">
                Published {post.publishedAt}
                {post.updatedAt ? ` · Last updated ${post.updatedAt}` : ''} · Written by {post.author.name},{' '}
                {post.author.role}
              </p>
            </section>
          </div>
        )}
      </main>

      {/* Site Footer */}
      <SeoFooter locale="en" />
    </div>
  )
}