'use client';

import { motion } from 'framer-motion';
import { ArrowRight, Calendar, Search, User } from 'lucide-react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Skeleton } from '@/components/ui/skeleton';
import WebLayout from '@/components/web/layout/web-layout';
import type { Blog } from '@/db/schema';

const BlogPage = () => {
  const [blogPosts, setBlogPosts] = useState<Blog[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [categoryFilter, setCategoryFilter] = useState('all');
  const [bgImage, setBgImage] = useState<string>('/images/logo.png');

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const res = await fetch('/api/blogs');
        const data = await res.json();
        setBlogPosts(data);
        handleBackgroundImages(data);
      } catch (error) {
        throw new Error(`Failed to fetch blog posts: ${error}`);
      } finally {
        setLoading(false);
      }
    };

    fetchBlogs();
  }, []);

  const handleBackgroundImages = (posts: Blog[]) => {
    if (!Array.isArray(posts)) {
      return;
    }

    const validImages = posts
      .map((post) => post?.image?.trim())
      .filter(Boolean);

    if (validImages.length === 0) return;

    if (validImages.length === 1) {
      setBgImage(validImages[0]);
      return;
    }

    // For multiple images
    const getRandomImage = () =>
      validImages[Math.floor(Math.random() * validImages.length)];
    setBgImage(getRandomImage());

    const intervalId = setInterval(() => {
      setBgImage(getRandomImage());
    }, 3000);

    return () => clearInterval(intervalId);
  };

  const categories = [
    'all',
    ...new Set(blogPosts.map((post) => post.category)),
  ];

  const filteredPosts = blogPosts.filter((post) => {
    const searchLower = searchTerm.toLowerCase();
    return (
      (post.title.toLowerCase().includes(searchLower) ||
        post.description.toLowerCase().includes(searchLower)) &&
      (categoryFilter === 'all' || post.category === categoryFilter)
    );
  });

  return (
    <WebLayout>
      <div>
        {/* Hero Section */}
        <section
          className="w-full bg-center bg-cover py-20 text-white"
          style={{
            backgroundImage: `linear-gradient(to right, rgba(0, 70, 173, 0.85), rgba(0, 160, 233, 0.85)), url(${bgImage})`,
          }}
        >
          <div className="container px-4">
            <div className="max-w-3xl pt-12">
              <h1 className="mb-6 font-bold text-4xl md:text-5xl">Our Blog</h1>
              <p className="text-white/90 text-xl">
                Insights, news, and knowledge-sharing from O.K. Isokariari
                Nigeria Limited's experts on engineering, construction, and
                industry trends.
              </p>
            </div>
          </div>
        </section>

        {/* Filter/Search Section */}
        <section className="bg-oki-gray-light py-8">
          <div className="container px-4">
            <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
              <div className="relative w-full md:max-w-md">
                <Search
                  className="-translate-y-1/2 absolute top-1/2 left-3 transform text-[hsl(var(--muted-foreground))]"
                  size={18}
                />
                <Input
                  className="pl-10"
                  onChange={(e) => setSearchTerm(e.target.value)}
                  placeholder="Search articles..."
                  type="text"
                  value={searchTerm}
                />
              </div>

              <div className="flex flex-wrap gap-2">
                {categories.map((category) => (
                  <Button
                    className={`border ${
                      categoryFilter === category
                        ? 'border-oki-blue-dark bg-oki-blue-dark text-white'
                        : 'border-gray-300 bg-white text-oki-gray-dark hover:bg-oki-blue-dark'
                    }`}
                    key={category}
                    onClick={() => setCategoryFilter(category)}
                    variant="ghost"
                  >
                    {category?.charAt(0).toUpperCase() + category.slice(1)}
                  </Button>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Blog Posts */}
        <section className="bg-white py-16 text-black">
          <div className="container px-4">
            {loading ? (
              <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
                {Array.from({ length: 6 }).map((_, idx) => (
                  <div
                    className="h-80 animate-pulse overflow-hidden rounded-lg bg-white shadow"
                    key={idx}
                  >
                    <Skeleton className="h-48 w-full" />
                    <div className="space-y-4 p-6">
                      <Skeleton className="h-4 w-3/4" />
                      <Skeleton className="h-4 w-1/2" />
                      <Skeleton className="h-3 w-2/3" />
                    </div>
                  </div>
                ))}
              </div>
            ) : filteredPosts.length > 0 ? (
              <motion.div
                animate="show"
                className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
                initial="hidden"
                variants={{
                  hidden: {},
                  show: {
                    transition: {
                      staggerChildren: 0.15,
                    },
                  },
                }}
              >
                {filteredPosts.map((post) => (
                  <motion.article
                    className="flex flex-col overflow-hidden rounded-lg bg-white shadow-md transition-shadow hover:shadow-lg"
                    key={post.id}
                    transition={{ duration: 0.5 }}
                    variants={{
                      hidden: { opacity: 0, y: 30 },
                      show: { opacity: 1, y: 0 },
                    }}
                  >
                    <div className="h-48 overflow-hidden">
                      <Image
                        alt={post.title}
                        className="h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                        height={192}
                        priority={false}
                        src={post.image || '/images/logo.png'}
                        width={500}
                      />
                    </div>
                    <div className="flex flex-grow flex-col p-6">
                      <div className="mb-3">
                        <span className="rounded-full bg-[hsl(var(--oki-gray-light))] px-3 py-1 text-[hsl(var(--oki-gray-dark))] text-xs">
                          {post.category}
                        </span>
                      </div>
                      <h2 className="mb-3 font-bold text-[hsl(var(--oki-gray-dark))] text-xl">
                        <Link
                          className="transition-colors hover:text-[hsl(var(--oki-blue-dark))]"
                          href={`/blog/${post.id}`}
                        >
                          {post.title}
                        </Link>
                      </h2>
                      <p className="mb-4 flex-grow text-[hsl(var(--muted-foreground))]">
                        {post.description}
                      </p>
                      <div className="mb-4 flex items-center justify-between text-[hsl(var(--muted-foreground))] text-sm">
                        <div className="flex items-center">
                          <User className="mr-1" size={14} />
                          <span>{post.author}</span>
                        </div>
                        <div className="flex items-center">
                          <Calendar className="mr-1" size={14} />
                          <span>
                            {new Date(post.created_at).toLocaleDateString()}
                          </span>
                        </div>
                      </div>
                      <Link
                        className="mt-auto flex items-center font-medium text-[hsl(var(--oki-blue-dark))] transition-colors hover:text-[hsl(var(--oki-blue-light))]"
                        href={`/blog/${post.id}`}
                      >
                        <span>Read More</span>
                        <ArrowRight className="ml-2" size={16} />
                      </Link>
                    </div>
                  </motion.article>
                ))}
              </motion.div>
            ) : (
              <div className="py-12 text-center">
                <h3 className="mb-4 font-semibold text-2xl text-[hsl(var(--oki-gray-dark))]">
                  No posts found
                </h3>
                <p className="mb-6 text-[hsl(var(--muted-foreground))]">
                  We couldn't find any blog posts matching your search criteria.
                </p>
                <Button
                  className="border-[hsl(var(--oki-blue-dark))] text-[hsl(var(--oki-blue-dark))] hover:bg-[hsl(var(--oki-blue-dark))] hover:text-white"
                  onClick={() => {
                    setSearchTerm('');
                    setCategoryFilter('all');
                  }}
                  variant="outline"
                >
                  Clear Filters
                </Button>
              </div>
            )}
          </div>
        </section>

        {/* Newsletter Section */}
        <section className="bg-[hsl(var(--oki-gray-light))] py-16">
          <div className="container px-4">
            <div className="mx-auto max-w-2xl text-center">
              <h2 className="mb-6 font-bold text-3xl text-[hsl(var(--oki-gray-dark))]">
                Subscribe to Our Newsletter
              </h2>
              <p className="mb-8 text-[hsl(var(--muted-foreground))]">
                Stay updated with the latest industry insights, company news,
                and project highlights delivered directly to your inbox.
              </p>
              <div className="flex flex-col gap-4 sm:flex-row">
                <Input
                  className="flex-grow"
                  placeholder="Your email address"
                  type="email"
                />
                <Button className="bg-[hsl(var(--oki-blue-dark))] text-white hover:bg-[hsl(var(--oki-blue-light))]">
                  Subscribe
                </Button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </WebLayout>
  );
};

export default BlogPage;