import React from 'react'
import { resolveMediaUrl } from '@/lib/media'
import { BlogPost, BlogPostSection } from '@/types/blog'

interface BlogPostCardProps {
  post: BlogPost
  onReadMore: (post: BlogPost) => void
  isLatest: boolean
}

const cardStyles = {
  container: {
    position: 'relative' as const,
    backgroundColor: 'white',
    border: '2px solid #8B7D6B',
    padding: '24px',
    marginBottom: '32px',
    boxShadow: '4px 4px 0 rgba(139, 125, 107, 0.2)'
  },
  imageWrapper: {
    marginBottom: '24px',
    marginLeft: '-24px',
    marginRight: '-24px',
    marginTop: '-24px',
    height: '280px',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    backgroundColor: 'white',
    borderBottom: '2px solid #8B7D6B'
  },
  title: {
    fontFamily: 'Abril Fatface, serif',
    fontSize: '28px',
    fontWeight: 900,
    color: '#1E1A17',
    marginBottom: '16px',
    lineHeight: 1.2
  },
  excerpt: {
    fontFamily: 'Spectral, serif',
    fontSize: '16px',
    color: '#4A4A4A',
    lineHeight: 1.6,
    marginBottom: '20px'
  }
}

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

export function BlogPostCard({ post, onReadMore, isLatest }: BlogPostCardProps) {
  const previewUrl = resolveMediaUrl(post.previewImage)

  return (
    <article style={cardStyles.container}>
      {post.isEditorsPick && (
        <div
          style={{
            position: 'absolute',
            top: '32px',
            left: '-60px',
            padding: '8px 64px',
            backgroundColor: '#C89C2B',
            color: '#F7F1E1',
            fontFamily: 'Space Mono, monospace',
            fontSize: '12px',
            letterSpacing: '0.2em',
            textTransform: 'uppercase',
            transform: 'rotate(-45deg)',
            boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
          }}
        >
          Editor's Pick
        </div>
      )}

      {isLatest && (
        <div
          style={{
            position: 'absolute',
            top: '16px',
            right: '16px',
            backgroundColor: '#1E1A17',
            color: '#F7F1E1',
            padding: '6px 12px',
            fontFamily: 'Space Mono, monospace',
            fontSize: '12px',
            letterSpacing: '0.15em',
            textTransform: 'uppercase'
          }}
        >
          Last Blog Post
        </div>
      )}

      {previewUrl && (
        <div
          style={{
            ...cardStyles.imageWrapper,
            backgroundImage: `url('${previewUrl}')`
          }}
        />
      )}

      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: '12px'
      }}>
        <span style={{
          fontFamily: 'Space Mono, monospace',
          fontSize: '12px',
          textTransform: 'uppercase',
          letterSpacing: '0.15em',
          color: '#8B7D6B'
        }}>
          {formatDate(post.createdAt)}
        </span>
      </div>

      <h2 style={cardStyles.title}>{post.title}</h2>

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

      {post.excerpt && <p style={cardStyles.excerpt}>{post.excerpt}</p>}

      <button
        type="button"
        onClick={() => onReadMore(post)}
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '8px',
          padding: '12px 18px',
          border: '2px solid #8B7D6B',
          backgroundColor: 'transparent',
          fontFamily: 'Space Mono, monospace',
          fontSize: '12px',
          letterSpacing: '0.15em',
          textTransform: 'uppercase',
          cursor: 'pointer'
        }}
      >
        Read More
      </button>
    </article>
  )
}

interface BlogPostModalProps {
  post: BlogPost
  onClose: () => void
}

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>
  )
}

export function BlogPostModal({ post, onClose }: BlogPostModalProps) {
  const heroImage = resolveMediaUrl(post.previewImage)

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        zIndex: 1000,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-start',
        overflowY: 'auto',
        padding: '48px 20px'
      }}
      onClick={onClose}
    >
      <div
        style={{
          position: 'relative',
          maxWidth: '820px',
          width: '100%',
          backgroundColor: '#F7F1E1',
          border: '2px solid #8B7D6B',
          padding: '32px',
          boxShadow: '0 20px 60px rgba(0,0,0,0.35)'
        }}
        onClick={(event) => event.stopPropagation()}
      >
        <button
          type="button"
          onClick={onClose}
          style={{
            position: 'absolute',
            top: '16px',
            right: '16px',
            background: 'transparent',
            border: 'none',
            fontSize: '24px',
            cursor: 'pointer'
          }}
          aria-label="Close"
        >
          X
        </button>

        {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>

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

          {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>
    </div>
  )
}
