import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PublicLayout } from '../../components/layout';
import { Calendar, Clock, ArrowRight, Brain } from 'lucide-react';

import { blogPosts } from '../../constants/blog';

const BlogPage: React.FC = () => {
  const { t, i18n } = useTranslation(['blog', 'common']);

  // Blog posts are now imported from constants/blog.ts

  return (
    <PublicLayout
      variant="default"
      contentPadding="md"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: true,
        showLanguageSelector: true,
        variant: "default"
      }}
    >
      {/* Hero Section */}
      <section className="bg-gradient-to-b from-[var(--bg-primary)] to-[var(--bg-secondary)] py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Brain className="w-4 h-4" />
              <span>{t('blog:hero.badge')}</span>
            </div>
            <h1 className="text-4xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6">
              {t('blog:hero.title')}
            </h1>
            <p className="text-xl text-[var(--text-secondary)]">
              {t('blog:hero.description')}
            </p>
          </div>
        </div>
      </section>

      {/* Blog Posts Grid */}
      <section className="py-16 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {blogPosts.map((post) => (
              <article
                key={post.id}
                className="bg-[var(--bg-secondary)] rounded-2xl overflow-hidden border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
              >
                {/* Post Header */}
                <div className="p-8">
                  <div className="flex items-center gap-4 mb-4">
                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
                      {t(`blog:${post.categoryKey}`)}
                    </span>
                    <div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                      <Calendar className="w-4 h-4" />
                      <span>
                        {new Date(post.date).toLocaleDateString(i18n.language, {
                          year: 'numeric',
                          month: 'long',
                          day: 'numeric',
                        })}
                      </span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                      <Clock className="w-4 h-4" />
                      <span>{t('blog:post.read_time', { time: post.readTime })}</span>
                    </div>
                  </div>

                  <h2 className="text-2xl font-bold text-[var(--text-primary)] mb-4 hover:text-[var(--color-primary)] transition-colors">
                    <Link to={`/blog/${post.slug}`}>
                      {t(`blog:${post.titleKey}`)}
                    </Link>
                  </h2>

                  <p className="text-[var(--text-secondary)] mb-6 line-clamp-3">
                    {t(`blog:${post.excerptKey}`)}
                  </p>

                  {/* Tags */}
                  <div className="flex flex-wrap gap-2 mb-6">
                    {post.tagsKeys.slice(0, 3).map((tagKey) => (
                      <span
                        key={tagKey}
                        className="text-xs px-2 py-1 rounded bg-[var(--bg-tertiary)] text-[var(--text-tertiary)]"
                      >
                        #{t(`blog:${tagKey}`)}
                      </span>
                    ))}
                  </div>

                  {/* Read More Link */}
                  <Link
                    to={`/blog/${post.slug}`}
                    className="inline-flex items-center gap-2 text-[var(--color-primary)] font-medium hover:gap-3 transition-all"
                  >
                    <span>{t('blog:post.read_more')}</span>
                    <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>

                {/* Post Footer - Author */}
                <div className="px-8 py-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)]">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-[var(--color-primary)] flex items-center justify-center text-white font-bold">
                      {t(`blog:${post.authorKey}`).charAt(0)}
                    </div>
                    <div>
                      <div className="text-sm font-medium text-[var(--text-primary)]">
                        {t(`blog:${post.authorKey}`)}
                      </div>
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            {t('blog:cta.title')}
          </h2>
          <p className="text-xl text-white/90 mb-8">
            {t('blog:cta.description')}
          </p>
          <Link
            to="/register"
            className="inline-flex items-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
          >
            <span>{t('blog:cta.button')}</span>
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>
      </section>
    </PublicLayout>
  );
};

export default BlogPage;
