import { getBlockMeta } from '@/marketing/block-registry';
import { DEFAULT_FOOTER, DEFAULT_HEADER } from '@/marketing/cms-defaults';
import { migrateFooter, migrateNav } from '@/marketing/cms-migrator';
import type { FooterConfig, HeaderConfig, PageSeoOverride, Section } from '@/marketing/cms-types';
import PageSeo from '@/marketing/PageSeo';
import { Footer, Nav } from '@/marketing/shared';
import type { SharedProps } from '@/types/inertia';
import { Head, usePage } from '@inertiajs/react';
import type { ReactNode } from 'react';

type CustomPageData = {
    slug: string;
    title: string;
    enabled: boolean;
    sections: Section[];
    seo?: PageSeoOverride;
};

type PageProps = SharedProps & {
    page: CustomPageData;
};

/* Thin dispatcher for admin-created custom marketing pages. The route
 * closure (in routes/web.php) looks up the page by slug and ships its
 * payload as `page`. We render the sections through the same
 * BLOCK_REGISTRY dispatcher used by Welcome / About / Contact. */
export default function CustomPage() {
    const props = usePage<PageProps>().props;
    const { auth, branding, marketing, page } = props;
    const siteName = branding?.site_name || 'AppShot AI';
    const navConfig = marketing?.nav
        ? migrateNav<HeaderConfig>(marketing.nav as HeaderConfig)
        : DEFAULT_HEADER;
    const footerConfig = marketing?.footer
        ? migrateFooter<FooterConfig>(marketing.footer as FooterConfig)
        : DEFAULT_FOOTER;

    const sections: Section[] = (page?.sections ?? []).filter(
        (s) => s.enabled !== false,
    );

    return (
        <>
            <Head title={page?.title || 'Page'} />
            <PageSeo
                pageLabel={page?.title || 'Page'}
                override={page?.seo}
                sections={sections}
            />
            <div className="flex min-h-screen flex-col bg-background font-sans text-foreground antialiased">
                <Nav
                    siteName={siteName}
                    authed={!!auth.user}
                    branding={branding}
                    nav={navConfig}
                />
                <main className="flex-1">
                    {sections.length === 0 && (
                        <div className="mx-auto max-w-3xl px-6 py-24 text-center text-muted-foreground">
                            This page doesn't have any sections yet.
                        </div>
                    )}
                    {sections.map((section) => (
                        <div key={section.id}>{renderSection(section)}</div>
                    ))}
                </main>
                <Footer
                    siteName={siteName}
                    branding={branding}
                    footer={footerConfig}
                />
            </div>
        </>
    );
}

function renderSection(section: Section): ReactNode {
    const meta = getBlockMeta(section.type);
    if (!meta) return null;
    const Renderer = meta.renderer;
    return <Renderer section={section} />;
}
