'use client';

import React, { ReactNode } from 'react';
import { useSetPageDocumentTitle } from '@/contexts/PageDocumentTitleContext';
import {
    useHideMobileBottomNav,
    useMobilePageActionBarActive,
} from '@/components/layouts/PageShellOptions';
import styles from './PageHeader.module.scss';

export interface PageHeaderProps {
    title: string;
    /** Conteúdo customizado no `<h1>` (mantém `title`/`documentTitleParts` para documento). */
    titleContent?: ReactNode;
    /** Partes explícitas do título do documento (ex.: nome da entidade + módulo). */
    documentTitleParts?: readonly string[];
    /** Conteúdo à esquerda do título (ex.: foto de perfil); quando definido, o `icon` omite-se. */
    titleLeading?: ReactNode;
    /** Bloco opcional acima do título, à direita do `titleLeading` (ex.: código). */
    titleAboveName?: ReactNode;
    /** Bloco opcional sob o título, à direita do `titleLeading` (ex.: estado + CPF). */
    titleBelowName?: ReactNode;
    description?: string | ReactNode;
    icon?: ReactNode;
    /** Conteúdo ao lado do título (ex.: segmented de vista na agenda). */
    titleTrailing?: ReactNode;
    /** @deprecated Breadcrumbs removidos do produto. */
    breadcrumb?: Array<{ title: string | ReactNode; href?: string }>;
    /**
     * Alias legado de `breadcrumb` (alguns ecrãs ainda passam `breadcrumbItems`).
     * @deprecated Preferir omitir breadcrumbs; se necessário, use `breadcrumb`.
     */
    breadcrumbItems?: Array<{ title: string | ReactNode; href?: string; path?: string }>;
    /** Ações no canto direito (alias de actions) */
    extra?: ReactNode;
    actions?: ReactNode;
    variant?: 'default' | 'pagina';
    /** Empilha ações abaixo do título (variant pagina); título numa linha com ellipsis. */
    stackActionsBelow?: boolean;
    className?: string;
}

export default function PageHeader({
    title,
    titleContent,
    documentTitleParts,
    titleLeading,
    titleAboveName,
    titleBelowName,
    description,
    icon,
    titleTrailing,
    breadcrumb: _breadcrumb,
    breadcrumbItems: _breadcrumbItems,
    extra,
    actions,
    variant = 'default',
    stackActionsBelow = false,
    className = '',
}: PageHeaderProps) {
    const titleParts = documentTitleParts ?? [title];
    useSetPageDocumentTitle(titleParts);

    const headerActions = extra ?? actions;
    const isPagina = variant === 'pagina';
    const hasDedicatedPageActionBar = useMobilePageActionBarActive();
    /**
     * Barra fixa do PageHeader (variant pagina).
     * Não mostrar se a página já tem barra dedicada (`MobilePageActionBar` / detalhe custom).
     * Em detalhe sem barra dedicada, ocultar só o `MobileBottomNav` — senão as duas barras
     * ficam empilhadas no mesmo `bottom`/`z-index` e o nav captura o toque (ex.: "Opções").
     */
    const showMobileActionsBar = isPagina && !!headerActions && !hasDedicatedPageActionBar;
    useHideMobileBottomNav(showMobileActionsBar);
    const headerClass = [
        isPagina ? styles.pageHeaderPagina : styles.pageHeader,
        isPagina && headerActions ? styles.withActions : '',
        isPagina && stackActionsBelow && headerActions ? styles.stackActionsBelow : '',
    ]
        .filter(Boolean)
        .join(' ');
    const hasTitleMetaStack = Boolean(titleLeading && (titleAboveName || titleBelowName));
    const hasDescription =
        description !== undefined && description !== null && description !== '';
    const showDescriptionBlock = hasDescription && !hasTitleMetaStack;
    const showPaginaContextStrip = isPagina && hasDescription && !hasTitleMetaStack;
    const showIconInTitle = Boolean(icon) && (!isPagina || !showPaginaContextStrip);

    const heading = titleContent ?? title;

    return (
        <>
            <div className={`${headerClass} ${className}`}>
                <div className={styles.content}>
                    <div className={styles.titleSection}>
                        <div
                            className={
                                titleTrailing
                                    ? `${styles.titleMainRow} ${styles.titleMainRowWithTrailing}`
                                    : styles.titleMainRow
                            }
                        >
                            {titleLeading ? (
                                <h1 className={styles.titleRow}>
                                    <span className={styles.titleLeading}>{titleLeading}</span>
                                    <span className={styles.titleStack}>
                                        {titleAboveName ? (
                                            <div className={styles.titleAboveName}>{titleAboveName}</div>
                                        ) : null}
                                        <span className={styles.titleHeadingText}>{heading}</span>
                                        {titleBelowName ? (
                                            <div className={styles.titleBelowName}>{titleBelowName}</div>
                                        ) : null}
                                    </span>
                                </h1>
                            ) : (
                                <h1>
                                    {showIconInTitle ? <span className={styles.icon}>{icon}</span> : null}
                                    {heading}
                                </h1>
                            )}
                            {titleTrailing ? (
                                <div className={styles.titleTrailing}>{titleTrailing}</div>
                            ) : null}
                        </div>
                        {!isPagina && showDescriptionBlock && description ? (
                            <div
                                className={styles.descriptionBlock}
                                title={
                                    typeof description === 'string' ? description : undefined
                                }
                            >
                                {description}
                            </div>
                        ) : null}
                    </div>
                    {headerActions && (
                        <div className={styles.actions} data-mobile-hidden>
                            {headerActions}
                        </div>
                    )}
                </div>
            </div>
            {showPaginaContextStrip ? (
                <div className={styles.contextStrip}>
                    {icon ? <span className={styles.contextStripIcon}>{icon}</span> : null}
                    {hasDescription ? (
                        <div
                            className={styles.contextStripDescription}
                            title={typeof description === 'string' ? description : undefined}
                        >
                            {description}
                        </div>
                    ) : null}
                </div>
            ) : null}
            {showMobileActionsBar && (
                <div
                    className={styles.actionsMobileBar}
                    role="navigation"
                    aria-label="Ações da página"
                >
                    {headerActions}
                </div>
            )}
        </>
    );
}