/**
 * @fileoverview Página de Detalhes da História de Usuário
 *
 * @description
 * Página para visualizar os detalhes completos de uma história de usuário,
 * incluindo informações, critérios de aceitação e tarefas associadas.
 *
 * @route /projetos/[id]/historias-usuario/[historiaId]
 * @module historias-usuario
 * @author Sistema de Gestão
 * @since 1.0.0
 */
'use client';

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

import { ArrowLeft, Pencil, Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Button, Space, Modal, Alert, Result, Form } from 'antd';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useWaygestFormModalProps, waygestFormModalFooterClassName } from '@/hooks/useWaygestFormModalProps';
import { useMutationCache } from '@/hooks/useMutationCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { HistoriaUsuarioView, HistoriaUsuarioForm } from '@/features/tarefas/components';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { HistoriaUsuario, Epico } from '@/types/projeto';
import { Usuario } from '@/types/usuario';

const PROJETOS_LIST_PATH = '/projetos';

/**
 * Componente da página de Detalhes da História de Usuário
 */
export default function HistoriaUsuarioDetailPage() {
    const params = useParams();
    const router = useRouter();
    const projetoId = String(params?.id ?? '').trim();
    const historiaId = String(params?.historiaId ?? '').trim();
    const idsValid = Boolean(projetoId) && Boolean(historiaId);
    const listPath = `/projetos/${projetoId}/historias-usuario`;

    const [modalVisible, setModalVisible] = useState(false);
    const [historiaForm] = Form.useForm();
    const historiaEditModalLayout = useWaygestFormModalProps();

    const {
        data: historiaData,
        isLoading,
        isError,
        isFetched,
        error: queryError,
        refetch,
    } = useQueryCache<{
        data: HistoriaUsuario;
    }>({
        queryKey: queryKeys.historiasUsuario.show(historiaId),
        endpoint: API_ENDPOINTS.historiasUsuario.show(historiaId),
        enabled: idsValid,
    });

    const errStatus = (queryError as { response?: { status?: number } } | null)?.response?.status;
    const queryErr =
        queryError instanceof Error ? queryError : queryError ? new Error(String(queryError)) : null;

    const { data: tarefasData } = useQueryCache<{ data: HistoriaUsuario['tarefas'] }>({
        queryKey: queryKeys.historiasUsuario.tarefas(historiaId),
        endpoint: API_ENDPOINTS.historiasUsuario.tarefas(historiaId),
        enabled: idsValid,
    });

    const historia = historiaData?.data;
    const projetoIdHistoria = historia?.projeto_id;

    const { data: epicosData } = useQueryCache<Epico[]>({
        queryKey: queryKeys.epicosCatalog.byProjeto(projetoIdHistoria ?? 'pending'),
        endpoint: projetoIdHistoria ? API_ENDPOINTS.epicos.index(projetoIdHistoria) : '',
        enabled: !!projetoIdHistoria,
    });

    const { data: usuariosData } = useQueryCache<{ data: Usuario[] }>({
        queryKey: queryKeys.usuariosCatalog.list(),
        endpoint: API_ENDPOINTS.admin.usuarios.index,
        params: { per_page: 1000 },
    });

    const tarefas = tarefasData?.data || historia?.tarefas || [];
    const epicos = epicosData || [];
    const usuarios = usuariosData?.data || [];

    const hintHistoria = useMemo(() => {
        if (!historia) return { tipo: 'info' as const, msg: '', desc: '' };
        const semAceite = !historia.criterios_aceitacao?.length;
        const partes: string[] = [];
        if (semAceite) partes.push('defina critérios de aceite');
        if (!historia.responsavel_id && !historia.responsavel) partes.push('atribua responsável');
        if (tarefas.length === 0) partes.push('desdobre em tarefas quando fizer sentido');
        if (partes.length > 0) {
            return {
                tipo: 'warning' as const,
                msg: 'Prontidão para execução',
                desc: `Antes de puxar para sprint: ${partes.join('; ')}.`,
            };
        }
        return {
            tipo: 'info' as const,
            msg: 'História pronta para revisão',
            desc: 'Confirme valor de negócio e dependências com o épico antes de comprometer na sprint.',
        };
    }, [historia, tarefas.length]);

    const updateMutation = useMutationCache<HistoriaUsuario, Record<string, unknown>>({
        endpoint: () => API_ENDPOINTS.historiasUsuario.update(historiaId),
        method: 'PUT',
        invalidateQueries: [
            ['historias-usuario', historiaId],
            ['historias-usuario', 'projeto', historia?.projeto_id],
        ],
        onSuccess: () => {
            message.success('História de usuário atualizada com sucesso!');
            setModalVisible(false);
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao atualizar história de usuário';
            message.error(errorMessage);
        },
    });

    const deleteMutation = useMutationCache<{ message: string }, unknown>({
        endpoint: () => API_ENDPOINTS.historiasUsuario.destroy(historiaId),
        method: 'DELETE',
        invalidateQueries: [['historias-usuario', 'projeto', historia?.projeto_id]],
        onSuccess: () => {
            message.success('História de usuário removida com sucesso!');
            router.push(listPath);
        },
        onError: () => {
            message.error('Erro ao remover história de usuário');
        },
    });

    const handleEdit = () => {
        setModalVisible(true);
    };

    const handleDelete = () => {
        confirmDialog({
            title: 'Remover História de Usuário?',
            content: `Tem certeza que deseja remover a história "${historia?.titulo}"?`,
            okText: 'Sim',
            okType: 'danger',
            cancelText: 'Não',
            onOk: () => {
                deleteMutation.mutate({});
            },
        });
    };

    const handleSubmit = (values: Record<string, unknown>) => {
        updateMutation.mutate(values);
    };

    const huBreadcrumb = (title: string) => [
        { title: 'PROJETO', path: `/projetos/${projetoId}` },
        { title: 'Histórias', path: listPath },
        { title },
    ];

    const invalidIdsAlert = (
        <Alert
            message="Identificador inválido"
            description="Projeto ou história em falta na rota."
            type="error"
            showIcon
            action={
                <Button type="primary" size="small" onClick={() => router.push(PROJETOS_LIST_PATH)}>
                    Voltar à lista de projetos
                </Button>
            }
        />
    );

    if (!idsValid) {
        if (projetoId) {
            return (
                <ProjetoLayout
                    projetoId={projetoId}
                    pageTitle="História de usuário"
                    showPageTitleIcon={false}
                    titleSection="História de usuário"
                    breadcrumbItems={huBreadcrumb('Inválido')}
                >
                    {invalidIdsAlert}
                </ProjetoLayout>
            );
        }
        return invalidIdsAlert;
    }

    if (isLoading && !historia) {
        return (
            <ProjetoLayout
                projetoId={projetoId}
                pageTitle="Carregando…"
                pageIcon="spinner"
                titleSection="História de usuário"
                breadcrumbItems={huBreadcrumb('Detalhe')}
            >
                {null}
            </ProjetoLayout>
        );
    }

    if (isError) {
        const is404 = errStatus === 404;
        return (
            <ProjetoLayout
                projetoId={projetoId}
                pageTitle={is404 ? 'Não encontrado' : 'Erro'}
                pageIcon={is404 ? 'search' : 'exclamation-triangle'}
                titleSection="História de usuário"
                breadcrumbItems={huBreadcrumb(is404 ? 'Não encontrado' : 'Erro')}
            >
                <ContentCard>
                    <Result
                        status={is404 ? '404' : 'error'}
                        title={is404 ? 'História não encontrada' : 'Não foi possível carregar a história'}
                        subTitle={
                            queryErr?.message ??
                            (is404
                                ? 'A história não existe ou não tem permissão para a ver.'
                                : 'Tente novamente dentro de instantes.')
                        }
                        extra={
                            <Space wrap>
                                {!is404 ? (
                                    <Button type="primary" onClick={() => void refetch()}>
                                        Tentar novamente
                                    </Button>
                                ) : null}
                                <Button onClick={() => router.push(listPath)}>Voltar à lista</Button>
                            </Space>
                        }
                    />
                </ContentCard>
            </ProjetoLayout>
        );
    }

    if (isFetched && !historia) {
        return (
            <ProjetoLayout
                projetoId={projetoId}
                pageTitle="Não encontrado"
                pageIcon="search"
                titleSection="História de usuário"
                breadcrumbItems={huBreadcrumb('Não encontrado')}
            >
                <ContentCard>
                    <Result
                        status="404"
                        title="História não encontrada"
                        subTitle="A resposta veio vazia."
                        extra={
                            <Button type="primary" onClick={() => router.push(listPath)}>
                                Voltar à lista
                            </Button>
                        }
                    />
                </ContentCard>
            </ProjetoLayout>
        );
    }

    const h = historia!;

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle={h.titulo}
            pageIcon="book"
            titleSection="História de usuário"
            breadcrumbItems={huBreadcrumb(h.codigo || 'Detalhe')}
            headerAction={
                <Space wrap>
                    <Button icon={<ArrowLeft />} onClick={() => router.push(listPath)}>
                        Voltar
                    </Button>
                    <Button icon={<Pencil />} onClick={handleEdit}>
                        Editar
                    </Button>
                    <Button danger icon={<Trash2 />} onClick={handleDelete}>
                        Remover
                    </Button>
                </Space>
            }
        >
            <OperativeRouteHint type={hintHistoria.tipo} message={hintHistoria.msg} description={hintHistoria.desc} />

            <ContentCard>
                <HistoriaUsuarioView historia={h} tarefas={tarefas} />
            </ContentCard>

            <Modal
                title="Editar História de Usuário"
                data-testid="projeto-historia-usuario-editar-modal"
                open={modalVisible}
                onCancel={() => setModalVisible(false)}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button onClick={() => setModalVisible(false)}>Cancelar</Button>
                        <Button
                            type="primary"
                            loading={updateMutation.isPending}
                            onClick={() => historiaForm.submit()}
                        >
                            Salvar
                        </Button>
                    </div>
                }
                width={historiaEditModalLayout.width ?? 800}
                centered={historiaEditModalLayout.centered ?? true}
                className={historiaEditModalLayout.className}
                styles={historiaEditModalLayout.styles ?? {}}
                keyboard
                focusTriggerAfterClose
                destroyOnHidden
            >
                <HistoriaUsuarioForm
                    form={historiaForm}
                    hideActions
                    historia={h}
                    projetoId={h.projeto_id}
                    epicos={epicos}
                    usuarios={usuarios}
                    onSubmit={handleSubmit}
                    onCancel={() => setModalVisible(false)}
                    loading={updateMutation.isPending}
                />
            </Modal>
        </ProjetoLayout>
    );
}