import React from 'react';
import { ChevronRight, Calendar, User } from 'lucide-react';
import { SiteSettings } from '../types';

interface BlogPageProps {
  theme?: string;
  settings?: SiteSettings;
}

const DUMMY_POSTS = [
  {
    id: 1,
    title: 'অনলাইনে শপিং করার সময় যে ৫টি বিষয় খেয়াল রাখবেন',
    excerpt: 'অনলাইনে কেনাকাটা এখন আমাদের দৈনন্দিন জীবনের অংশ। তবে সঠিক প্রোডাক্টটি বেছে নিতে কিছু গুরুত্বপূর্ণ বিষয় জানা প্রয়োজন।',
    image: 'https://images.unsplash.com/photo-1472851294608-062f824d29cc?auto=format&fit=crop&q=80&w=800',
    date: '10 Oct, 2024',
    author: 'Admin'
  },
  {
    id: 2,
    title: 'এবছরের ট্রেন্ডিং গ্যাজেট এবং স্মার্ট প্রোডাক্টস',
    excerpt: 'প্রযুক্তি দ্রুত এগোচ্ছে, আর তার সাথে বদলে যাচ্ছে আমাদের লাইফস্টাইল। চলুন দেখে নেওয়া যাক এই বছরের সবচেয়ে জনপ্রিয় স্মার্ট গ্যাজেটগুলো।',
    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=800',
    date: '12 Oct, 2024',
    author: 'Admin'
  },
  {
    id: 3,
    title: 'ফ্যাশন এবং লাইফস্টাইল: নিজেকে কীভাবে আপডেট রাখবেন?',
    excerpt: 'নিজেকে ট্রেন্ডি রাখতে চাইলে ফ্যাশন সম্পর্কে আপডেট থাকা জরুরি। আজকের ব্লগে থাকছে কিছু দারুণ লাইফস্টাইল এবং ফ্যাশন টিপস।',
    image: 'https://images.unsplash.com/photo-1445205170230-053b83016050?auto=format&fit=crop&q=80&w=800',
    date: '15 Oct, 2024',
    author: 'Admin'
  },
];

const BlogPage: React.FC<BlogPageProps> = ({ theme = '01', settings }) => {
  let activePosts = DUMMY_POSTS;

  if (settings?.homePageJson) {
    try {
      const parsed = JSON.parse(settings.homePageJson);
      if (theme === '03' && parsed.theme03?.blogs?.length > 0) {
        activePosts = parsed.theme03.blogs;
      } else if (parsed.theme01?.blogPosts?.length > 0) {
        activePosts = parsed.theme01.blogPosts;
      }
    } catch (e) {}
  }

  const isTheme03 = theme === '03';
  const heroBg = isTheme03 ? '#E91E63' : undefined;

  return (
    <div className={`min-h-screen pb-24 animate-fade-in-up ${isTheme03 ? 'bg-slate-50' : 'bg-white dark:bg-slate-900'}`}>

      {/* Hero */}
      <div
        className="text-white py-10 md:py-20 mb-8 md:mb-12 shadow-sm"
        style={heroBg ? { background: heroBg } : undefined}
        // fallback for non-theme03
      >
        <div
          className={!heroBg ? 'bg-themePrimary absolute inset-0' : ''}
        />
        <div
          className={`relative ${!heroBg ? 'bg-themePrimary md:rounded-b-[40px]' : ''} py-10 md:py-20 text-white text-center`}
          style={heroBg ? { background: heroBg } : {}}
        >
          <div className="container mx-auto px-4">
            <h1 className={`text-2xl md:text-5xl font-black mb-2 md:mb-4 ${isTheme03 ? 'font-serif' : 'font-bangla'}`}>
              আমাদের ব্লগ
            </h1>
            <p className="text-white/90 text-sm md:text-lg hidden md:block font-bangla max-w-xl mx-auto">
              ই-কমার্স, লাইফস্টাইল এবং গ্যাজেট নিয়ে গুরুত্বপূর্ণ টিপস।
            </p>
          </div>
        </div>
      </div>

      {/* Blog Grid */}
      <div className="container mx-auto px-3 md:px-4 max-w-6xl">
        {/* Mobile: vertical list / Desktop: 3 col grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8">
          {activePosts.map((post: any) => (
            <div
              key={post.id}
              className={`rounded-2xl md:rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all border flex md:flex-col group
                ${isTheme03 ? 'bg-white border-pink-50' : 'bg-white dark:bg-slate-800 border-slate-100 dark:border-slate-700'}`}
            >
              {/* Image */}
              <div className="relative overflow-hidden aspect-square md:aspect-[4/3] w-28 md:w-full flex-shrink-0">
                <img
                  src={post.image}
                  alt={post.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className={`absolute top-2 left-2 backdrop-blur-sm px-2 py-1 rounded-full text-[9px] font-bold flex items-center gap-1 ${isTheme03 ? 'bg-white/90 text-[#E91E63]' : 'bg-white/90 text-themePrimary'}`}>
                  <Calendar size={10} />
                  {post.date}
                </div>
              </div>

              <div className="p-3 md:p-6 flex flex-col flex-grow">
                {post.author && (
                  <div className={`flex items-center gap-1 text-[10px] mb-1 font-bold uppercase tracking-wider ${isTheme03 ? 'text-pink-500' : 'text-slate-400'}`}>
                    <User size={11} /> {post.author}
                  </div>
                )}
                <h3 className={`text-sm md:text-xl font-bold mb-1 md:mb-3 line-clamp-2 transition-colors ${isTheme03 ? 'text-slate-800 group-hover:text-[#E91E63]' : 'font-black font-bangla group-hover:text-themePrimary text-slate-900 dark:text-white'}`}>
                  {post.title}
                </h3>
                <p className={`line-clamp-2 md:line-clamp-3 text-xs md:text-sm flex-grow ${isTheme03 ? 'text-slate-500' : 'text-slate-500 dark:text-slate-400 font-bangla'}`}>
                  {post.excerpt}
                </p>
                <button className={`flex items-center gap-1 font-bold text-xs md:text-sm hover:gap-2 transition-all mt-2 md:mt-4 w-fit ${isTheme03 ? 'text-[#E91E63]' : 'text-themePrimary font-bangla'}`}>
                  {isTheme03 ? 'Read Article' : 'আরও পড়ুন'} <ChevronRight size={14} />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default BlogPage;
