'use client';

import { confirmDialog } from '@/lib/feedback/confirmDialog';

import { message } from '@/lib/feedback/message';

import React, { useState, useMemo, useCallback } from 'react';
import dynamic from 'next/dynamic';
/**
 * Listagem de vulnerabilidades (`/projetos/[id]/qualidade/vulnerabilidades`).
 * FRONT-S2-02 — extraído de `app/(dashboard)/projetos/[id]/qualidade/vulnerabilidades/page.tsx`.
 * Template §3: `DetailPageLayout` + `fetchState`.
 */

import { AlertCircle, BarChart3, CheckCircle2, Filter, Menu, TriangleAlert } from 'lucide-react';
import {
    Alert,
    Badge,
    Button,
    Col,
    Modal,
    Row,
    Select,
    Space,
    Tooltip,
} from 'antd';
import { ICON_SIZE_MD } from '@/components/icons';
import { LazyExportButton } from '@/components/lazy';
import { LazyDataTable } from '@/components/lazy';
import type { ColumnsType } from 'antd/es/table';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { formatDate } from '@/lib/utils/export';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
import dayjs from 'dayjs';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import { useParams, useRouter } from 'next/navigation';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { DetailPageLayout } from '@/components/layouts/DetailPageLayout';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import { FormGroup } from '@/components/form';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { ButtonHeaderIcon } from '@/components/ui';
import type { DetailPageFetchState } from '@/components/layouts/DetailPageLayout';
import { detailPageQueryErrorSubTitle } from '@/lib/utils/detailPageQueryErrorSubTitle';
import {
        getVulnerabilidadeSeveridadeTag,
        getVulnerabilidadeStatusTag,
        getVulnerabilidadeTipoLabel} from './vulnerabilidadeDisplay';
import type { ProjetoVulnerabilidade } from './types';
import { FiltrosModalFooterPadrao,
    ListPageCreateFloatButton} from '@/components/listings';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';

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

function routeSegmentId(params: ReturnType<typeof useParams>): string {
    const raw = params?.id;
    if (typeof raw === 'string') return raw;
    if (Array.isArray(raw)) return raw[0] ?? '';
    return '';
}

export function ProjetoVulnerabilidadesScreen() {
    const params = useParams();
    const router = useRouter();
    const projetoId = routeSegmentId(params);
    const { canEditar, permsLoading } = useProjetoWriteGates();
    const [selectedVulnerabilidade, setSelectedVulnerabilidade] =
        useState<ProjetoVulnerabilidade | null>(null);
    const [modalDetalhes, setModalDetalhes] = useState(false);
    const [filtroStatus, setFiltroStatus] = useState<number | undefined>(undefined);
    const [filtroSeveridade, setFiltroSeveridade] = useState<number | undefined>(undefined);
    const [filtrosModalOpen, setFiltrosModalOpen] = useState(false);
    const [draftFiltroStatus, setDraftFiltroStatus] = useState<number | undefined>(undefined);
    const [draftFiltroSeveridade, setDraftFiltroSeveridade] = useState<number | undefined>(undefined);
    const [opcoesItem, setOpcoesItem] = useState<ProjetoVulnerabilidade | null>(null);
    const filtrosModalLayout = useResponsiveModalProps();

    const { data: statusData } = useQueryCache<{
        data: Array<{ id: number; nome: string; codigo: string }>;
    }>({
        queryKey: queryKeys.qa.vulnerabilidades.status(),
        endpoint: API_ENDPOINTS.qa?.vulnerabilidades?.status || '/api/v1/qa/vulnerabilidades/status',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000});

    const { data: severidadesData } = useQueryCache<{
        data: Array<{ id: number; nome: string; codigo: string }>;
    }>({
        queryKey: queryKeys.qa.vulnerabilidades.severidades(),
        endpoint:
            API_ENDPOINTS.qa?.vulnerabilidades?.severidades ||
            '/api/v1/qa/vulnerabilidades/severidades',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000});

    const statusOptions =
        statusData?.data?.map((status) => ({
            label: status.nome,
            value: status.id})) || [];

    const severidadeOptions =
        severidadesData?.data?.map((severidade) => ({
            label: severidade.nome,
            value: severidade.id})) || [];

    const {
        data: vulnerabilidadesData,
        isLoading,
        isError: vulnerabilidadesQueryIsError,
        error: vulnerabilidadesQueryError,
        refetch} = useQueryCache<{ data: ProjetoVulnerabilidade[] }>({
        queryKey: queryKeys.qa.vulnerabilidades.listFiltered(projetoId, filtroStatus, filtroSeveridade),
        endpoint: API_ENDPOINTS.qa?.vulnerabilidades?.index || '/api/v1/qa/vulnerabilidades',
        params: {
            ...(filtroStatus && { status_id: filtroStatus }),
            ...(filtroSeveridade && { severidade_id: filtroSeveridade })},
        staleTime: 2 * 60 * 1000,
        gcTime: 10 * 60 * 1000,
        enabled: Boolean(projetoId.trim())});

    const vulnerabilidades = useMemo(
        () => vulnerabilidadesData?.data ?? [],
        [vulnerabilidadesData?.data]
    );

    const limparTodosFiltros = useCallback(() => {
        setFiltroStatus(undefined);
        setFiltroSeveridade(undefined);
        setDraftFiltroStatus(undefined);
        setDraftFiltroSeveridade(undefined);
    }, []);

    const abrirModalFiltros = useCallback(() => {
        setDraftFiltroStatus(filtroStatus);
        setDraftFiltroSeveridade(filtroSeveridade);
        setFiltrosModalOpen(true);
    }, [filtroStatus, filtroSeveridade]);

    const reporRascunhoFiltros = useCallback(() => {
        setDraftFiltroStatus(undefined);
        setDraftFiltroSeveridade(undefined);
    }, []);

    const aplicarFiltrosModal = useCallback(() => {
        setFiltroStatus(draftFiltroStatus);
        setFiltroSeveridade(draftFiltroSeveridade);
        setFiltrosModalOpen(false);
    }, [draftFiltroStatus, draftFiltroSeveridade]);

    const handleDelete = async (vulnerabilidade: ProjetoVulnerabilidade) => {
        confirmDialog({
            title: 'Confirmar exclusão',
            content: `Deseja realmente excluir a vulnerabilidade "${vulnerabilidade.titulo}"?`,
            okText: 'Excluir',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: async () => {
                try {
                    message.success('Vulnerabilidade excluída com sucesso!');
                    refetch();
                } catch {
                    message.error('Erro ao excluir vulnerabilidade');
                }
            }});
    };

    const closeDetalhes = () => {
        setModalDetalhes(false);
        setSelectedVulnerabilidade(null);
    };

    const columns: ColumnsType<ProjetoVulnerabilidade> = [
        {
            title: 'Título',
            dataIndex: 'titulo',
            key: 'titulo',
            sorter: (a, b) => String(a.titulo ?? '').localeCompare(String(b.titulo ?? ''), 'pt'),
            render: (text: string) => <span style={{ fontWeight: 600, color: '#2c3e50' }}>{text}</span>},
        {
            title: 'Severidade',
            dataIndex: 'severidade',
            key: 'severidade',
            sorter: (a, b) =>
                String(a.severidade ?? '').localeCompare(String(b.severidade ?? ''), 'pt'),
            render: (severidade: string) => getVulnerabilidadeSeveridadeTag(severidade)},
        {
            title: 'Status',
            dataIndex: 'status',
            key: 'status',
            sorter: (a, b) => String(a.status ?? '').localeCompare(String(b.status ?? ''), 'pt'),
            render: (status: string) => getVulnerabilidadeStatusTag(status)},
        {
            title: 'Tipo',
            dataIndex: 'tipo',
            key: 'tipo',
            sorter: (a, b) => String(a.tipo ?? '').localeCompare(String(b.tipo ?? ''), 'pt'),
            render: (tipo: string) => getVulnerabilidadeTipoLabel(tipo)},
        {
            title: 'Superfície',
            key: 'modulo',
            width: 160,
            ellipsis: true,
            sorter: (a, b) =>
                String(a.modulo?.nome ?? '').localeCompare(String(b.modulo?.nome ?? ''), 'pt'),
            render: (_: unknown, record: ProjetoVulnerabilidade) =>
                record.modulo?.nome ? (
                    <span title={record.modulo.nome}>{record.modulo.nome}</span>
                ) : (
                    <span style={{ color: '#95a5a6' }}>—</span>
                )},
        {
            title: 'Responsável',
            key: 'responsavel',
            width: 140,
            ellipsis: true,
            sorter: (a, b) =>
                String(a.responsavel?.nome ?? '').localeCompare(String(b.responsavel?.nome ?? ''), 'pt'),
            render: (_: unknown, record: ProjetoVulnerabilidade) =>
                record.responsavel?.nome ? (
                    <span>{record.responsavel.nome}</span>
                ) : (
                    <span style={{ color: '#fa8c16' }}>Sem dono</span>
                )},
        {
            title: 'CVSS Score',
            dataIndex: 'cvss_score',
            key: 'cvss_score',
            sorter: (a, b) => (a.cvss_score ?? 0) - (b.cvss_score ?? 0),
            render: (score?: number) =>
                score ? (
                    <span
                        style={{
                            fontWeight: 600,
                            color: score >= 7 ? '#cf1322' : score >= 4 ? '#fa8c16' : '#1890ff'}}
                    >
                        {score.toFixed(1)}
                    </span>
                ) : (
                    '-'
                )},
        {
            title: 'Projeto',
            key: 'projeto',
            sorter: (a, b) =>
                String(a.projeto?.nome ?? '').localeCompare(String(b.projeto?.nome ?? ''), 'pt'),
            render: (_: unknown, record: ProjetoVulnerabilidade) => (
                <span>{record.projeto?.nome || '-'}</span>
            )},
        {
            title: 'Descoberta',
            dataIndex: 'data_descoberta',
            key: 'data_descoberta',
            sorter: (a, b) =>
                dayjs(a.data_descoberta).valueOf() - dayjs(b.data_descoberta).valueOf(),
            render: (data: string) => formatDate(data)},
        {
            title: '',
            key: 'menu',
            width: 56,
            align: 'center',
            onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
            render: (_: unknown, record: ProjetoVulnerabilidade) => (
                <Button
                    type="text"
                    size="small"
                    icon={<Menu />}
                    onClick={() => setOpcoesItem(record)}
                    aria-label="Opções"
                />
            )},
    ];

    const isUrgente = (v: ProjetoVulnerabilidade) =>
        (v.severidade === 'critica' || v.severidade === 'alta') &&
        (v.status === 'aberta' || v.status === 'em_analise');

    const vulnerabilidadesCriticas = vulnerabilidades.filter((v) => v.severidade === 'critica').length;
    const vulnerabilidadesUrgentes = vulnerabilidades.filter(isUrgente).length;
    const vulnerabilidadesAbertas = vulnerabilidades.filter(
        (v) => v.status === 'aberta' || v.status === 'em_analise'
    ).length;
    const vulnerabilidadesCorrigidas = vulnerabilidades.filter((v) => v.status === 'corrigida').length;
    const cvssMedio =
        vulnerabilidades.length > 0
            ? (
                  vulnerabilidades.reduce((sum, v) => sum + (v.cvss_score || 0), 0) /
                  vulnerabilidades.length
              ).toFixed(1)
            : '0';

    const idValid = Boolean(projetoId.trim());

    const fetchState: DetailPageFetchState = useMemo(() => {
        if (!idValid) return 'not_found';
        if (vulnerabilidadesQueryIsError && !vulnerabilidadesData) return 'error';
        if (isLoading && !vulnerabilidadesData) return 'loading';
        return 'ready';
    }, [idValid, vulnerabilidadesQueryIsError, vulnerabilidadesData, isLoading]);

    const vulnerabilidadesQueryErr =
        vulnerabilidadesQueryError instanceof Error
            ? vulnerabilidadesQueryError
            : vulnerabilidadesQueryError
              ? new Error(String(vulnerabilidadesQueryError))
              : null;

    const listErrorSubTitle = useMemo(
        () => detailPageQueryErrorSubTitle(vulnerabilidadesQueryError),
        [vulnerabilidadesQueryError]
    );

    const filtrosAtivosCount = useMemo(() => {
        let n = 0;
        if (filtroStatus !== undefined && filtroStatus !== null) n += 1;
        if (filtroSeveridade !== undefined && filtroSeveridade !== null) n += 1;
        return n;
    }, [filtroStatus, filtroSeveridade]);
    const filtrosComAlgumAtivo = filtrosAtivosCount > 0;

    const resumoFiltrosAplicados = useMemo(() => {
        const partes: string[] = [];
        if (filtroStatus != null) {
            const nome =
                statusData?.data?.find((s) => s.id === filtroStatus)?.nome ?? String(filtroStatus);
            partes.push(`Status: ${nome}`);
        }
        if (filtroSeveridade != null) {
            const nome =
                severidadesData?.data?.find((s) => s.id === filtroSeveridade)?.nome ??
                String(filtroSeveridade);
            partes.push(`Severidade: ${nome}`);
        }
        return partes.length ? partes.join(' · ') : '';
    }, [filtroStatus, filtroSeveridade, statusData?.data, severidadesData?.data]);

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Vulnerabilidades"
            showPageTitleIcon={false}
            titleSection="Vulnerabilidades"
            headerAction={
                fetchState === 'ready' ? (
                        <Space wrap size={8} align="center">
                            <Tooltip
                                title={
                                    filtrosComAlgumAtivo
                                        ? `Filtros ativos (${filtrosAtivosCount}) — abrir para alterar status ou severidade`
                                        : 'Definir status e severidade na listagem'
                                }
                            >
                                <span style={{ display: 'inline-block' }}>
                                <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                                    <ButtonHeaderIcon
                                        data-testid="projeto-qualidade-vulnerabilidades-abrir-filtros"
                                        icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                        title={
                                            filtrosAtivosCount > 0
                                                ? `Filtros (${filtrosAtivosCount})`
                                                : 'Filtros'
                                        }
                                        aria-label="Abrir filtros de vulnerabilidades"
                                        aria-expanded={filtrosModalOpen}
                                        aria-haspopup="dialog"
                                        onClick={abrirModalFiltros}
                                        className={btnHeaderStyles.btnHeaderIcon}
                                    />
                                </Badge>
                                </span>
                            </Tooltip>
                            <Tooltip title="Exportar vulnerabilidades visíveis (Excel, PDF, CSV ou JSON)">
                                <span style={{ display: 'inline-block' }}>
                                    <LazyExportButton
                                        data={vulnerabilidades as unknown as Record<string, unknown>[]}
                                        columns={[
                                            { key: 'titulo', label: 'Título' },
                                            { key: 'severidade', label: 'Severidade' },
                                            { key: 'status', label: 'Status' },
                                        ]}
                                        filename="vulnerabilidades"
                                        iconOnly
                                        title="Exportar vulnerabilidades"
                                        size="large"
                                        exportMenuMode="modal"
                                        className={btnHeaderStyles.btnHeaderIcon}
                                    />
                                </span>
                            </Tooltip>
                        </Space>
                    ) : undefined
            }
        >
        <DetailPageLayout
            breadcrumbItems={[
                { title: 'Projetos', path: '/projetos' },
                ...(idValid
                    ? [
                          { title: 'Projeto', path: `/projetos/${projetoId}` },
                          {
                              title: 'Vulnerabilidades',
                              path: `/projetos/${projetoId}/qualidade/vulnerabilidades`},
                      ]
                    : [{ title: 'Vulnerabilidades' }]),
            ]}
            header={{
                title: 'Vulnerabilidades',
                titleContent: '',
                description:
                    'Gerenciar vulnerabilidades de segurança identificadas — refine o recorte com Filtros no cabeçalho.',
            }}
            fetchState={fetchState}
            error={vulnerabilidadesQueryErr}
            onRetry={() => void refetch()}
            errorSubTitle={listErrorSubTitle}
            notFoundTitle="Projeto inválido"
            notFoundSubTitle="O identificador do projeto está em falta ou é inválido na rota."
            notFoundExtra={
                <Button type="primary" onClick={() => router.push('/projetos')}>
                    Voltar aos projetos
                </Button>
            }
            wrapChildrenInCard={false}
        >
            {fetchState === 'ready' && vulnerabilidades.length > 0 && (
                <OperativeRouteHint
                    type={vulnerabilidadesUrgentes > 0 ? 'warning' : 'info'}
                    message="Priorização e mitigação"
                    description={
                        vulnerabilidadesUrgentes > 0
                            ? `${vulnerabilidadesUrgentes} achado(s) alta/crítica ainda em aberto ou em análise — trate primeiro; use Filtros no cabeçalho para status e severidade; atribua responsável na coluna, registre mitigação temporária ou decisão de risco ao editar o item. Itens realçados na lista exigem atenção imediata.`
                            : 'Use Filtros no cabeçalho para refinar status e severidade; use também CVSS e ordenação para o backlog de correção — mantenha responsável e superfície atualizados até o fechamento.'
                    }
                />
            )}

            <div style={{ marginBottom: 24 }}>
                <MetricsGrid columns={4}>
                    <MetricCard
                        icon={<TriangleAlert size={ICON_SIZE_MD} aria-hidden />}
                        label="Críticas"
                        value={vulnerabilidadesCriticas}
                        variant="emAndamento"
                    />
                    <MetricCard
                        icon={<AlertCircle size={ICON_SIZE_MD} aria-hidden />}
                        label="Abertas"
                        value={vulnerabilidadesAbertas}
                        variant="planejamento"
                    />
                    <MetricCard
                        icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                        label="Corrigidas"
                        value={vulnerabilidadesCorrigidas}
                        variant="concluidos"
                    />
                    <MetricCard
                        icon={<BarChart3 size={ICON_SIZE_MD} aria-hidden />}
                        label="CVSS Médio"
                        value={cvssMedio}
                        variant="projetos"
                    />
                </MetricsGrid>
            </div>

            <Modal
                title="Filtrar por status e severidade"
                data-testid="projeto-qualidade-vulnerabilidades-filtros-modal"
                open={filtrosModalOpen}
                onCancel={() => setFiltrosModalOpen(false)}
                width={filtrosModalLayout.width ?? 640}
                centered={filtrosModalLayout.centered}
                styles={filtrosModalLayout.styles}
                footer={
                    <FiltrosModalFooterPadrao
                        onLimparTodos={reporRascunhoFiltros}
                        onFechar={() => setFiltrosModalOpen(false)}
                        showFiltrarPrimary
                        onFiltrar={aplicarFiltrosModal}
                        dataTestIdLimparTodos="projeto-qualidade-vulnerabilidades-filtros-modal-limpar-todos"
                    />
                }
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
            >
                <Row gutter={16}>
                    <Col xs={24} sm={12}>
                        <FormGroup label="Status">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftFiltroStatus}
                                onChange={(value) => setDraftFiltroStatus(value ?? undefined)}
                                options={statusOptions}
                            />
                        </FormGroup>
                    </Col>
                    <Col xs={24} sm={12}>
                        <FormGroup label="Severidade">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftFiltroSeveridade}
                                onChange={(value) => setDraftFiltroSeveridade(value ?? undefined)}
                                options={severidadeOptions}
                            />
                        </FormGroup>
                    </Col>
                </Row>
            </Modal>

            {filtrosComAlgumAtivo ? (
                <Alert
                    type="info"
                    showIcon
                    style={{ marginBottom: 16 }}
                    message={`Filtros aplicados (${filtrosAtivosCount})`}
                    description={
                        <>
                            {resumoFiltrosAplicados}
                            <Button type="link" onClick={limparTodosFiltros} style={{ paddingLeft: 8 }}>
                                Limpar filtros
                            </Button>
                        </>
                    }
                />
            ) : null}

            <div style={{ marginTop: filtrosComAlgumAtivo ? 0 : undefined }}>
            <LazyDataTable
                columns={columns}
                data={vulnerabilidades}
                loading={isLoading}
                onRefresh={refetch}
                {...listingTableVirtualScrollProps(vulnerabilidades.length)}
                onRow={(record: unknown) => {
                    const r = record as ProjetoVulnerabilidade;
                    return {
                        onClick: () => setOpcoesItem(r),
                        style: {
                            cursor: 'pointer',
                            background: isUrgente(r) ? 'rgba(250, 140, 22, 0.08)' : undefined}};
                }}
            />
</div>

            <ModalOpcoesVulnerabilidade
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onVerDetalhes={(item) => {
                    setOpcoesItem(null);
                    setSelectedVulnerabilidade(item);
                    setModalDetalhes(true);
                }}
                onEditar={(item) => {
                    setOpcoesItem(null);
                    router.push(
                        `/projetos/${projetoId}/qualidade/vulnerabilidades/${item.id}/edit`
                    );
                }}
                onExcluir={(item) => {
                    setOpcoesItem(null);
                    handleDelete(item);
                }}
            />

            <VulnerabilidadeDetalhesModal
                open={modalDetalhes}
                vulnerabilidade={selectedVulnerabilidade}
                onClose={closeDetalhes}
            />

            {fetchState === 'ready' && idValid && !permsLoading && canEditar ? (
                <ListPageCreateFloatButton
                    data-testid="projeto-vulnerabilidades-fab-nova"
                    tooltip={{
                        title: 'Nova vulnerabilidade — refine o recorte com Filtros no cabeçalho',
                    }}
                    onClick={() => router.push(`/projetos/${projetoId}/qualidade/vulnerabilidades/create`)}
                />
            ) : null}
        </DetailPageLayout>
        </ProjetoLayout>
    );
}