'use client';

/**
 * Página de gestão de um módulo do projeto.
 * @route /projetos/[id]/estrutura/modulos/[moduloId]
 */
import React, { useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Button, Result, Skeleton, Space, Tag, Tooltip, Typography } from 'antd';
import { ArrowLeft, FileText, Pencil, Plus } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { ButtonHeaderIcon } from '@/components/ui';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import { ListagemListaError } from '@/components/listings';
import { message } from '@/lib/feedback/message';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { detailPageQueryErrorSubTitle } from '@/lib/utils/detailPageQueryErrorSubTitle';
import { projetosProjetoCanonical } from '@/lib/routes/projetosProjetoCanonical';
import { MODULOS_LIST_PER_PAGE } from './constants';
import { getModuloStatusColor, getModuloStatusLabel, hasModuloStatus } from './moduloDisplay';
import { ModuloFormModal } from './ModuloFormModal';
import { ModuloGestaoTabs, type ModuloGestaoTabKey } from './ModuloGestaoTabs';
import type { ProjetoModulo, ProjetoModuloFormValues, ProjetoModuloListResponse } from './types';

const PROJETOS_LIST_PATH = '/projetos';

const TAB_KEYS: ModuloGestaoTabKey[] = ['visao', 'doc', 'alteracoes', 'paginas'];

function parseTab(raw: string | null): ModuloGestaoTabKey {
    if (raw && TAB_KEYS.includes(raw as ModuloGestaoTabKey)) {
        return raw as ModuloGestaoTabKey;
    }
    return 'visao';
}

export interface ProjetoModuloGestaoScreenProps {
    projetoId: string;
    moduloId: string;
}

export function ProjetoModuloGestaoScreen({ projetoId, moduloId }: ProjetoModuloGestaoScreenProps) {
    const router = useRouter();
    const searchParams = useSearchParams();
    const { canEditar, tooltipSemPermissao } = useProjetoWriteGates();
    const [formOpen, setFormOpen] = useState(false);
    const activeTab = parseTab(searchParams?.get('tab') ?? null);

    const moduloIdNum = Number(moduloId);
    const idOk = Number.isFinite(moduloIdNum) && moduloIdNum > 0;

    const {
        data: detalhe,
        isLoading,
        isError,
        error,
        refetch,
    } = useQueryCache<ProjetoModulo>({
        queryKey: queryKeys.projetos.modulo(projetoId, moduloIdNum),
        endpoint: API_ENDPOINTS.projetos.modulos.show(projetoId, moduloIdNum),
        enabled: Boolean(projetoId) && idOk,
        staleTime: 30 * 1000,
    });

    const { data: listaResponse } = useQueryCache<ProjetoModuloListResponse>({
        queryKey: queryKeys.projetos.modulosGestaoNomes(projetoId, MODULOS_LIST_PER_PAGE),
        endpoint: API_ENDPOINTS.projetos.modulos.index(projetoId),
        params: { per_page: MODULOS_LIST_PER_PAGE, page: 1 },
        enabled: Boolean(projetoId),
        staleTime: 60 * 1000,
    });

    const modulos = useMemo(
        () => (Array.isArray(listaResponse?.data) ? listaResponse.data : []),
        [listaResponse?.data],
    );

    const moduloNomeById = useMemo(() => {
        const map = new Map<number, string>();
        modulos.forEach((m) => map.set(m.id, m.nome));
        if (detalhe) map.set(detalhe.id, detalhe.nome);
        return map;
    }, [modulos, detalhe]);

    const filhos = useMemo(
        () => modulos.filter((m) => m.modulo_pai_id === moduloIdNum),
        [modulos, moduloIdNum],
    );

    const saveMutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.modulos.update(projetoId, moduloIdNum),
        method: 'PUT',
        invalidateQueries: [
            queryKeys.projetos.modulo(projetoId, moduloIdNum),
            queryKeys.projetos.modulos(projetoId),
        ],
        onSuccess: () => {
            message.success('Módulo atualizado com sucesso!');
            setFormOpen(false);
            void refetch();
        },
        onError: (err: unknown) => {
            const data = (err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } })
                ?.response?.data;
            const firstField =
                data?.errors && typeof data.errors === 'object'
                    ? Object.values(data.errors).flat()[0]
                    : undefined;
            message.error(firstField || data?.message || 'Erro ao salvar módulo');
        },
    });

    const setTab = (key: ModuloGestaoTabKey) => {
        const base = projetosProjetoCanonical.estruturaModulo(projetoId, moduloIdNum);
        const href = key === 'visao' ? base : `${base}?tab=${key}`;
        router.replace(href);
    };

    const listHref = projetosProjetoCanonical.estruturaModulos(projetoId);

    if (!projetoId || !idOk) {
        return (
            <ProjetoLayout
                projetoId={projetoId || '0'}
                pageTitle="Módulo"
                breadcrumbItems={[{ title: 'PROJETO' }, { title: 'Módulos' }]}
            >
                <Result status="404" title="Módulo inválido" />
            </ProjetoLayout>
        );
    }

    const pageTitle = detalhe?.nome ?? (isLoading ? 'Carregando…' : 'Módulo');

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle={pageTitle}
            pageIcon="cubes"
            titleSection={pageTitle}
            breadcrumbItems={[
                { title: 'PROJETO', path: PROJETOS_LIST_PATH },
                { title: 'Projeto', path: `${PROJETOS_LIST_PATH}/${projetoId}` },
                { title: 'Módulos', path: listHref },
                { title: detalhe?.nome ?? `#${moduloId}` },
            ]}
            headerAction={
                <Space wrap size={8} align="center">
                    <Button
                        icon={<ArrowLeft size={ICON_SIZE_MD} aria-hidden />}
                        onClick={() => router.push(listHref)}
                    >
                        Voltar à lista
                    </Button>
                    <Tooltip title={canEditar ? undefined : tooltipSemPermissao}>
                        <span style={{ display: 'inline-block' }}>
                            <ButtonHeaderIcon
                                icon={<Pencil size={ICON_SIZE_MD} aria-hidden />}
                                title="Editar módulo"
                                disabled={!canEditar || !detalhe}
                                onClick={() => setFormOpen(true)}
                                data-testid="estrutura-modulo-gestao-editar"
                            />
                        </span>
                    </Tooltip>
                </Space>
            }
        >
            {isError ? (
                <ContentCard>
                    <ListagemListaError
                        message="Não foi possível carregar o módulo"
                        description={detailPageQueryErrorSubTitle(error)}
                        onRetry={() => void refetch()}
                        data-testid="estrutura-modulo-gestao-retry"
                    />
                </ContentCard>
            ) : null}

            {!isError && isLoading && !detalhe ? (
                <ContentCard>
                    <Skeleton active paragraph={{ rows: 8 }} />
                </ContentCard>
            ) : null}

            {!isError && detalhe ? (
                <>
                    <MetricsGrid columns={3} style={{ marginBottom: 16 }}>
                        <MetricCard
                            icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                            label="Status"
                            value={
                                hasModuloStatus(detalhe.status) ? (
                                    <Tag
                                        color={getModuloStatusColor(detalhe.status)}
                                        style={{ margin: 0 }}
                                    >
                                        {getModuloStatusLabel(detalhe.status)}
                                    </Tag>
                                ) : (
                                    '—'
                                )
                            }
                            variant="projetos"
                        />
                        <MetricCard
                            icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                            label="Submódulos"
                            value={detalhe.filhos_count ?? filhos.length}
                            variant="projetos"
                        />
                        <MetricCard
                            icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                            label="Story points"
                            value={detalhe.story_points ?? '—'}
                            variant="projetos"
                        />
                    </MetricsGrid>

                    {detalhe.descricao ? (
                        <Typography.Paragraph type="secondary" style={{ marginBottom: 16 }}>
                            {detalhe.descricao}
                        </Typography.Paragraph>
                    ) : null}

                    <ContentCard style={{ marginTop: detalhe.descricao ? 0 : 16 }}>
                        <ModuloGestaoTabs
                            projetoId={projetoId}
                            moduloId={moduloIdNum}
                            detalhe={detalhe}
                            showLoading={isLoading}
                            canEditar={canEditar}
                            moduloNomeById={moduloNomeById}
                            filhos={filhos}
                            activeKey={activeTab}
                            onActiveKeyChange={setTab}
                            compact={false}
                        />
                    </ContentCard>
                </>
            ) : null}

            {!isError && !isLoading && !detalhe ? (
                <Result
                    status="404"
                    title="Módulo não encontrado"
                    extra={
                        <Button type="primary" onClick={() => router.push(listHref)}>
                            Voltar aos módulos
                        </Button>
                    }
                />
            ) : null}

            <ModuloFormModal
                open={formOpen}
                onClose={() => setFormOpen(false)}
                onSubmit={(values: ProjetoModuloFormValues) => saveMutation.mutate(values)}
                loading={saveMutation.isPending}
                modulo={detalhe ?? null}
                modulos={modulos}
            />
        </ProjetoLayout>
    );
}