import { Link } from '@inertiajs/react';
import { type ReactNode } from 'react';

import { mutedTextClassName } from '@admin/components/ui/field-styles';
import { CREATE_FORM_COL_SPAN, CREATE_SIDEBAR_COL_SPAN } from '@admin/lib/crud-constants';
import { cn } from '@admin/lib/utils';

type CreatePageLayoutProps = {
    form: ReactNode;
    sidebar: ReactNode;
    /** Link to the full index page below the sidebar table */
    indexHref?: string;
    indexLabel?: string;
};

const formColClass: Record<number, string> = {
    7: 'lg:col-span-7',
    8: 'lg:col-span-8',
};

const sidebarColClass: Record<number, string> = {
    5: 'lg:col-span-5',
    4: 'lg:col-span-4',
};

/** Two-column create shell: form (left) + compact list (right). See `.cursor/rules/admin-crud.mdc`. */
export function CreatePageLayout({
    form,
    sidebar,
    indexHref,
    indexLabel = 'View full list',
}: CreatePageLayoutProps) {
    return (
        <div className="grid grid-cols-12 gap-6">
            <div className={cn('col-span-12', formColClass[CREATE_FORM_COL_SPAN] ?? 'lg:col-span-7')}>{form}</div>
            <div className={cn('col-span-12', sidebarColClass[CREATE_SIDEBAR_COL_SPAN] ?? 'lg:col-span-5')}>
                {sidebar}
                {indexHref && (
                    <p className={cn('mt-3', mutedTextClassName)}>
                        <Link href={indexHref} className="text-primary hover:underline">
                            {indexLabel}
                        </Link>
                    </p>
                )}
            </div>
        </div>
    );
}