/**
 * Listagem de páginas do site do projeto (extraída de `app/.../software/paginas` — FRONT-S2-02.ap).
 *
 * @route /projetos/[id]/software/paginas
 */
'use client';

import { FileText, Filter, Plus, RefreshCw } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { Badge, Button, Form, Result, Space, Spin, Tooltip } from 'antd';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { withProjetosSoftwareParametrosHub } from '@/lib/routes/projetosParametrosPaths';
import { EmptyState } from '@/components/empty';
import { PermissionGuard } from '@/components/permissions';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
import { LazyDataTable, LazyExportButton } from '@/components/lazy';
import { ListPageCreateFloatButton } from '@/components/listings';
import type { PaginaWebsite } from '@/types/projeto';
import { useIsMobile } from '@/hooks/useIsMobile';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import {
    isAplicacaoReactTipologia,
    resolvePaginasTipologiaCopy,
} from '@/features/projetos/lib/resolveAplicacaoReactTipologiaCopy';
import { AplicacaoReactExportCsvButton } from '@/features/projetos/aplicacao-react-export';
import { useRecordWebsiteOnboardingVisit } from '@/features/projetos/website-personalizado-onboarding';
import { recordReactModuleSectionOpened } from '@/lib/telemetry/aplicacaoReactTelemetry';
import { AplicarProjetoTemplateAction } from '@/features/projetos/projetos-templates';
import { detailPageQueryErrorSubTitle } from '@/lib/utils/detailPageQueryErrorSubTitle';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { useQueryCache } from '@/hooks/useQueryCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import type { Projeto } from '@/types';
import { usePaginasSiteListing } from './hooks/usePaginasSiteListing';
import { usePaginasSiteActions } from './hooks/usePaginasSiteActions';
import { usePaginasSiteColumns } from './hooks/usePaginasSiteColumns';
import { ModalFiltrosPaginasSite } from './components/ModalFiltrosPaginasSite';
import { ModalNovaPaginaSite } from './components/ModalNovaPaginaSite';
import { CardPaginaSite } from './components/CardPaginaSite';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';

const ModalOpcoesPaginaSite = dynamic(
    () => import('./components/ModalOpcoesPaginaSite').then((m) => m.ModalOpcoesPaginaSite),
    { ssr: false },
);

export interface ProjetoSoftwarePaginasScreenProps {
    projetoId: string;
}

export function ProjetoSoftwarePaginasScreen({ projetoId }: ProjetoSoftwarePaginasScreenProps) {
    const router = useRouter();
    const isMobileList = useIsMobile();
    const { canEditar, permsLoading, tooltipSemPermissao } = useProjetoWriteGates();
    useRecordWebsiteOnboardingVisit(projetoId, 'paginas');
    const filtrosModalLayout = useResponsiveModalProps();
    const novaPaginaModalLayout = useResponsiveModalProps();

    const [modalNovaAberto, setModalNovaAberto] = useState(false);
    const [modalFiltrosAberto, setModalFiltrosAberto] = useState(false);
    const [opcoesItem, setOpcoesItem] = useState<PaginaWebsite | null>(null);
    const [form] = Form.useForm();

    const { data: projetoResponse } = useQueryCache<Projeto | { projeto?: Projeto }>({
        queryKey: queryKeys.projetos.detail(projetoId),
        endpoint: API_ENDPOINTS.projetos.show(projetoId),
        enabled: !!projetoId,
        staleTime: 1 * 60 * 1000,
    });
    const projeto =
        projetoResponse && typeof projetoResponse === 'object' && 'projeto' in projetoResponse
            ? (projetoResponse as { projeto?: Projeto }).projeto
            : (projetoResponse as Projeto | undefined);
    const tipCopy = resolvePaginasTipologiaCopy(projeto?.categoria_projeto?.codigo);
    const isAplicacaoReact = isAplicacaoReactTipologia(projeto?.categoria_projeto?.codigo);

    // TASK-APR-047 — telemetria secção Telas
    useEffect(() => {
        if (!isAplicacaoReact) return;
        const n = Number(projetoId);
        if (!Number.isFinite(n)) return;
        recordReactModuleSectionOpened({ projeto_id: n, section: 'telas' });
    }, [isAplicacaoReact, projetoId]);

    const listing = usePaginasSiteListing(projetoId);
    const {
        usuarios,
        paginasData,
        paginasBrutas,
        paginas,
        isLoading,
        paginasQueryIsError,
        paginasQueryError,
        refetch,
        paginasPublicadas,
        paginasCriticasNaoPublicadas,
        tagsUnicas,
        filtros,
        filtrosComAlgumAtivo,
        filtrosAtivosCount,
        limparTodosFiltros,
    } = listing;

    const actions = usePaginasSiteActions(projetoId, refetch, form, () => setModalNovaAberto(false));
    const {
        createMutation,
        statusAprovacaoMutation,
        statusAprovacaoUpdatingId,
        handleVerDetalhes,
        handleStatusAprovacaoChange,
        handleDuplicar,
        handleArquivar,
        handleExcluir,
    } = actions;

    const columns = usePaginasSiteColumns({
        canEditar,
        permsLoading,
        tooltipSemPermissao,
        handleStatusAprovacaoChange,
        statusAprovacaoPending: statusAprovacaoMutation.isPending,
        statusAprovacaoUpdatingId,
        onOpenOpcoes: setOpcoesItem,
    });

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle={tipCopy.pageTitle}
            titleSection={tipCopy.titleSection}
            pageIcon="file-alt"
            headerAction={
                <Space wrap size={8} align="center">
                    <Tooltip
                        title={
                            filtrosAtivosCount > 0
                                ? `Filtros ativos (${filtrosAtivosCount}) — status, aprovação, tipo, prioridade, texto, responsável e tag; clique para ajustar no modal`
                                : `Abrir o modal de filtros — ${tipCopy.pageTitle}`
                        }
                    >
                        <span style={{ display: 'inline-block' }}>
                            <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                                <ButtonHeaderIcon
                                    data-testid="projetos-software-paginas-abrir-filtros"
                                    icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                    title={
                                        filtrosAtivosCount > 0
                                            ? `Filtros (${filtrosAtivosCount})`
                                            : 'Abrir filtros'
                                    }
                                    aria-label={tipCopy.filtrosAria}
                                    onClick={() => setModalFiltrosAberto(true)}
                                    aria-expanded={modalFiltrosAberto}
                                    aria-haspopup="dialog"
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </Badge>
                        </span>
                    </Tooltip>
                    {isAplicacaoReact ? (
                        <AplicacaoReactExportCsvButton
                            projetoId={projetoId}
                            kind="paginas"
                            size="large"
                        />
                    ) : (
                        <Tooltip title="Exportar itens visíveis com os filtros atuais (Excel, PDF, CSV ou JSON)">
                            <span style={{ display: 'inline-block' }}>
                                <LazyExportButton
                                    data={paginas as unknown as Record<string, unknown>[]}
                                    columns={[
                                        { key: 'titulo', label: 'Título' },
                                        { key: 'slug', label: 'Slug' },
                                        { key: 'tipo', label: 'Tipo' },
                                        { key: 'status', label: 'Status' },
                                        { key: 'status_aprovacao', label: 'Aprovação' },
                                        { key: 'prioridade', label: 'Prioridade' },
                                        { key: 'ambiente', label: 'Ambiente' },
                                        { key: 'tags', label: 'Tags' },
                                    ]}
                                    filename={`paginas_site_${projetoId}`}
                                    iconOnly
                                    title={`Exportar ${tipCopy.titleSection.toLowerCase()}`}
                                    size="large"
                                    exportMenuMode="modal"
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </span>
                        </Tooltip>
                    )}
                    <Tooltip title={`Recarregar ${tipCopy.titleSection.toLowerCase()}`}>
                        <span style={{ display: 'inline-block' }}>
                            <ButtonHeaderIcon
                                icon={<RefreshCw size={ICON_SIZE_MD} aria-hidden />}
                                title="Atualizar"
                                onClick={() => refetch()}
                            />
                        </span>
                    </Tooltip>
                </Space>
            }
        >
            {!paginasQueryIsError && paginasBrutas.length > 0 && (
                <OperativeRouteHint
                    type={paginasCriticasNaoPublicadas > 0 ? 'warning' : 'info'}
                    message="Publicação previsível"
                    description={withProjetosSoftwareParametrosHub(
                        paginasCriticasNaoPublicadas > 0
                            ? `${paginasCriticasNaoPublicadas} página(s) com prioridade crítica ainda não publicada(s) — conclua checklist e QA antes do release. ${paginasPublicadas} página(s) já em produção.`
                            : `Acompanhe status e etapas por página; use filtros para encontrar bloqueios. ${paginasPublicadas} publicada(s) de ${Array.isArray(paginasBrutas) ? paginasBrutas.length : 0} no projeto.`,
                    )}
                />
            )}
            {paginasQueryIsError && !paginasData ? (
                <ContentCard>
                    <Result
                        status="error"
                        title="Não foi possível carregar as páginas"
                        subTitle={detailPageQueryErrorSubTitle(paginasQueryError)}
                        extra={
                            <Button type="primary" onClick={() => void refetch()}>
                                Tentar novamente
                            </Button>
                        }
                    />
                </ContentCard>
            ) : (
                <>
                    <p className="ant-typography" style={{ marginBottom: 16, color: '#666' }}>
                        {tipCopy.intro}
                    </p>

                    
                    {paginas.length === 0 ? (
                        <EmptyState
                            title={tipCopy.emptyTitle}
                            description={tipCopy.emptyDescription}
                            icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                            action={
                                <Space wrap size={8}>
                                    <AplicarProjetoTemplateAction projetoId={projetoId} />
                                    <PermissionGuard permission="projetos.paginas.cadastrar">
                                        <Button
                                            type="primary"
                                            icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                            onClick={() => setModalNovaAberto(true)}
                                        >
                                            {tipCopy.novaLabel}
                                        </Button>
                                    </PermissionGuard>
                                </Space>
                            }
                        />
                    ) : isMobileList ? (
                        <Spin spinning={isLoading}>
                            <div
                                style={{ display: 'flex', flexDirection: 'column', gap: 12 }}
                                data-testid="projeto-software-paginas-mobile-cards"
                            >
                                {paginas.map((pagina) => (
                                    <CardPaginaSite
                                        key={pagina.id}
                                        item={pagina}
                                        onOpenOpcoes={setOpcoesItem}
                                    />
                                ))}
                            </div>
                        </Spin>
                    ) : (
                        <LazyDataTable
                            columns={columns}
                            data={paginas}
                            loading={isLoading}
                            onRefresh={refetch}
                            scroll={{ x: 1250 }}
                            {...listingTableVirtualScrollProps(paginas.length)}
                            onRow={(record: unknown) => ({
                                onClick: () => setOpcoesItem(record as PaginaWebsite),
                                style: { cursor: 'pointer' },
                            })}
                        />
                    )}
                    
                </>
            )}

            <ModalOpcoesPaginaSite
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onVerDetalhes={(item) => {
                    setOpcoesItem(null);
                    handleVerDetalhes(item);
                }}
                onAbrirKanban={() => {
                    setOpcoesItem(null);
                    router.push(`/projetos/${projetoId}/kanban`);
                }}
                onDuplicar={(item) => {
                    setOpcoesItem(null);
                    handleDuplicar(item);
                }}
                onArquivar={(item) => {
                    setOpcoesItem(null);
                    handleArquivar(item);
                }}
                onExcluir={(item) => {
                    setOpcoesItem(null);
                    handleExcluir(item);
                }}
            />

            <ModalFiltrosPaginasSite
                open={modalFiltrosAberto}
                onClose={() => setModalFiltrosAberto(false)}
                filtros={filtros}
                usuarios={usuarios}
                tagsUnicas={tagsUnicas}
                onLimparTodos={limparTodosFiltros}
                modalWidth={filtrosModalLayout.width ?? 420}
                modalCentered={filtrosModalLayout.centered}
                modalStyles={filtrosModalLayout.styles}
            />

            <ModalNovaPaginaSite
                open={modalNovaAberto}
                projetoId={projetoId}
                form={form}
                onClose={() => {
                    setModalNovaAberto(false);
                    form.resetFields();
                }}
                onSubmit={(values) => createMutation.mutate(values)}
                modalWidth={Math.max(Number(novaPaginaModalLayout.width) || 0, 720) || 720}
                modalCentered={novaPaginaModalLayout.centered}
                modalStyles={novaPaginaModalLayout.styles}
            />

            <PermissionGuard permission="projetos.paginas.cadastrar">
                <ListPageCreateFloatButton
                    data-testid="projeto-software-paginas-fab-nova"
                    tooltip={{ title: tipCopy.fabTooltip }}
                    onClick={() => setModalNovaAberto(true)}
                />
            </PermissionGuard>
        </ProjetoLayout>
    );
}