import { Head, usePage } from '@inertiajs/react';
import { useEffect, useMemo, useState } from 'react';

import CapsCollectionBanner from '@/theme2/components/caps/CapsCollectionBanner';
import CapsCTA from '@/theme2/components/caps/CapsCTA';
import CapsFeaturedSeries from '@/theme2/components/caps/CapsFeaturedSeries';
import CapsGrid from '@/theme2/components/caps/CapsGrid';
import CapsHero from '@/theme2/components/caps/CapsHero';
import CapsPagination from '@/theme2/components/caps/CapsPagination';
import CapsToolbar from '@/theme2/components/caps/CapsToolbar';

const STANDARD_PAGE_SIZE = 12;
const COMPACT_PAGE_SIZE = 16;

const capsPageContent = {
    seo: {
        title: 'Caps - Captex',
        description: 'Explore premium cap collections from Captex.',
        keywords: 'caps, captex, premium caps',
    },
    hero: {
        eyebrow: 'Caps Collection',
        title: 'Caps that define the look.',
        subtitle: 'Premium shapes. Refined fits. Everyday wear.',
        description: 'Discover signature styles across our core cap range.',
        image: 'https://images.unsplash.com/photo-1521369909029-2afed882baee?auto=format&fit=crop&w=1800&q=90',
        primaryAction: { label: 'Shop Caps', href: '/shop' },
        secondaryAction: { label: 'View Collections', href: '/collections' },
    },
    filters: ['all', 'in-stock', 'new', 'best-seller', 'discount', 'limited'],
    sortOptions: [
        { value: 'featured', label: 'Featured' },
        { value: 'newest', label: 'Newest' },
        { value: 'price-low', label: 'Price: Low to High' },
        { value: 'price-high', label: 'Price: High to Low' },
        { value: 'best-selling', label: 'Best Selling' },
        { value: 'highest-rated', label: 'Highest Rated' },
    ],
    collectionBanner: {
        image: null,
        title: 'Caps Collection',
        description:
            'A premium selection of core caps built for everyday wear.',
        slug: 'caps',
        buttonText: 'Shop All Caps',
    },
    callToAction: {
        title: 'Find your fit.',
        description:
            'Explore the full range and discover your next everyday cap.',
        buttonText: 'Shop Now',
        href: '/shop',
    },
};

export default function AllCaps() {
    const { products = [], featuredSeries = [] } = usePage().props;
    const [activeFilter, setActiveFilter] = useState('all');
    const [sort, setSort] = useState('featured');
    const [view, setView] = useState('standard');
    const [page, setPage] = useState(1);
    const [visiblePageCount, setVisiblePageCount] = useState(1);

    const pageSize =
        view === 'compact' ? COMPACT_PAGE_SIZE : STANDARD_PAGE_SIZE;

    const allCaps = useMemo(() => products, [products]);

    const filteredCaps = useMemo(() => {
        let items = [...allCaps];

        if (activeFilter === 'in-stock') {
            items = items.filter((item) => !item.isSoldOut);
        }

        if (activeFilter === 'new') {
            items = items.filter((item) => item.isNew);
        }

        if (activeFilter === 'best-seller') {
            items = items.filter((item) => item.isBestSeller);
        }

        if (activeFilter === 'discount') {
            items = items.filter((item) => Number(item.discount || 0) > 0);
        }

        if (activeFilter === 'limited') {
            items = items.filter((item) => {
                const series = String(item.series || '').toLowerCase();
                return series.includes('limited');
            });
        }

        items.sort((a, b) => {
            if (sort === 'newest') {
                return Number(b.isNew) - Number(a.isNew) || b.id - a.id;
            }

            if (sort === 'price-low') {
                return Number(a.price || 0) - Number(b.price || 0);
            }

            if (sort === 'price-high') {
                return Number(b.price || 0) - Number(a.price || 0);
            }

            if (sort === 'best-selling') {
                return (
                    Number(b.popularity || b.reviews || 0) -
                    Number(a.popularity || a.reviews || 0)
                );
            }

            if (sort === 'highest-rated') {
                return Number(b.rating || 0) - Number(a.rating || 0);
            }

            return (
                Number(b.isBestSeller) - Number(a.isBestSeller) ||
                Number(b.rating || 0) - Number(a.rating || 0)
            );
        });

        return items;
    }, [allCaps, activeFilter, sort]);

    const totalPages = Math.max(1, Math.ceil(filteredCaps.length / pageSize));

    const paginatedCaps = useMemo(() => {
        const start = (page - 1) * pageSize;
        const regularPageItems = filteredCaps.slice(start, start + pageSize);

        if (visiblePageCount <= 1) {
            return regularPageItems;
        }

        return filteredCaps.slice(start, start + pageSize * visiblePageCount);
    }, [filteredCaps, page, pageSize, visiblePageCount]);

    useEffect(() => {
        setPage(1);
        setVisiblePageCount(1);
    }, [activeFilter, sort, view]);

    useEffect(() => {
        if (page > totalPages) {
            setPage(totalPages);
        }
    }, [page, totalPages]);

    const handlePageChange = (nextPage) => {
        setPage(nextPage);
        setVisiblePageCount(1);

        document
            .getElementById('caps-products')
            ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };

    const handleLoadMore = () => {
        setVisiblePageCount((current) => current + 1);
    };

    const canLoadMore =
        (page - 1) * pageSize + pageSize * visiblePageCount <
        filteredCaps.length;

    return (
        <>
            <Head title={capsPageContent.seo.title}>
                <meta
                    name="description"
                    content={capsPageContent.seo.description}
                />
                <meta name="keywords" content={capsPageContent.seo.keywords} />
            </Head>

            <main className="overflow-hidden">
                <div className="mx-auto w-[95%] px-4 py-5 sm:w-[95%] sm:px-6 sm:py-7 lg:w-[80%] lg:px-8 lg:py-10">
                    <CapsHero hero={capsPageContent.hero} />

                    <CapsFeaturedSeries series={featuredSeries} />

                    <section
                        id="caps-products"
                        className="scroll-mt-36 py-16 sm:py-20 lg:py-24"
                    >
                        <CapsToolbar
                            productCount={filteredCaps.length}
                            filters={capsPageContent.filters}
                            activeFilter={activeFilter}
                            onFilterChange={setActiveFilter}
                            sortOptions={capsPageContent.sortOptions}
                            sort={sort}
                            onSortChange={setSort}
                            view={view}
                            onViewChange={setView}
                        />

                        <div className="mt-10">
                            <CapsGrid products={paginatedCaps} view={view} />
                        </div>

                        <CapsPagination
                            page={page}
                            totalPages={totalPages}
                            onPageChange={handlePageChange}
                            onLoadMore={handleLoadMore}
                            canLoadMore={canLoadMore}
                        />
                    </section>

                    {/* <CapsCollectionBanner
            banner={capsPageContent.collectionBanner}
          /> */}

                    <CapsCTA content={capsPageContent.callToAction} />
                </div>
            </main>
        </>
    );
}