import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Calendar } from 'lucide-react';
import SEOHead from '../components/seo/SEOHead';
import { useLanguage } from '../contexts/LanguageContext';
import { loadManifest, type ContentMeta } from '../lib/content';

export default function BlogListPage() {
  const { language } = useLanguage();
  const [posts, setPosts] = useState<ContentMeta[]>([]);

  useEffect(() => {
    loadManifest('blog').then(manifest => {
      setPosts(manifest[language] || []);
    });
  }, [language]);

  const featured = posts[0];
  const rest = posts.slice(1);

  return (
    <>
      <SEOHead title="Blog" description="TexPixel blog — updates, tutorials, and insights" path="/blog" />

      <div className="max-w-5xl mx-auto py-16 lg:py-20 px-6">
        {/* Header */}
        <div className="mb-12">
          <h1 className="font-display text-4xl lg:text-5xl font-bold text-ink tracking-tight mb-4">
            {language === 'en' ? 'Blog' : '博客'}
          </h1>
          <p className="text-ink-secondary text-lg max-w-xl">
            {language === 'en'
              ? 'Updates, tutorials, and insights on formula recognition and LaTeX.'
              : '关于公式识别和 LaTeX 的更新、教程和见解。'}
          </p>
        </div>

        {/* Featured post */}
        {featured && (
          <Link
            to={`/blog/${featured.slug}`}
            className="card block p-8 mb-8 group hover:border-coral-200"
          >
            <div className="flex items-center gap-2 text-xs text-ink-muted mb-3">
              <Calendar size={13} />
              <time>{featured.date}</time>
            </div>
            <h2 className="font-display text-2xl lg:text-3xl font-bold text-ink mb-3 group-hover:text-coral-600 transition-colors">
              {featured.title}
            </h2>
            <p className="text-ink-secondary leading-relaxed mb-4 max-w-2xl">
              {featured.description}
            </p>
            <div className="flex items-center justify-between">
              <div className="flex gap-2">
                {featured.tags.map(tag => (
                  <span key={tag} className="text-xs bg-coral-50 text-coral-600 px-2.5 py-1 rounded-full font-medium">
                    {tag}
                  </span>
                ))}
              </div>
              <span className="inline-flex items-center gap-1 text-sm font-medium text-coral-500 group-hover:gap-2 transition-all">
                {language === 'en' ? 'Read more' : '阅读全文'}
                <ArrowRight size={14} />
              </span>
            </div>
          </Link>
        )}

        {/* Rest of posts */}
        {rest.length > 0 && (
          <div className="grid md:grid-cols-2 gap-5">
            {rest.map((post) => (
              <Link
                key={post.slug}
                to={`/blog/${post.slug}`}
                className="card p-6 group hover:border-coral-200"
              >
                <div className="text-xs text-ink-muted mb-2">
                  <time>{post.date}</time>
                </div>
                <h2 className="font-display text-lg font-semibold text-ink mb-2 group-hover:text-coral-600 transition-colors">
                  {post.title}
                </h2>
                <p className="text-ink-secondary text-sm leading-relaxed mb-3">{post.description}</p>
                {post.tags.length > 0 && (
                  <div className="flex gap-2">
                    {post.tags.map(tag => (
                      <span key={tag} className="text-[11px] bg-cream-200 text-ink-secondary px-2 py-0.5 rounded-full">
                        {tag}
                      </span>
                    ))}
                  </div>
                )}
              </Link>
            ))}
          </div>
        )}

        {/* Empty state */}
        {posts.length === 0 && (
          <div className="card p-12 text-center">
            <p className="text-ink-muted text-sm">
              {language === 'en' ? 'No posts yet. Check back soon!' : '暂无文章，敬请期待！'}
            </p>
          </div>
        )}
      </div>
    </>
  );
}