'use client';

/**
 * WBS (Work Breakdown Structure) — árvore hierárquica e detalhes.
 * @route /projetos/[id]/desenvolvimento/wbs
 */

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

import { BarChart3, CheckCircle2, Filter, List, Pencil, RefreshCw, Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import dynamic from 'next/dynamic';
import { Alert, Badge, Button, Col, Modal, Row, Select, Space, Tooltip, Tree } from 'antd';
import type { TreeDataNode } from 'antd';
import type { DataNode } from 'antd/es/tree';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { formatDate } from '@/lib/utils/export';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import { useParams, useRouter } from 'next/navigation';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import ContentCard from '@/components/layouts/ContentCard';
import { FormGroup } from '@/components/form';
import { queryKeys } from '@/lib/cache/queryKeys';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { ButtonHeaderIcon } from '@/components/ui';
import type { WBSItem } from './types';
import { getWbsStatusTag, getWbsTipoTag, WbsTreeNodeTitle } from './wbsDisplay';
import { buildWbsItemTree, wbsRootsToTreeData } from './wbsTreeHelpers';
import { FiltrosModalFooterPadrao,
    ListPageCreateFloatButton} from '@/components/listings';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';

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

const STATUS_WBS_LABEL: Record<string, string> = {
    planejado: 'Planejado',
    em_andamento: 'Em andamento',
    concluido: 'Concluído',
    cancelado: 'Cancelado'};

export function ProjetoDesenvolvimentoWbsScreen() {
    const params = useParams();
    const router = useRouter();
    const { canEditar, permsLoading } = useProjetoWriteGates();
    const routeProjetoId =
        typeof params?.id === 'string' ? params.id : Array.isArray(params?.id) ? params?.id[0] : '';
    const seededProjeto = useRef(false);
    const [treeData, setTreeData] = useState<TreeDataNode[]>([]);
    const [selectedItem, setSelectedItem] = useState<WBSItem | null>(null);
    const [modalDetalhes, setModalDetalhes] = useState(false);
    const [filtroProjeto, setFiltroProjeto] = useState<number | undefined>();
    const [filtroStatus, setFiltroStatus] = useState<string>('');
    const [filtrosModalOpen, setFiltrosModalOpen] = useState(false);
    const [draftFiltroProjeto, setDraftFiltroProjeto] = useState<number | undefined>();
    const [draftFiltroStatus, setDraftFiltroStatus] = useState('');
    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
    const detalheModalLayout = useResponsiveModalProps();
    const filtrosModalLayout = useResponsiveModalProps();

    const {
        data: wbsData,
        isLoading,
        refetch} = useQueryCache<{ data: WBSItem[] }>({
        queryKey: queryKeys.desenvolvimento.wbs(filtroProjeto, filtroStatus),
        endpoint: API_ENDPOINTS.desenvolvimento.wbs.index,
        params: {
            ...(filtroProjeto && { projeto_id: filtroProjeto }),
            ...(filtroStatus && { status: filtroStatus })},
        staleTime: 2 * 60 * 1000,
        gcTime: 10 * 60 * 1000});

    const wbsItems = useMemo(() => wbsData?.data || [], [wbsData?.data]);

    useEffect(() => {
        if (seededProjeto.current) return;
        const n = Number(routeProjetoId);
        if (routeProjetoId && !Number.isNaN(n)) {
            setFiltroProjeto(n);
            seededProjeto.current = true;
        }
    }, [routeProjetoId]);

    useEffect(() => {
        if (wbsItems.length > 0) {
            const roots = buildWbsItemTree(wbsItems);
            setTreeData(
                wbsRootsToTreeData(roots, (item) => <WbsTreeNodeTitle item={item} />),
            );
            setExpandedKeys(wbsItems.map((item) => item.id.toString()));
        }
    }, [wbsItems]);

    const handleDelete = async (item: WBSItem) => {
        confirmDialog({
            title: 'Confirmar exclusão',
            content: `Deseja realmente excluir o item "${item.codigo} - ${item.nome}"?`,
            okText: 'Excluir',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: async () => {
                try {
                    // await apiClient.delete(API_ENDPOINTS.desenvolvimento.wbs.destroy(item.id));
                    message.success('Item excluído com sucesso!');
                    refetch();
                } catch {
                    message.error('Erro ao excluir item');
                }
            }});
    };

    const onSelect = (selectedKeysValue: React.Key[], info: { node: DataNode }) => {
        setSelectedKeys(selectedKeysValue);
        if (info.node && 'data' in info.node && info.node.data) {
            setSelectedItem(info.node.data as WBSItem);
            setModalDetalhes(true);
        }
    };

    const totalItens = wbsItems.length;
    const itensConcluidos = wbsItems.filter((item) => item.status === 'concluido').length;
    const itensEmAndamento = wbsItems.filter((item) => item.status === 'em_andamento').length;
    const estimativaTotal = wbsItems
        .filter((item) => item.tipo === 'projeto' || item.tipo === 'fase')
        .reduce((sum, item) => sum + (item.estimativa_horas || 0), 0);
    const horasRealizadas = wbsItems
        .filter((item) => item.tipo === 'projeto' || item.tipo === 'fase')
        .reduce((sum, item) => sum + (item.horas_realizadas || 0), 0);
    const progresso =
        estimativaTotal > 0 ? ((horasRealizadas / estimativaTotal) * 100).toFixed(1) : '0';

    const routeProjetoNum =
        routeProjetoId && !Number.isNaN(Number(routeProjetoId)) ? Number(routeProjetoId) : undefined;
    const filtrosAtivosCount = useMemo(() => {
        let n = 0;
        if (filtroStatus) n += 1;
        if (
            routeProjetoNum != null &&
            filtroProjeto !== undefined &&
            filtroProjeto !== routeProjetoNum
        ) {
            n += 1;
        }
        return n;
    }, [filtroStatus, filtroProjeto, routeProjetoNum]);
    const filtrosComAlgumAtivo = filtrosAtivosCount > 0;

    const resumoFiltrosAplicados = useMemo(() => {
        const partes: string[] = [];
        if (filtroStatus) partes.push(`Status: ${STATUS_WBS_LABEL[filtroStatus] ?? filtroStatus}`);
        if (
            routeProjetoNum != null &&
            filtroProjeto !== undefined &&
            filtroProjeto !== routeProjetoNum
        ) {
            partes.push(`Projeto (filtro): id ${filtroProjeto}`);
        }
        return partes.length ? partes.join(' · ') : '';
    }, [filtroStatus, filtroProjeto, routeProjetoNum]);

    const limparTodosFiltros = useCallback(() => {
        setFiltroStatus('');
        setDraftFiltroStatus('');
        if (routeProjetoNum != null) {
            setFiltroProjeto(routeProjetoNum);
            setDraftFiltroProjeto(routeProjetoNum);
        } else {
            setFiltroProjeto(undefined);
            setDraftFiltroProjeto(undefined);
        }
    }, [routeProjetoNum]);

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

    const reporRascunhoFiltros = useCallback(() => {
        setDraftFiltroStatus('');
        if (routeProjetoNum != null) {
            setDraftFiltroProjeto(routeProjetoNum);
        } else {
            setDraftFiltroProjeto(undefined);
        }
    }, [routeProjetoNum]);

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

    return (
        <ProjetoLayout
            projetoId={routeProjetoId}
            pageTitle="WBS"
            showPageTitleIcon={false}
            titleSection="WBS"
            headerAction={
                    <Space wrap size={8} align="center">
                        <Tooltip
                            title={
                                filtrosComAlgumAtivo
                                    ? `Filtros ativos (${filtrosAtivosCount}) — abrir para alterar projeto ou status`
                                    : 'Definir projeto e status da WBS'
                            }
                        >
                            <span style={{ display: 'inline-block' }}>
                            <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                                <ButtonHeaderIcon
                                    data-testid="desenvolvimento-wbs-abrir-filtros"
                                    icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                    title={
                                        filtrosAtivosCount > 0
                                            ? `Filtros (${filtrosAtivosCount})`
                                            : 'Filtros'
                                    }
                                    aria-label="Abrir filtros da WBS"
                                    aria-expanded={filtrosModalOpen}
                                    aria-haspopup="dialog"
                                    onClick={abrirModalFiltros}
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </Badge>
                            </span>
                        </Tooltip>
                        <Tooltip title="Atualizar árvore WBS">
                            <span style={{ display: 'inline-block' }}>
                                <ButtonHeaderIcon
                                    data-testid="desenvolvimento-wbs-atualizar"
                                    icon={<RefreshCw size={ICON_SIZE_MD} aria-hidden />}
                                    title="Atualizar"
                                    aria-label="Atualizar listagem WBS"
                                    onClick={() => void refetch()}
                                    disabled={isLoading}
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </span>
                        </Tooltip>
                        <Tooltip title="Exportar itens WBS visíveis (Excel, PDF, CSV ou JSON)">
                            <span style={{ display: 'inline-block' }}>
                                <LazyExportButton
                                    data={wbsItems as unknown as Record<string, unknown>[]}
                                    columns={[
                                        { key: 'codigo', label: 'Código' },
                                        { key: 'nome', label: 'Nome' },
                                        { key: 'tipo', label: 'Tipo' },
                                    ]}
                                    filename="wbs"
                                    iconOnly
                                    title="Exportar WBS"
                                    size="large"
                                    exportMenuMode="modal"
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </span>
                        </Tooltip>
                    </Space>
            }
        >
            {routeProjetoId ? (
                <OperativeRouteHint
                    message="Progresso acionável"
                    description="O recorte está alinhado ao projeto da rota; use Filtros no cabeçalho se precisar de outro projeto ou de estado. Valide folhas bloqueadas e sincronize com o backlog técnico quando desdobrar trabalho."
                >
                    <Space wrap size={8} align="center">
                        <Tooltip title="Abrir backlog técnico do projeto">
                            <span style={{ display: 'inline-block' }}>
                                <Button
                                    type="primary"
                                    onClick={() =>
                                        router.push(`/projetos/${routeProjetoId}/planejamento/backlog`)
                                    }
                                >
                                    Backlog técnico
                                </Button>
                            </span>
                        </Tooltip>
                        <Tooltip title="Abrir cronograma Gantt do planejamento">
                            <span style={{ display: 'inline-block' }}>
                                <Button onClick={() => router.push(`/projetos/${routeProjetoId}/planejamento/gantt`)}>
                                    Gantt
                                </Button>
                            </span>
                        </Tooltip>
                    </Space>
                </OperativeRouteHint>
            ) : null}

            <MetricsGrid columns={4} style={{ marginBottom: 24 }}>
                <MetricCard
                    icon={<List size={ICON_SIZE_MD} aria-hidden />}
                    label="Total de Itens"
                    value={totalItens}
                    variant="projetos"
                />
                <MetricCard
                    icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                    label="Concluídos"
                    value={itensConcluidos}
                    variant="concluidos"
                />
                <MetricCard
                    icon={<RefreshCw size={ICON_SIZE_MD} aria-hidden />}
                    label="Em Andamento"
                    value={itensEmAndamento}
                    variant="emAndamento"
                />
                <MetricCard
                    icon={<BarChart3 size={ICON_SIZE_MD} aria-hidden />}
                    label="Progresso"
                    value={`${progresso}%`}
                    variant="planejamento"
                />
            </MetricsGrid>

            <Modal
                title="Filtrar WBS"
                data-testid="desenvolvimento-wbs-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="desenvolvimento-wbs-filtros-modal-limpar-todos"
                    />
                }
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
            >
                <Row gutter={16}>
                    <Col xs={24} sm={12}>
                        <FormGroup label="Projeto">
                            <Select
                                placeholder="Projeto da API"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftFiltroProjeto}
                                onChange={(v) => setDraftFiltroProjeto(v)}
                            >
                                <Select.Option value={1}>Sistema de Gestão</Select.Option>
                            </Select>
                        </FormGroup>
                    </Col>
                    <Col xs={24} sm={12}>
                        <FormGroup label="Status">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftFiltroStatus || undefined}
                                onChange={(v) => setDraftFiltroStatus(v ?? '')}
                            >
                                <Select.Option value="planejado">Planejado</Select.Option>
                                <Select.Option value="em_andamento">Em Andamento</Select.Option>
                                <Select.Option value="concluido">Concluído</Select.Option>
                                <Select.Option value="cancelado">Cancelado</Select.Option>
                            </Select>
                        </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}

            <ContentCard style={{ marginTop: filtrosComAlgumAtivo ? 0 : undefined }}>
                <Tree
                    treeData={treeData}
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedKeys}
                    onExpand={setExpandedKeys}
                    onSelect={onSelect}
                    defaultExpandAll
                    showLine={{ showLeafIcon: false }}
                    style={{ minHeight: 400 }}
                />
            </ContentCard>

            <Modal
                title={
                    selectedItem
                        ? `${selectedItem.codigo} - ${selectedItem.nome}`
                        : 'Detalhes do Item'
                }
                open={modalDetalhes}
                onCancel={() => {
                    setModalDetalhes(false);
                    setSelectedItem(null);
                }}
                footer={[
                    <Button
                        key="edit"
                        type="primary"
                        icon={<Pencil size={ICON_SIZE_MD} aria-hidden />}
                        onClick={() => {
                            if (selectedItem) {
                                window.location.href = `/desenvolvimento/wbs/${selectedItem.id}/edit`;
                            }
                        }}
                    >
                        Editar
                    </Button>,
                    <Button
                        key="delete"
                        danger
                        icon={<Trash2 size={ICON_SIZE_MD} aria-hidden />}
                        onClick={() => {
                            if (selectedItem) {
                                handleDelete(selectedItem);
                            }
                        }}
                    >
                        Excluir
                    </Button>,
                    <Button
                        key="close"
                        onClick={() => {
                            setModalDetalhes(false);
                            setSelectedItem(null);
                        }}
                    >
                        Fechar
                    </Button>,
                ]}
                width={detalheModalLayout.width ?? 800}
                centered={detalheModalLayout.centered}
                styles={detalheModalLayout.styles}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="projeto-desenvolvimento-wbs-detalhes-modal"
            >
                {selectedItem && (
                    <div>
                        <Row gutter={16} style={{ marginBottom: 16 }}>
                            <Col span={12}>
                                <p>
                                    <strong>Código:</strong> {selectedItem.codigo}
                                </p>
                                <p>
                                    <strong>Tipo:</strong> {getWbsTipoTag(selectedItem.tipo)}
                                </p>
                                <p>
                                    <strong>Status:</strong> {getWbsStatusTag(selectedItem.status)}
                                </p>
                                <p>
                                    <strong>Nível:</strong> {selectedItem.nivel}
                                </p>
                            </Col>
                            <Col span={12}>
                                {selectedItem.projeto && (
                                    <p>
                                        <strong>Projeto:</strong> {selectedItem.projeto.nome}
                                    </p>
                                )}
                                {selectedItem.responsavel && (
                                    <p>
                                        <strong>Responsável:</strong>{' '}
                                        {selectedItem.responsavel.nome}
                                    </p>
                                )}
                                {selectedItem.estimativa_horas && (
                                    <p>
                                        <strong>Estimativa:</strong> {selectedItem.estimativa_horas}
                                        h
                                    </p>
                                )}
                                {selectedItem.horas_realizadas !== undefined && (
                                    <p>
                                        <strong>Horas Realizadas:</strong>{' '}
                                        {selectedItem.horas_realizadas}h
                                    </p>
                                )}
                            </Col>
                        </Row>
                        {selectedItem.descricao && (
                            <div style={{ marginBottom: 16 }}>
                                <p>
                                    <strong>Descrição:</strong>
                                </p>
                                <p>{selectedItem.descricao}</p>
                            </div>
                        )}
                        {(selectedItem.data_inicio || selectedItem.data_fim) && (
                            <div style={{ marginBottom: 16 }}>
                                {selectedItem.data_inicio && (
                                    <p>
                                        <strong>Data Início:</strong>{' '}
                                        {formatDate(selectedItem.data_inicio)}
                                    </p>
                                )}
                                {selectedItem.data_fim && (
                                    <p>
                                        <strong>Data Fim:</strong>{' '}
                                        {formatDate(selectedItem.data_fim)}
                                    </p>
                                )}
                            </div>
                        )}
                        {selectedItem.estimativa_horas &&
                            selectedItem.horas_realizadas !== undefined && (
                                <div>
                                    <p>
                                        <strong>Progresso:</strong> {selectedItem.horas_realizadas}/
                                        {selectedItem.estimativa_horas}h (
                                        {(
                                            (selectedItem.horas_realizadas /
                                                selectedItem.estimativa_horas) *
                                            100
                                        ).toFixed(1)}
                                        %)
                                    </p>
                                </div>
                            )}
                    </div>
                )}
            </Modal>

            {!permsLoading && canEditar ? (
                <ListPageCreateFloatButton
                    data-testid="desenvolvimento-wbs-fab-novo"
                    tooltip={{
                        title: 'Novo item na WBS — refine o recorte com Filtros no cabeçalho',
                    }}
                    onClick={() => router.push('/desenvolvimento/wbs/create')}
                />
            ) : null}
        </ProjetoLayout>
    );
}