import Centered from '@/components/Layout/Centered';
import { buildNestedMenu } from '@/lib/menu';
import Navbar from '../Navbar/Navbar';
import Banner from '../Banner/Banner';
import BannerCompact from '../Banner/BannerCompact';
import { ContentScheme } from '@/types/elements';

export const revalidate = 60;

async function Header() {
    const baseUrl =
        process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

    const res = await fetch(`${baseUrl}/api/menu/navbar`, {
        next: { revalidate: 60 },
    });

    if (!res.ok) {
        // 🚨 MUST throw to allow stale ISR reuse
        throw new Error('Failed to fetch navbar');
    }

    const data = await res.json();
    const menuData = buildNestedMenu(data);

    const scheme: ContentScheme = {
        content: [
            {
                type: 'BannerCompact',
                order: 1,
                props: { id: 0 },
            },
            {
                type: 'Banner',
                order: 0,
                props: {
                    title:
                        '«ЖИЛИЩНО-КОММУНАЛЬНОЕ ХОЗЯЙСТВО РЕСПУБЛИКИ САХА (ЯКУТИЯ)»',
                    subtitle: 'Государственное унитарное предприятие',
                    backgroundImage: '/bckgrnd2-scaled.jpg',
                    logoImage: '/лого-без-надписи-300x300.png',
                },
            },
            {
                type: 'Center',
                order: 0,
                props: {
                    id: 0,
                    content: [
                        {
                            type: 'Navbar',
                            order: 1,
                            props: { id: 0 },
                        },
                    ],
                },
            },
        ],
    };

    const renderElements = (element: any) => {
        switch (element.type) {
            case 'Navbar':
                return (
                    <Navbar
                        key={`${element.type}-${element.props.id}`}
                        menuData={menuData}
                    />
                );

            case 'Banner':
                return (
                    <Banner
                        key={`${element.type}-${element.props.id}`}
                        {...element.props}
                    />
                );

            case 'Center':
                return (
                    <Centered key={`${element.type}-${element.props.id}`}>
                        {element.props.content
                            .sort((a: any, b: any) => b.order - a.order)
                            .map(renderElements)}
                    </Centered>
                );

            case 'BannerCompact':
                return (
                    <BannerCompact
                        key={`${element.type}-${element.props.id}`}
                    />
                );

            default:
                return null;
        }
    };

    return (
        <header className="relative flex flex-col items-center bg-[#0063A7]">
            {scheme.content
                .sort((a, b) => b.order - a.order)
                .map(renderElements)}
        </header>
    );
}

export default Header;
