import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import Layout from '../components/Layout'
import '../App.css'

interface BlogPost {
  id: number
  title: string
  excerpt: string
  content: string
  author: string
  date: string
  readTime: string
  category: string
  tags: string[]
  image?: string
}

function Blog() {
  const { t } = useTranslation()

  // Mock blog posts data
  const blogPosts: BlogPost[] = [
    {
      id: 1,
      title: "Mastering Counter-Strike: Advanced Tactics and Strategies",
      excerpt: "Learn the advanced tactics that separate professional players from casual gamers. From positioning to communication, discover the secrets of competitive CS.",
      content: "Full article content here...",
      author: "ProGamer99",
      date: "2025-10-01",
      readTime: "8 min read",
      category: "Strategy",
      tags: ["Counter-Strike", "Tactics", "Professional"],
      image: "🎯"
    },
    {
      id: 2,
      title: "The Evolution of Esports: From LAN Parties to Global Tournaments",
      excerpt: "Explore how esports has grown from small local tournaments to billion-dollar industry with global audiences and professional athletes.",
      content: "Full article content here...",
      author: "EsportsAnalyst",
      date: "2025-09-28",
      readTime: "6 min read",
      category: "Esports",
      tags: ["Esports", "History", "Tournaments"],
      image: "🏆"
    },
    {
      id: 3,
      title: "Building the Perfect Gaming Setup: Hardware Guide 2025",
      excerpt: "A comprehensive guide to building the ultimate gaming setup for Counter-Strike and other competitive games. From monitors to peripherals.",
      content: "Full article content here...",
      author: "TechReviewer",
      date: "2025-09-25",
      readTime: "12 min read",
      category: "Hardware",
      tags: ["Gaming Setup", "Hardware", "PC Building"],
      image: "🖥️"
    },
    {
      id: 4,
      title: "Community Spotlight: Rising Stars in CS Competitive Scene",
      excerpt: "Meet the up-and-coming players who are making waves in the Counter-Strike competitive scene. Their stories, strategies, and paths to success.",
      content: "Full article content here...",
      author: "CommunityManager",
      date: "2025-09-22",
      readTime: "10 min read",
      category: "Community",
      tags: ["Players", "Community", "Rising Stars"],
      image: "⭐"
    },
    {
      id: 5,
      title: "Mental Health in Competitive Gaming: Staying Sharp",
      excerpt: "The importance of mental health in competitive gaming. Tips and strategies for maintaining focus, managing stress, and performing at your best.",
      content: "Full article content here...",
      author: "SportsPsychologist",
      date: "2025-09-20",
      readTime: "7 min read",
      category: "Wellness",
      tags: ["Mental Health", "Gaming", "Performance"],
      image: "🧠"
    },
    {
      id: 6,
      title: "Server Administration: Running Your Own CS Game Server",
      excerpt: "A complete guide to setting up and managing your own Counter-Strike game server. From basic setup to advanced configuration and maintenance.",
      content: "Full article content here...",
      author: "ServerAdmin",
      date: "2025-09-18",
      readTime: "15 min read",
      category: "Technical",
      tags: ["Server", "Administration", "Technical"],
      image: "🖧"
    }
  ]

  const categories = [...new Set(blogPosts.map(post => post.category))]
  const featuredPost = blogPosts[0]
  const recentPosts = blogPosts.slice(1, 4)

  return (
    <Layout currentPage="blog">
      {/* Blog Page Header */}
      <section className="blog-header" style={{
        padding: '120px 2rem 60px',
        background: 'linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)',
        textAlign: 'center'
      }}>
        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
          <h1 style={{
            fontSize: '3.5rem',
            fontWeight: 'bold',
            color: 'var(--text-primary)',
            marginBottom: '1rem'
          }}>
            {t('blog.title')}
          </h1>
          <p style={{
            fontSize: '1.3rem',
            color: 'var(--text-secondary)',
            lineHeight: '1.6'
          }}>
            {t('blog.subtitle')}
          </p>
        </div>
      </section>

      {/* Featured Post */}
      <section className="featured-post" style={{ padding: '0 2rem 60px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <h2 style={{
            fontSize: '2rem',
            color: 'var(--text-primary)',
            marginBottom: '2rem',
            textAlign: 'center'
          }}>
            {t('blog.featuredPost')}
          </h2>
          <div style={{
            background: 'var(--bg-card)',
            border: '1px solid var(--border-color)',
            borderRadius: '12px',
            overflow: 'hidden',
            boxShadow: '0 4px 20px var(--shadow)',
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: '2rem',
            alignItems: 'center'
          }}>
            <div style={{ padding: '3rem' }}>
              <div style={{
                display: 'inline-block',
                background: 'var(--accent-color)',
                color: 'white',
                padding: '0.5rem 1rem',
                borderRadius: '20px',
                fontSize: '0.9rem',
                fontWeight: 'bold',
                marginBottom: '1rem'
              }}>
                {featuredPost.category}
              </div>
              <h3 style={{
                fontSize: '2rem',
                color: 'var(--text-primary)',
                marginBottom: '1rem',
                lineHeight: '1.3'
              }}>
                {featuredPost.title}
              </h3>
              <p style={{
                color: 'var(--text-secondary)',
                fontSize: '1.1rem',
                lineHeight: '1.6',
                marginBottom: '1.5rem'
              }}>
                {featuredPost.excerpt}
              </p>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: '1rem',
                marginBottom: '1.5rem'
              }}>
                <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                  {t('blog.by')} {featuredPost.author}
                </span>
                <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                  {featuredPost.date}
                </span>
                <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                  {featuredPost.readTime}
                </span>
              </div>
              <Link
                to={`/blog/${featuredPost.id}`}
                style={{
                  display: 'inline-block',
                  background: 'var(--accent-color)',
                  color: 'white',
                  padding: '1rem 2rem',
                  borderRadius: '8px',
                  textDecoration: 'none',
                  fontWeight: 'bold',
                  fontSize: '1rem',
                  transition: 'transform 0.3s ease'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-2px)'
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)'
                }}
              >
                {t('blog.readMore')}
              </Link>
            </div>
            <div style={{
              background: 'var(--bg-secondary)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '8rem',
              height: '300px'
            }}>
              {featuredPost.image}
            </div>
          </div>
        </div>
      </section>

      {/* Blog Content */}
      <section className="blog-content" style={{ padding: '0 2rem 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 300px', gap: '3rem' }}>

          {/* Main Content */}
          <div>
            <h2 style={{
              fontSize: '2rem',
              color: 'var(--text-primary)',
              marginBottom: '2rem'
            }}>
              {t('blog.recentPosts')}
            </h2>

            <div style={{ display: 'grid', gap: '2rem' }}>
              {recentPosts.map(post => (
                <article key={post.id} style={{
                  background: 'var(--bg-card)',
                  border: '1px solid var(--border-color)',
                  borderRadius: '12px',
                  overflow: 'hidden',
                  transition: 'transform 0.3s ease, box-shadow 0.3s ease',
                  cursor: 'pointer'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-5px)'
                  e.currentTarget.style.boxShadow = '0 10px 30px var(--accent-shadow)'
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)'
                  e.currentTarget.style.boxShadow = 'none'
                }}
                >
                  <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: '0' }}>
                    <div style={{
                      background: 'var(--bg-secondary)',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: '4rem'
                    }}>
                      {post.image}
                    </div>
                    <div style={{ padding: '2rem' }}>
                      <div style={{
                        display: 'inline-block',
                        background: 'var(--accent-color)',
                        color: 'white',
                        padding: '0.3rem 0.8rem',
                        borderRadius: '15px',
                        fontSize: '0.8rem',
                        fontWeight: 'bold',
                        marginBottom: '1rem'
                      }}>
                        {post.category}
                      </div>
                      <h3 style={{
                        fontSize: '1.5rem',
                        color: 'var(--text-primary)',
                        marginBottom: '1rem',
                        lineHeight: '1.3'
                      }}>
                        {post.title}
                      </h3>
                      <p style={{
                        color: 'var(--text-secondary)',
                        fontSize: '1rem',
                        lineHeight: '1.6',
                        marginBottom: '1rem'
                      }}>
                        {post.excerpt}
                      </p>
                      <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '1rem',
                        marginBottom: '1rem'
                      }}>
                        <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                          {t('blog.by')} {post.author}
                        </span>
                        <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                          {post.date}
                        </span>
                        <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                          {post.readTime}
                        </span>
                      </div>
                      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                        {post.tags.map(tag => (
                          <span key={tag} style={{
                            background: 'var(--bg-secondary)',
                            color: 'var(--text-secondary)',
                            padding: '0.2rem 0.6rem',
                            borderRadius: '12px',
                            fontSize: '0.8rem'
                          }}>
                            #{tag}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                </article>
              ))}
            </div>

            {/* Load More Button */}
            <div style={{ textAlign: 'center', marginTop: '3rem' }}>
              <button style={{
                background: 'var(--accent-color)',
                color: 'white',
                border: 'none',
                padding: '1rem 2rem',
                borderRadius: '8px',
                fontSize: '1rem',
                fontWeight: 'bold',
                cursor: 'pointer',
                transition: 'transform 0.3s ease'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-2px)'
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)'
              }}
              >
                {t('blog.loadMore')}
              </button>
            </div>
          </div>

          {/* Sidebar */}
          <aside>
            {/* Categories */}
            <div style={{
              background: 'var(--bg-card)',
              border: '1px solid var(--border-color)',
              borderRadius: '12px',
              padding: '2rem',
              marginBottom: '2rem'
            }}>
              <h3 style={{
                color: 'var(--text-primary)',
                marginBottom: '1rem',
                fontSize: '1.3rem'
              }}>
                {t('blog.categories')}
              </h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                {categories.map(category => (
                  <button key={category} style={{
                    background: 'var(--bg-secondary)',
                    color: 'var(--text-primary)',
                    border: 'none',
                    padding: '0.75rem 1rem',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    textAlign: 'left',
                    transition: 'background 0.3s ease'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = 'var(--accent-color)'
                    e.currentTarget.style.color = 'white'
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = 'var(--bg-secondary)'
                    e.currentTarget.style.color = 'var(--text-primary)'
                  }}
                  >
                    {category}
                  </button>
                ))}
              </div>
            </div>

            {/* Newsletter Signup */}
            <div style={{
              background: 'var(--bg-card)',
              border: '1px solid var(--border-color)',
              borderRadius: '12px',
              padding: '2rem',
              textAlign: 'center'
            }}>
              <h3 style={{
                color: 'var(--text-primary)',
                marginBottom: '1rem',
                fontSize: '1.3rem'
              }}>
                {t('blog.subscribe')}
              </h3>
              <p style={{
                color: 'var(--text-secondary)',
                marginBottom: '1.5rem',
                fontSize: '0.9rem'
              }}>
                {t('blog.subscribeDesc')}
              </p>
              <input
                type="email"
                placeholder={t('blog.emailPlaceholder')}
                style={{
                  width: '100%',
                  padding: '0.75rem',
                  border: '1px solid var(--border-color)',
                  borderRadius: '6px',
                  background: 'var(--bg-secondary)',
                  color: 'var(--text-primary)',
                  marginBottom: '1rem',
                  fontSize: '0.9rem'
                }}
              />
              <button style={{
                width: '100%',
                background: 'var(--accent-color)',
                color: 'white',
                border: 'none',
                padding: '0.75rem',
                borderRadius: '6px',
                fontSize: '0.9rem',
                fontWeight: 'bold',
                cursor: 'pointer',
                transition: 'transform 0.3s ease'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-2px)'
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)'
              }}
              >
                {t('blog.subscribeBtn')}
              </button>
            </div>
          </aside>
        </div>
      </section>
    </Layout>
  )
}

export default Blog