'use client';

import ModernBackground from "@/components/Common/ModernBackground";
import { Search, BookOpen, TrendingUp, Filter, Calendar } from "lucide-react";
import SingleBlog from "@/components/Blog/SingleBlog";
import blogData from "@/components/Blog/blogData";
import { useState } from "react";
import Image from "next/image";

export default function BlogClient() {
    const [searchQuery, setSearchQuery] = useState("");
    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

    const categories = [
        {
            name: "Video & Content",
            tags: ["video marketing", "content marketing", "viral content"]
        },
        {
            name: "Thương Hiệu",
            tags: ["thương hiệu", "thương hiệu cá nhân"]
        },
        {
            name: "Social Media",
            tags: ["social media", "social media marketing"]
        },
        {
            name: "Livestream",
            tags: ["livestream", "xu hướng truyền thông"]
        },
        {
            name: "Marketing Strategy",
            tags: ["marketing đa kênh", "ROI", "email marketing", "automation", "influencer marketing"]
        }
    ];

    const filteredBlogs = blogData.filter((blog) => {
        const matchesSearch =
            searchQuery === "" ||
            blog.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
            blog.paragraph.toLowerCase().includes(searchQuery.toLowerCase());

        const matchesCategory = !selectedCategory ||
            categories.find(cat => cat.name === selectedCategory)?.tags.some(tag => blog.tags.includes(tag));

        return matchesSearch && matchesCategory;
    });

    return (
        <div className="relative w-full bg-gradient-to-br from-white via-red-50/30 to-orange-50/20 overflow-x-hidden">
            <ModernBackground />
            <section className="relative min-h-[500px] flex items-center overflow-hidden bg-gradient-to-br from-red-600 via-red-500 to-orange-500">
                <div className="absolute inset-0">
                    <div className="absolute top-20 left-10 w-96 h-96 bg-yellow-400/20 rounded-full blur-3xl" />
                    <div className="absolute bottom-20 right-10 w-96 h-96 bg-red-300/20 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10 py-24">
                    <div className="text-center text-white max-w-4xl mx-auto">
                        <span className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm border border-white/30 rounded-full text-sm font-semibold uppercase tracking-wide mb-6">
                            <BookOpen className="w-4 h-4" />
                            Góc Kiến Thức
                        </span>
                        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                            Khám Phá <span className="text-yellow-300">Xu Hướng</span><br />
                            Truyền Thông Mới
                        </h1>
                        <p className="text-xl text-white/90 mb-8 max-w-3xl mx-auto leading-relaxed">
                            Cập nhật kiến thức về video marketing, cách xây dựng thương hiệu
                            và những bí quyết từ thực tiễn triển khai cho hàng trăm thương hiệu.
                        </p>

                        <div className="max-w-2xl mx-auto">
                            <div className="relative">
                                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 w-5 h-5 z-10" />
                                <input
                                    type="text"
                                    placeholder="Tìm kiếm bài viết..."
                                    value={searchQuery}
                                    onChange={(e) => setSearchQuery(e.target.value)}
                                    className="w-full pl-12 pr-4 py-4 rounded-xl border-2 border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder:text-white/60 focus:outline-none focus:border-yellow-300 transition-all duration-200"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="relative py-16 bg-white">
                <div className="container relative z-10">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                        {[
                            { icon: <BookOpen className="w-6 h-6" />, number: blogData.length, label: "Bài viết" },
                            { icon: <TrendingUp className="w-6 h-6" />, number: "1000+", label: "Lượt đọc" },
                            { icon: <Filter className="w-6 h-6" />, number: categories.length, label: "Chủ đề" },
                            { icon: <Calendar className="w-6 h-6" />, number: "2024", label: "Cập nhật" }
                        ].map((stat, index) => (
                            <div
                                key={index}
                                className="bg-white border-2 border-gray-200 rounded-2xl p-6 text-center shadow-lg hover:shadow-2xl hover:border-red-500 transition-all duration-300"
                            >
                                <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-red-500 to-orange-500 text-white mb-3 shadow-md">
                                    {stat.icon}
                                </div>
                                <div className="text-3xl font-extrabold text-gray-900 mb-1">
                                    {stat.number}
                                </div>
                                <div className="text-sm font-medium text-gray-600">
                                    {stat.label}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Tags Filter */}
            <section className="relative bg-white py-12">
                <div className="container relative z-10">
                    <div
                        className="text-center"
                    >
                        <h2 className="text-2xl md:text-4xl font-extrabold text-gray-900 mb-6">
                            Chủ Đề <span className="text-red-500">Nổi Bật</span>
                        </h2>
                        <div className="flex flex-wrap gap-3 justify-center max-w-6xl mx-auto">
                            <button
                                onClick={() => setSelectedCategory(null)}
                                className={`px-6 py-3 rounded-xl font-bold transition-all duration-300 ${selectedCategory === null
                                    ? "bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-lg"
                                    : "bg-gray-100 text-gray-800 hover:bg-gray-200 border-2 border-gray-200"
                                    }`}
                            >
                                Tất cả
                            </button>
                            {categories.map((category, index) => (
                                <button
                                    key={index}
                                    onClick={() => setSelectedCategory(category.name)}
                                    className={`px-6 py-3 rounded-xl font-bold transition-all duration-300 ${selectedCategory === category.name
                                        ? "bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-lg"
                                        : "bg-gray-100 text-gray-800 hover:bg-gray-200 border-2 border-gray-200"
                                        }`}
                                >
                                    {category.name}
                                </button>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* Blog Grid */}
            <section className="relative py-16 bg-gradient-to-b from-gray-50 to-white">
                <div className="container relative z-10">
                    {filteredBlogs.length > 0 ? (
                        <>
                            <div className="mb-12">
                                <div className="bg-white rounded-3xl overflow-hidden shadow-2xl hover:shadow-3xl transition-all duration-300 border-2 border-neutral-100">
                                    <div className="grid grid-cols-1 lg:grid-cols-2">
                                        <div className="relative h-80 lg:h-auto overflow-hidden">
                                            <Image
                                                src={filteredBlogs[0].image}
                                                alt={filteredBlogs[0].title}
                                                fill
                                                className="object-cover"
                                            />
                                            <div className="absolute inset-0 bg-gradient-to-br from-red-500/20 to-orange-500/20"></div>
                                            <div className="absolute top-4 left-4 z-10">
                                                <span className="px-4 py-2 bg-red-500 text-white text-sm font-bold rounded-full shadow-lg">
                                                    Nổi bật
                                                </span>
                                            </div>
                                        </div>
                                        <div className="p-8 lg:p-12 flex flex-col justify-center">
                                            <div className="flex items-center gap-3 mb-4">
                                                {filteredBlogs[0].tags.slice(0, 2).map((tag, i) => (
                                                    <span
                                                        key={i}
                                                        className="px-3 py-1 bg-red-50 text-red-600 text-xs font-semibold rounded-full capitalize"
                                                    >
                                                        {tag}
                                                    </span>
                                                ))}
                                            </div>
                                            <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4 leading-tight hover:text-red-500 transition-colors">
                                                {filteredBlogs[0].title}
                                            </h2>
                                            <p className="text-gray-700 text-lg mb-6 leading-relaxed font-medium">
                                                {filteredBlogs[0].paragraph}
                                            </p>
                                            <div className="flex items-center gap-4 mb-6">
                                                <div className="flex items-center gap-2">
                                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white font-bold">
                                                        {filteredBlogs[0].author.name.charAt(0)}
                                                    </div>
                                                    <div>
                                                        <p className="font-bold text-gray-900">
                                                            {filteredBlogs[0].author.name}
                                                        </p>
                                                        <p className="text-xs text-gray-600 font-medium">
                                                            {new Date(filteredBlogs[0].publishDate).toLocaleDateString('vi-VN')}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <a
                                                href={`/goc-kien-thuc/${filteredBlogs[0].slug}`}
                                                className="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-red-500 to-orange-500 text-white font-bold rounded-xl hover:from-red-600 hover:to-orange-600 transition-all duration-300 hover:shadow-lg hover:scale-105"
                                            >
                                                Đọc bài viết
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Other Blogs Grid */}
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                {filteredBlogs.slice(1).map((blog, index) => (
                                    <div
                                        key={blog.id}
                                        className="group"
                                    >
                                        <SingleBlog blog={blog} />
                                    </div>
                                ))}
                            </div>
                        </>
                    ) : (
                        <div
                            className="text-center py-20"
                        >
                            <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <Search className="w-10 h-10 text-gray-400" />
                            </div>
                            <h3 className="text-2xl font-extrabold text-gray-900 mb-2">
                                Không tìm thấy bài viết
                            </h3>
                            <p className="text-gray-700 mb-6 font-medium">
                                Thử tìm kiếm với từ khóa khác hoặc chọn chủ đề khác
                            </p>
                            <button
                                onClick={() => {
                                    setSearchQuery("");
                                    setSelectedCategory(null);
                                }}
                                className="px-6 py-3 bg-gradient-to-r from-red-500 to-orange-500 text-white font-semibold rounded-xl hover:shadow-lg transition-all duration-300"
                            >
                                Xem tất cả bài viết
                            </button>
                        </div>
                    )}
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 bg-gradient-to-br from-red-500 via-red-600 to-orange-600 relative overflow-hidden">
                <div className="absolute inset-0">
                    <div className="absolute top-0 left-0 w-96 h-96 bg-yellow-400/20 rounded-full blur-3xl" />
                    <div className="absolute bottom-0 right-0 w-96 h-96 bg-red-300/20 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10">
                    <div className="text-center text-white max-w-4xl mx-auto">
                        <h2 className="text-3xl md:text-5xl font-bold mb-6">
                            Bạn Có Câu Chuyện Muốn Chia Sẻ?
                        </h2>
                        <p className="text-xl text-white/90 mb-8">
                            Liên hệ với chúng tôi để được tư vấn cách kể câu chuyện thương hiệu
                            qua video một cách hiệu quả nhất
                        </p>
                        <a
                            href="/lien-he"
                            className="inline-flex items-center justify-center px-8 py-4 bg-white text-red-500 font-bold text-lg rounded-xl hover:bg-yellow-300 hover:text-red-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
                        >
                            Liên Hệ Ngay
                        </a>
                    </div>
                </div>
            </section>
        </div>
    );
}
