'use client';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import WebLayout from '@/components/web/layout/web-layout';
import { usePagesStore } from '@/stores/usePagesStore';

const Pages = () => {
  const { fetchPages, pages, loading } = usePagesStore();
  const [bgImage, setBgImage] = useState<string>('');

  const fallbackImage = '/images/logo.png';

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

  useEffect(() => {
    let intervalId: NodeJS.Timeout;

    if (Array.isArray(pages) && pages.length > 0) {
      const validImages = pages
        .map((p) => p?.pageImage?.trim())
        .filter((img) => img);

      if (validImages.length > 1) {
        setBgImage(validImages[Math.floor(Math.random() * validImages.length)]);

        intervalId = setInterval(() => {
          const randomImage =
            validImages[Math.floor(Math.random() * validImages.length)];
          setBgImage(randomImage);
        }, 3000);
      } else {
        setBgImage(validImages[0] || fallbackImage);
      }
    } else {
      setBgImage(fallbackImage);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [pages]);

  return (
    <WebLayout>
      {/* 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 mx-auto px-4 pt-20">
          <div className="max-w-3xl">
            <h1 className="mb-6 font-bold text-4xl md:text-5xl">All Pages</h1>
            <p className="text-white/90 text-xl">
              Discover all the content available on our website.
            </p>
          </div>
        </div>
      </section>

      {/* Pages List */}
      <section className="py-16">
        <div className="container mx-auto 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}
                >
                  <div className="h-48 bg-gray-300" />
                  <div className="space-y-4 p-6">
                    <div className="h-4 w-3/4 rounded bg-gray-300" />
                    <div className="h-4 w-1/2 rounded bg-gray-300" />
                    <div className="h-3 w-2/3 rounded bg-gray-300" />
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <>
              {pages.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,
                      },
                    },
                  }}
                >
                  {pages.map((page) => (
                    <motion.article
                      className="flex flex-col overflow-hidden rounded-lg bg-white shadow-md transition-shadow hover:shadow-lg"
                      key={page.id}
                      transition={{ duration: 0.5 }}
                      variants={{
                        hidden: { opacity: 0, y: 30 },
                        show: { opacity: 1, y: 0 },
                      }}
                    >
                      <div className="h-48 overflow-hidden">
                        <img
                          alt={page.pageTitle}
                          className="h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                          src={page.pageImage || fallbackImage}
                        />
                      </div>
                      <div className="flex flex-grow flex-col p-6">
                        <h2 className="mb-3 font-bold text-oki-gray-dark text-xl">
                          <Link
                            className="transition-colors hover:text-oki-blue-dark"
                            href={`/pages/${page.pageSlug}`}
                          >
                            {page.pageTitle}
                          </Link>
                        </h2>
                        <p className="mb-4 flex-grow text-gray-600">
                          {page.pageContents
                            ? `${page.pageContents.substring(0, 100)}...`
                            : 'No content available.'}
                        </p>
                        <Link
                          className="mt-auto flex items-center font-medium text-oki-blue-dark transition-colors hover:text-oki-blue-light"
                          href={`/pages/${page.pageSlug}`}
                        >
                          <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-oki-gray-dark">
                    No pages found
                  </h3>
                  <p className="mb-6 text-gray-600">
                    There are no pages to display at the moment.
                  </p>
                </div>
              )}
            </>
          )}
        </div>
      </section>
    </WebLayout>
  );
};

export default Pages;