import { cn } from '@/lib/utils';
import type { ReactNode } from 'react';

/** Ancho máximo unificado del contenido principal (mismo marco que Dashboard / Mis balances). */
export const appMainContentClass = 'mx-auto w-full max-w-[1100px]';

/** Resumen u héroe con borde dorado suave (alineado en todas las vistas). */
export const appCardAccentClass = 'border-primary/40 bg-primary/15';

const stackGap = 'flex flex-col gap-7 sm:gap-8';

type AppPageWidth = 'default' | 'narrow';

const widthClass: Record<AppPageWidth, string> = {
    default: 'max-w-[1100px]',
    narrow: 'max-w-3xl',
};

export function AppPage({
    children,
    className,
    width = 'default',
}: {
    children: ReactNode;
    className?: string;
    width?: AppPageWidth;
}) {
    return (
        <div
            className={cn(
                'mx-auto flex w-full flex-col',
                stackGap,
                widthClass[width],
                className,
            )}
        >
            {children}
        </div>
    );
}

/** Cabecera de página con borde inferior (título + acciones opcionales). */
export function AppPageHeader({
    children,
    className,
}: {
    children: ReactNode;
    className?: string;
}) {
    return (
        <header
            className={cn(
                'flex flex-col gap-3 border-b border-border pb-6 sm:flex-row sm:items-end sm:justify-between',
                className,
            )}
        >
            {children}
        </header>
    );
}

export function AppPageTitleBlock({
    title,
    description,
    className,
    descriptionClassName,
}: {
    title: ReactNode;
    description?: ReactNode;
    className?: string;
    descriptionClassName?: string;
}) {
    return (
        <div className={cn('min-w-0 flex-1 space-y-2', className)}>
            <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
            {description ? (
                <div
                    className={cn(
                        'max-w-2xl text-base text-muted-foreground',
                        descriptionClassName,
                    )}
                >
                    {description}
                </div>
            ) : null}
        </div>
    );
}

export function AppPageActions({
    children,
    className,
}: {
    children: ReactNode;
    className?: string;
}) {
    return (
        <div className={cn('flex flex-shrink-0 flex-wrap gap-2', className)}>
            {children}
        </div>
    );
}

/** Títulos de sección (bajo el bloque principal). */
export function AppSectionHeading({
    id,
    children,
    className,
    as: Comp = 'h2',
}: {
    id?: string;
    children: ReactNode;
    className?: string;
    as?: 'h2' | 'h3';
}) {
    return (
        <Comp
            id={id}
            className={cn('text-lg font-semibold tracking-tight', className)}
        >
            {children}
        </Comp>
    );
}

/** Fila superior para “volver atrás” en subpáginas. */
export function AppBackLinkRow({
    children,
    className,
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={cn('-ml-2 flex', className)}>{children}</div>;
}

/**
 * Contenedor horizontal del flujo Invertir (dos columnas); comparte el mismo ancho máximo que el resto del portal.
 */
export function AppInvestPageFrame({ children }: { children: ReactNode }) {
    return (
        <div className="flex flex-1 flex-col justify-center py-6">
            <div
                className={cn(
                    appMainContentClass,
                    'flex flex-col gap-6 lg:flex-row lg:items-stretch lg:gap-8',
                )}
            >
                {children}
            </div>
        </div>
    );
}