import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getBlogPosts } from '../utils/api';

const BlogListPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadPosts();
  }, []);

  const loadPosts = async () => {
    try {
      const response = await getBlogPosts('published');
      setPosts(response.data);
    } catch (error) {
      console.error('Error loading posts:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-xl text-gray-600">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-5 py-4 flex justify-between items-center">
          <Link to="/" className="flex items-center gap-3">
            <img src="/assets/img/logo1.png" alt="Logo" className="h-12" />
            <div>
              <div className="text-xl font-bold text-gray-900">
                <strong className="text-blue-600">RH</strong> Elektronik
              </div>
              <small className="text-xs text-gray-500 uppercase tracking-wide">
                Blog & Artikel
              </small>
            </div>
          </Link>

          <Link 
            to="/"
            className="text-gray-700 font-semibold hover:text-blue-600"
          >
            ← Kembali ke Home
          </Link>
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-600 to-blue-800 text-white py-20">
        <div className="max-w-6xl mx-auto px-5 text-center">
          <h1 className="text-5xl font-extrabold mb-4">Blog & Artikel</h1>
          <p className="text-xl opacity-90">Tips, panduan, dan informasi seputar perawatan elektronik</p>
        </div>
      </section>

      {/* Blog Posts Grid */}
      <section className="py-16">
        <div className="max-w-6xl mx-auto px-5">
          {posts.length === 0 ? (
            <div className="text-center py-20">
              <p className="text-xl text-gray-500">Belum ada artikel tersedia.</p>
            </div>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {posts.map((post) => (
                <Link 
                  key={post.id}
                  to={`/blog/${post.id}`}
                  className="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 hover:-translate-y-2"
                  data-testid={`blog-post-${post.id}`}
                >
                  {post.featured_image && (
                    <div className="h-56 overflow-hidden">
                      <img 
                        src={post.featured_image}
                        alt={post.title}
                        className="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
                      />
                    </div>
                  )}
                  <div className="p-6">
                    <h2 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2">
                      {post.title}
                    </h2>
                    <p className="text-gray-600 text-sm mb-4 line-clamp-3">
                      {post.excerpt}
                    </p>
                    <div className="flex items-center justify-between text-sm text-gray-500">
                      <span className="font-medium">{post.author}</span>
                      <span>{new Date(post.created_at).toLocaleDateString('id-ID', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric'
                      })}</span>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-400 text-center py-10 mt-20">
        <p>© 2026 CV RH Elektronik - Authorized Service Center</p>
      </footer>
    </div>
  );
};

export default BlogListPage;
