import { notFound } from 'next/navigation'
import { resolveMediaUrl } from '@/lib/media'
import { BlogPost, BlogPostSection } from '@/types/blog'

async function getBlogPost(slug: string): Promise<BlogPost | null> {
  const baseUrl = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:4005'

  try {
    const response = await fetch(`${baseUrl}/posts/${slug}`, {
      cache: 'no-store',
      next: { revalidate: 0 }
    })

    if (!response.ok) {
      if (response.status === 404) {
        return null
      }
      console.error(`[frontend] Failed to load post: ${response.status}`)
      return null
    }

    const payload = await response.json()
    return payload.data || null
  } catch (error) {
    console.error('[frontend] Failed to load post', error)
    return null
  }
}

async function getAllBlogPosts(): Promise<BlogPost[]> {
  const baseUrl = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:4005'

  try {
    const response = await fetch(`${baseUrl}/posts`, {
      cache: 'no-store',
      next: { revalidate: 0 }
    })

    if (!response.ok) {
      return []
    }

    const payload = await response.json()
    return Array.isArray(payload.data) ? payload.data : []
  } catch (error) {
    console.error('[frontend] Failed to load posts', error)
    return []
  }
}

function formatDate(timestamp: string) {
  const date = new Date(timestamp)
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

function renderSection(section: BlogPostSection) {
  const imageUrl = resolveMediaUrl(section.image)

  return (
    <div key={section.id} style={{ marginBottom: '32px' }}>
      {section.text && (
        <p
          style={{
            fontFamily: 'Spectral, serif',
            fontSize: '16px',
            color: '#4A4A4A',
            lineHeight: 1.8,
            marginBottom: imageUrl ? '18px' : 0
          }}
        >
          {section.text}
        </p>
      )}
      {imageUrl && (
        <div
          style={{
            border: '2px solid #8B7D6B',
            backgroundColor: 'white',
            padding: '6px',
            maxWidth: '420px',
            width: '100%',
            margin: '0 auto'
          }}
        >
          <img
            src={imageUrl}
            alt="Blog section"
            style={{
              display: 'block',
              width: '100%',
              height: 'auto',
              backgroundColor: '#F7F1E1'
            }}
          />
        </div>
      )}
    </div>
  )
}

function shuffleArray<T>(array: T[]): T[] {
  const shuffled = [...array]
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
  }
  return shuffled
}

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug)

  if (!post) {
    notFound()
  }

  const allPosts = await getAllBlogPosts()
  const otherPosts = allPosts.filter(p => p.id !== post.id)
  const randomPosts = shuffleArray(otherPosts).slice(0, 3)

  const heroImage = resolveMediaUrl(post.previewImage)

  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#F7F1E1' }}>
      <div
        style={{
          maxWidth: '820px',
          width: '100%',
          margin: '0 auto',
          padding: '48px 20px',
          backgroundColor: '#F7F1E1',
          position: 'relative'
        }}
      >
        <a
          href="/"
          style={{
            position: 'absolute',
            top: '16px',
            left: '20px',
            padding: '8px 12px',
            border: '1px solid #8B7D6B',
            backgroundColor: '#F7F1E1',
            fontFamily: 'Space Mono, monospace',
            fontSize: '12px',
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            textDecoration: 'none',
            color: '#1E1A17',
            zIndex: 10
          }}
        >
          &larr; Back
        </a>

        <div
          style={{
            position: 'relative',
            backgroundColor: '#F7F1E1',
            border: '2px solid #8B7D6B',
            padding: '32px',
            boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
            marginTop: '48px'
          }}
        >
          {heroImage && (
            <div
              style={{
                marginLeft: '-32px',
                marginRight: '-32px',
                marginTop: '-32px',
                borderBottom: '2px solid #8B7D6B'
              }}
            >
              <img
                src={heroImage}
                alt={post.title}
                style={{ display: 'block', width: '100%', height: 'auto' }}
              />
            </div>
          )}

          <header style={{ marginTop: '24px', marginBottom: '32px' }}>
            <div style={{
              display: 'flex',
              gap: '16px',
              alignItems: 'center',
              marginBottom: '12px'
            }}>
              {post.isEditorsPick && (
                <span style={{
                  backgroundColor: '#C89C2B',
                  color: '#F7F1E1',
                  padding: '6px 12px',
                  fontFamily: 'Space Mono, monospace',
                  fontSize: '12px',
                  letterSpacing: '0.15em',
                  textTransform: 'uppercase'
                }}>
                  Editor's Pick
                </span>
              )}
              <span style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                letterSpacing: '0.15em',
                color: '#8B7D6B',
                textTransform: 'uppercase'
              }}>
                {formatDate(post.createdAt)}
              </span>
            </div>

            <h1 style={{
              fontFamily: 'Abril Fatface, serif',
              fontSize: '42px',
              color: '#1E1A17',
              marginBottom: '16px'
            }}>
              {post.title}
            </h1>

            {post.linkUrl && (
              <a
                href={post.linkUrl}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: 'inline-block',
                  backgroundColor: '#1E1A17',
                  color: '#F7F1E1',
                  padding: '12px 22px',
                  fontFamily: 'Space Mono, monospace',
                  fontSize: '12px',
                  letterSpacing: '0.15em',
                  textTransform: 'uppercase',
                  border: '2px solid #8B7D6B'
                }}
              >
                To Produkt
              </a>
            )}
          </header>

          <div>
            {post.sections.map(section => renderSection(section))}
          </div>

          {post.footer && (
            <footer style={{
              borderTop: '2px solid #8B7D6B',
              marginTop: '32px',
              paddingTop: '24px'
            }}>
              <p style={{
                fontFamily: 'Spectral, serif',
                fontSize: '15px',
                color: '#4A4A4A',
                lineHeight: 1.6
              }}>
                {post.footer}
              </p>
            </footer>
          )}
        </div>

        {randomPosts.length > 0 && (
          <section style={{ marginTop: '64px' }}>
            <h2 style={{
              fontFamily: 'Abril Fatface, serif',
              fontSize: '32px',
              color: '#1E1A17',
              marginBottom: '32px',
              textAlign: 'center'
            }}>
              More Articles
            </h2>
            <div style={{ display: 'grid', gap: '24px' }}>
              {randomPosts.map(article => {
                const previewUrl = resolveMediaUrl(article.previewImage)
                return (
                  <a
                    key={article.id}
                    href={`/blog/${article.slug}`}
                    style={{
                      display: 'block',
                      backgroundColor: 'white',
                      border: '2px solid #8B7D6B',
                      padding: '16px',
                      textDecoration: 'none',
                      color: 'inherit',
                      transition: 'transform 0.2s'
                    }}
                  >
                    <div style={{ display: 'flex', gap: '16px' }}>
                      {previewUrl && (
                        <div
                          style={{
                            width: '120px',
                            height: '120px',
                            flexShrink: 0,
                            backgroundImage: `url('${previewUrl}')`,
                            backgroundSize: 'cover',
                            backgroundPosition: 'center',
                            border: '1px solid #8B7D6B'
                          }}
                        />
                      )}
                      <div style={{ flex: 1 }}>
                        <h3 style={{
                          fontFamily: 'Abril Fatface, serif',
                          fontSize: '18px',
                          color: '#1E1A17',
                          marginBottom: '8px'
                        }}>
                          {article.title}
                        </h3>
                        {article.excerpt && (
                          <p style={{
                            fontFamily: 'Spectral, serif',
                            fontSize: '14px',
                            color: '#4A4A4A',
                            lineHeight: 1.5,
                            marginBottom: '8px'
                          }}>
                            {article.excerpt.substring(0, 100)}...
                          </p>
                        )}
                        <span style={{
                          fontFamily: 'Space Mono, monospace',
                          fontSize: '10px',
                          color: '#8B7D6B',
                          letterSpacing: '0.1em',
                          textTransform: 'uppercase'
                        }}>
                          Read More →
                        </span>
                      </div>
                    </div>
                  </a>
                )
              })}
            </div>
          </section>
        )}
      </div>

      <footer
        style={{
          backgroundColor: '#F7F1E1',
          borderTop: '2px solid #8B7D6B',
          padding: '32px 20px',
          marginTop: '64px'
        }}
      >
        <div style={{ maxWidth: '820px', margin: '0 auto' }}>
          <div style={{ textAlign: 'center' }}>
            <h3
              style={{
                fontFamily: 'Abril Fatface, serif',
                fontSize: '24px',
                margin: 0,
                color: '#1E1A17'
              }}
            >
              The Curated Finds
            </h3>
            <p
              style={{
                fontFamily: 'Spectral, serif',
                fontSize: '14px',
                color: '#4A4A4A',
                marginTop: '8px'
              }}
            >
              Handpicked treasures. Honest descriptions. Careful packaging.
            </p>
            <div
              style={{
                margin: '16px auto',
                width: '120px',
                height: '2px',
                backgroundColor: '#8B7D6B'
              }}
            />
            <p
              style={{
                color: '#8B7D6B',
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px'
              }}
            >
              (c) {new Date().getFullYear()} The Curated Finds - All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}
