'use client';

import React, { useEffect, useState } from 'react';
import { AnnouncementBar } from '@/layout/AnnouncementBar';
import { Header } from '@/layout/Header';
import { Navbar } from '@/layout/Navbar';
import { Footer } from '@/layout/Footer';
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
import { FloatingButtons } from '@/components/FloatingButtons';
import { BlogListing } from '@/components/blog/BlogViews';
import { DEMO_BLOG_ARTICLES, BlogArticle, BlogCategory } from '@/lib/blogDefaults';
import { storefrontService } from '@/services/api/storefrontService';

export default function BlogIndexPage() {
  const [articles, setArticles] = useState(DEMO_BLOG_ARTICLES);

  useEffect(() => {
    let cancelled = false;
    storefrontService.getBlogPosts().then((posts) => {
      if (!cancelled && posts && posts.length > 0) {
        const mapped: BlogArticle[] = posts.map((p: any) => ({
          slug: (p.title || '').toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-'),
          title: p.title || '',
          excerpt: p.excerpt || '',
          author: typeof p.author === 'string' ? p.author : (p.author?.name || 'iFixKart Team'),
          date: p.date || '10 Sep 2026',
          readTime: '5 min read',
          category: (['News', 'Reviews', 'Guides', 'Repair'].includes(p.category) ? p.category : 'Guides') as BlogCategory,
          image: p.image_url || 'https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=800&q=80',
          body: [p.content || p.excerpt || ''],
        }));
        setArticles(mapped);
      }
    }).catch(() => {});
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="min-h-screen bg-[#F8F9FB] text-[#1E293B] flex flex-col font-sans">
      <AnnouncementBar />
      <Header />
      <StickyHeaderSpacer />
      <Navbar />
      <main className="flex-grow py-10 pb-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px]">
          <BlogListing articles={articles} />
        </div>
      </main>
      <Footer />
      <FloatingButtons />
    </div>
  );
}