'use client';

import React, { useMemo } from 'react';
import { useAparencia } from '@/hooks/useAparencia';
import { PrintDocumentLogo, resolvePrintTenantName } from '@/components/print';
import { cn } from '@/lib/utils/cn';
import styles from './DetailPrintSheet.module.scss';
import './DetailPrintSheet.print.scss';

export type DetailPrintRow = {
    label: string;
    value?: React.ReactNode;
    /** Ocupa a largura completa da grelha (ex.: descrição). */
    fullWidth?: boolean;
};

export type DetailPrintSection = {
    title?: string;
    rows: DetailPrintRow[];
};

export type DetailPrintSheetProps = {
    /** Título do documento (ex.: "Cliente", "Chamado"). */
    title: string;
    /** Identificador / código / número. */
    subtitle?: string;
    /** Estado ou etiqueta curta (ex.: "Ativo"). */
    status?: string;
    sections: DetailPrintSection[];
    /** Rodapé extra (ex.: aviso legal). */
    footerNote?: string;
    className?: string;
    'data-testid'?: string;
};

function formatPrintDate(d: Date): string {
    return d.toLocaleString('pt-BR', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    });
}

/**
 * Ficha de impressão compacta (A4, densidade alta) para páginas de detalhe Waygest.
 * Visível apenas em `@media print` com `body[data-detail-print]`.
 *
 * @see useDetailPrint
 */
export function DetailPrintSheet({
    title,
    subtitle,
    status,
    sections,
    footerNote,
    className,
    'data-testid': dataTestId,
}: DetailPrintSheetProps) {
    const { logoUrl, nomeSistema, corPrimaria } = useAparencia();
    const tenantName = resolvePrintTenantName(nomeSistema);
    const emittedAt = useMemo(() => formatPrintDate(new Date()), []);

    const visibleSections = sections
        .map((section) => ({
            ...section,
            rows: section.rows.filter((row) => {
                if (row.value == null || row.value === '') return false;
                if (row.value === '—') return false;
                return true;
            }),
        }))
        .filter((section) => section.rows.length > 0);

    return (
        <article
            data-detail-print-sheet
            className={cn(styles.sheet, className)}
            data-testid={dataTestId ?? 'detail-print-sheet'}
            aria-hidden
        >
            <header className={styles.header}>
                <div className={styles.brand}>
                    <PrintDocumentLogo
                        logoUrl={logoUrl}
                        fallbackInitial={tenantName}
                        primaryColor={corPrimaria}
                    />
                    <div>
                        <p className={styles.brandName}>{tenantName}</p>
                        <h1 className={styles.docTitle}>{title}</h1>
                    </div>
                </div>
                <div className={styles.meta}>
                    {subtitle ? <p className={styles.subtitle}>{subtitle}</p> : null}
                    {status ? <p className={styles.status}>{status}</p> : null}
                    <p className={styles.emitted}>Emitido em {emittedAt}</p>
                </div>
            </header>

            {visibleSections.map((section, idx) => (
                <section key={section.title ?? `sec-${idx}`} className={styles.section}>
                    {section.title ? <h2 className={styles.sectionTitle}>{section.title}</h2> : null}
                    <dl className={styles.grid}>
                        {section.rows.map((row) => (
                            <div
                                key={`${row.label}-${String(row.value)}`}
                                className={cn(styles.row, row.fullWidth && styles.rowFull)}
                            >
                                <dt className={styles.label}>{row.label}</dt>
                                <dd className={styles.value}>{row.value}</dd>
                            </div>
                        ))}
                    </dl>
                </section>
            ))}

            <footer className={styles.footer}>
                <span>
                    {tenantName} · documento gerado automaticamente · {emittedAt}
                </span>
                {footerNote ? <span className={styles.footerNote}>{footerNote}</span> : null}
            </footer>
        </article>
    );
}