'use client';

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

/**
 * Versões de software do projeto — `/projetos/[id]/software/versoes`. FRONT-S2-02.
 */
import { Plus, RefreshCw, Tags, Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useCallback, useMemo, useState } from 'react';
import { useParams } from 'next/navigation';
import { Button, Space, Modal, Form, Input, Row, Col, Statistic, Alert, Tooltip } from 'antd';
import { message } from '@/lib/feedback/message';
import { notifyApiError } from '@/lib/feedback/notifyApiError';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { PermissionGuard } from '@/components/permissions';
import { withProjetosSoftwareParametrosHub } from '@/lib/routes/projetosParametrosPaths';
import { ListPageCreateFloatButton } from '@/components/listings';
import { EmptyState } from '@/components/empty';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useWaygestFormModalProps } from '@/hooks/useWaygestFormModalProps';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
import { Projeto } from '@/types';
import { LazyDataTable, LazyExportButton } from '@/components/lazy';
import { MobilePageActionBar } from '@/components/filters/MobilePageActionBar';
import { useIsMobile } from '@/hooks/useIsMobile';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import type { ProjetoSoftwareVersoesUpdatePayload, ProjetoVersaoItem, VersoesProjetoListResponse } from './types';
import { buildProjetoSoftwareVersoesColumns } from './projetoSoftwareVersoesDisplay';

export function ProjetoSoftwareVersoesScreen() {
    const params = useParams();
    const projetoId = params?.id as string;
    const isMobile = useIsMobile();
    const [modalAberto, setModalAberto] = useState(false);
    const [versaoEditando, setVersaoEditando] = useState<ProjetoVersaoItem | null>(null);
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();
    const { canEditar, canExcluir, permsLoading, tooltipSemPermissao } = useProjetoWriteGates();

    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 {
        data: versoesResponse,
        isLoading,
        refetch} = useQueryCache<VersoesProjetoListResponse>({
        queryKey: queryKeys.projetos.versoes(projetoId),
        endpoint: API_ENDPOINTS.projetos.versoes.index(projetoId),
        enabled: !!projetoId,
        staleTime: 1 * 60 * 1000});

    const versoes = versoesResponse?.data ?? [];

    const fecharModal = useCallback(() => {
        setModalAberto(false);
        setVersaoEditando(null);
        form.resetFields();
    }, [form]);

    const createMutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.versoes.store(projetoId),
        method: 'POST',
        invalidateQueries: [queryKeys.projetos.versoes(projetoId)],
        onSuccess: () => {
            message.success('Versão criada.');
            fecharModal();
            refetch();
        },
        onError: (error) => {
            notifyApiError(error, 'Erro ao criar versão.', 'generic');
        }});

    const updateMutation = useMutationCache<unknown, ProjetoSoftwareVersoesUpdatePayload>({
        endpoint: (vars) => API_ENDPOINTS.projetos.versoes.update(projetoId, vars.versaoId),
        method: 'PUT',
        buildBody: (vars) => ({
            nome: vars.nome,
            descricao: vars.descricao,
            itens: vars.itens}),
        invalidateQueries: [queryKeys.projetos.versoes(projetoId)],
        onSuccess: () => {
            message.success('Versão atualizada.');
            fecharModal();
            refetch();
        },
        onError: (error) => {
            notifyApiError(error, 'Erro ao atualizar versão.', 'generic');
        }});

    const deleteMutation = useMutationCache<void, number>({
        endpoint: (versaoId) => API_ENDPOINTS.projetos.versoes.destroy(projetoId, versaoId),
        method: 'DELETE',
        invalidateQueries: [queryKeys.projetos.versoes(projetoId)],
        onSuccess: () => {
            message.success('Versão excluída.');
            refetch();
        },
        onError: (error) => notifyApiError(error, 'Erro ao excluir versão.', 'generic')});

    const abrirCriar = useCallback(() => {
        if (!canEditar) {
            return;
        }
        setVersaoEditando(null);
        form.setFieldsValue({ nome: '', descricao: '', itens: [''] });
        setModalAberto(true);
    }, [form, canEditar]);

    const abrirEditar = useCallback(
        (versao: ProjetoVersaoItem) => {
            if (!canEditar) {
                return;
            }
            setVersaoEditando(versao);
            const itens =
                Array.isArray(versao.itens) && versao.itens.length > 0 ? versao.itens : [''];
            form.setFieldsValue({
                nome: versao.nome,
                descricao: versao.descricao,
                itens});
            setModalAberto(true);
        },
        [form, canEditar]
    );

    const handleSubmit = (values: { nome: string; descricao: string; itens?: string[] }) => {
        const itens = (values.itens ?? []).filter((t) => t?.trim() !== '');
        const payload = { nome: values.nome, descricao: values.descricao, itens };
        if (versaoEditando) {
            updateMutation.mutate({
                versaoId: versaoEditando.id,
                ...payload});
        } else {
            createMutation.mutate(payload);
        }
    };

    const handleExcluir = useCallback(
        (versao: ProjetoVersaoItem) => {
            confirmDialog({
                title: 'Excluir versão?',
                content: `A versão "${versao.nome}" será excluída.`,
                okText: 'Excluir',
                okType: 'danger',
                cancelText: 'Cancelar',
                onOk: () => deleteMutation.mutate(versao.id)});
        },
        [deleteMutation]
    );

    const columns = useMemo(
        () =>
            buildProjetoSoftwareVersoesColumns({
                onEditar: abrirEditar,
                onExcluir: handleExcluir,
                canEditar,
                canExcluir,
                permsLoading,
                tooltipSemPermissao,
            }),
        [abrirEditar, handleExcluir, canEditar, canExcluir, permsLoading, tooltipSemPermissao]
    );

    const versoesExportRows = useMemo(
        () =>
            versoes.map((v) => ({
                id: v.id,
                nome: v.nome,
                descricao: v.descricao,
                itens: Array.isArray(v.itens) ? v.itens.filter(Boolean).join('\n') : '',
                data_publicacao: v.data_publicacao ?? '',
                created_at: v.created_at,
                updated_at: v.updated_at})),
        [versoes]
    );

    if (!projetoId) {
        return null;
    }

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Versões"
            pageIcon="tags"
            titleSection="Versões"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: projeto?.nome || 'Projeto' },
                { title: 'Versões' },
            ]}
            headerAction={
                !isMobile ? (
                    <Space wrap size={8} align="center">
                        <Tooltip title="Exportar versões da lista atual (Excel, PDF, CSV ou JSON)">
                            <span style={{ display: 'inline-block' }}>
                                <LazyExportButton
                                    data={versoesExportRows as unknown as Record<string, unknown>[]}
                                    columns={[
                                        { key: 'id', label: 'ID' },
                                        { key: 'nome', label: 'Nome' },
                                        { key: 'descricao', label: 'Descrição' },
                                        { key: 'itens', label: 'Itens (changelog)' },
                                        { key: 'data_publicacao', label: 'Data publicação' },
                                        { key: 'created_at', label: 'Criado em' },
                                        { key: 'updated_at', label: 'Atualizado em' },
                                    ]}
                                    filename="projeto-software-versoes"
                                    title="Exportar versões"
                                    iconOnly
                                    size="large"
                                    exportMenuMode="modal"
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </span>
                        </Tooltip>
                        <Tooltip title="Recarregar versões do projeto">
                            <span style={{ display: 'inline-block' }}>
                                <ButtonHeaderIcon
                                    icon={<RefreshCw size={ICON_SIZE_MD} aria-hidden />}
                                    title="Atualizar"
                                    onClick={() => refetch()}
                                />
                            </span>
                        </Tooltip>
                    </Space>
                ) : undefined
            }
        >
            <OperativeRouteHint
                type="info"
                message="Release e rollback"
                description={withProjetosSoftwareParametrosHub(
                    'Cada versão deve ter changelog compreensível para suporte e cliente. Antes de marcar deploy, alinhe com hospedagem e QA; em falha, use o histórico para orientar rollback.'
                )}
            />
            <Alert
                type="warning"
                showIcon
                style={{ marginBottom: 16 }}
                message="Decisão de release rastreável"
                description="Registre impacto para usuários finais, dependências de deploy e critérios de aceitação antes de promover uma versão. O histórico abaixo serve de linha do tempo para auditoria."
            />
            <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
                <Col xs={24} md={8}>
                    <Statistic title="Versões registradas" value={versoes.length} />
                </Col>
                <Col xs={24} md={8}>
                    <Statistic
                        title="Última versão"
                        value={versoes[0]?.nome ?? '—'}
                    />
                </Col>
                <Col xs={24} md={8}>
                    <Statistic title="Projeto" value={projeto?.nome ?? '—'} />
                </Col>
            </Row>
            <p className="ant-typography" style={{ marginBottom: 16, color: '#666' }}>
                Cadastre versões e releases do projeto com nome, descrição e itens de changelog.
            </p>

            
            {versoes.length === 0 ? (
                <EmptyState
                    title="Nenhuma versão cadastrada"
                    description="Registre versões com nome, descrição e itens para acompanhar o histórico do projeto."
                    icon={<Tags size={ICON_SIZE_MD} aria-hidden />}
                    action={
                        <PermissionGuard
                            permission="projetos.editar"
                            module="projetos"
                            action="update"
                            fallback={
                                <Tooltip
                                    title={tooltipSemPermissao('cadastrar versões do projeto')}
                                >
                                    <span style={{ display: 'inline-block' }}>
                                        <Button
                                            type="primary"
                                            icon={<Plus />}
                                            disabled
                                            data-testid="projeto-software-versoes-cadastrar-disabled"
                                        >
                                            Cadastrar versão
                                        </Button>
                                    </span>
                                </Tooltip>
                            }
                        >
                            <Tooltip
                                title={
                                    !canEditar && !permsLoading
                                        ? tooltipSemPermissao('cadastrar versões do projeto')
                                        : undefined
                                }
                            >
                                <span style={{ display: 'inline-block' }}>
                                    <Button
                                        type="primary"
                                        icon={<Plus />}
                                        onClick={abrirCriar}
                                        disabled={!canEditar || permsLoading}
                                        data-testid="projeto-software-versoes-cadastrar"
                                    >
                                        Cadastrar versão
                                    </Button>
                                </span>
                            </Tooltip>
                        </PermissionGuard>
                    }
                />
            ) : (
                <LazyDataTable<ProjetoVersaoItem>
                    columns={columns}
                    data={versoes}
                    loading={isLoading}
                    onRefresh={refetch}
                    {...listingTableVirtualScrollProps(versoes.length)}
                    onRow={(record: unknown) => ({
                        onClick: () => {
                            if (canEditar) {
                                abrirEditar(record as ProjetoVersaoItem);
                            }
                        },
                        style: { cursor: canEditar ? 'pointer' : 'default' }})}
                    autoMobileFromColumns={{
                        testIdPrefix: 'projeto-software-versoes',
                        listHeading: 'Lista de versões',
                        getFallbackTitle: (record: any) =>
                            record.nome?.trim() || `Versão ${record.id}`,
                        getSubtitle: (record: any) => {
                            const itensCount = Array.isArray(record.itens)
                                ? record.itens.filter(Boolean).length
                                : 0;
                            const parts = [
                                record.descricao?.trim()
                                    ? record.descricao.trim().slice(0, 72) +
                                      (record.descricao.trim().length > 72 ? '…' : '')
                                    : null,
                                itensCount > 0 ? `${itensCount} item(ns)` : null,
                                record.data_publicacao
                                    ? `Pub.: ${record.data_publicacao}`
                                    : null,
                            ].filter(Boolean);
                            return parts.length ? parts.join(' · ') : undefined;
                        },
                        excludeFieldKeys: ['nome', 'descricao'],
                        onCardClick: (record: any) => {
                            if (canEditar) {
                                abrirEditar(record);
                            }
                        },
                    }}
                />
            )}
            

            <Modal
                title={versaoEditando ? 'Editar versão' : 'Nova versão'}
                open={modalAberto}
                onCancel={fecharModal}
                onOk={() => form.submit()}
                okText={versaoEditando ? 'Salvar' : 'Criar'}
                okButtonProps={{
                    disabled: !canEditar || permsLoading,
                    title:
                        !canEditar && !permsLoading
                            ? tooltipSemPermissao(
                                  versaoEditando
                                      ? 'editar versões do projeto'
                                      : 'cadastrar versões do projeto',
                              )
                            : undefined,
                }}
                confirmLoading={createMutation.isPending || updateMutation.isPending}
                width={formModalLayout.width ?? 560}
                centered={formModalLayout.centered ?? true}
                className={formModalLayout.className}

                styles={formModalLayout.styles ?? {}}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="projeto-software-versoes-form-modal"
            >
                <Form
                    form={form}
                    layout="vertical"
                    onFinish={handleSubmit}
                    initialValues={{ nome: '', descricao: '', itens: [''] }}
                >
                    <Form.Item
                        name="nome"
                        label="Nome"
                        rules={[{ required: true, message: 'Obrigatório' }]}
                    >
                        <Input placeholder="Ex: v1.0.0" />
                    </Form.Item>
                    <Form.Item
                        name="descricao"
                        label="Descrição"
                        rules={[{ required: true, message: 'Obrigatório' }]}
                    >
                        <Input.TextArea rows={3} placeholder="Descrição da versão" />
                    </Form.Item>
                    <Form.List name="itens">
                        {(fields, { add, remove }) => (
                            <>
                                <div
                                    style={{
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                        marginBottom: 8}}
                                >
                                    <span style={{ fontWeight: 500 }}>Itens</span>
                                    <Button
                                        type="dashed"
                                        onClick={() => add('')}
                                        icon={<Plus />}
                                        size="small"
                                    >
                                        Adicionar item
                                    </Button>
                                </div>
                                {fields.map(({ key, name, ...rest }) => (
                                    <div
                                        key={key}
                                        style={{
                                            display: 'flex',
                                            gap: 8,
                                            marginBottom: 8,
                                            alignItems: 'flex-start'}}
                                    >
                                        <Form.Item
                                            {...rest}
                                            name={[name]}
                                            style={{ flex: 1, marginBottom: 0 }}
                                        >
                                            <Input.TextArea rows={2} placeholder="Texto do item" />
                                        </Form.Item>
                                        <Button
                                            type="text"
                                            danger
                                            icon={<Trash2 />}
                                            onClick={() => remove(name)}
                                            aria-label="Remover item"
                                        />
                                    </div>
                                ))}
                            </>
                        )}
                    </Form.List>
                </Form>
            </Modal>

            <PermissionGuard
                permission="projetos.editar"
                module="projetos"
                action="update"
                fallback={
                    <Tooltip title={tooltipSemPermissao('cadastrar versões do projeto')}>
                        <span style={{ display: 'inline-block' }}>
                            <ListPageCreateFloatButton
                                data-testid="projeto-software-versoes-fab-nova-disabled"
                                tooltip={{ title: tooltipSemPermissao('cadastrar versões do projeto') }}
                                disabled
                            />
                        </span>
                    </Tooltip>
                }
            >
                <ListPageCreateFloatButton
                    data-testid="projeto-software-versoes-fab-nova"
                    tooltip={{
                        title:
                            !canEditar && !permsLoading
                                ? tooltipSemPermissao('cadastrar versões do projeto')
                                : 'Nova versão',
                    }}
                    onClick={abrirCriar}
                    disabled={!canEditar || permsLoading}
                />
            </PermissionGuard>

            {isMobile ? (
                <MobilePageActionBar
                    onRefresh={() => void refetch()}
                    refreshLoading={isLoading}
                    opcoesContent={
                        <LazyExportButton
                            data={versoesExportRows as unknown as Record<string, unknown>[]}
                            columns={[
                                { key: 'id', label: 'ID' },
                                { key: 'nome', label: 'Nome' },
                                { key: 'descricao', label: 'Descrição' },
                                { key: 'itens', label: 'Itens (changelog)' },
                                { key: 'data_publicacao', label: 'Data publicação' },
                                { key: 'created_at', label: 'Criado em' },
                                { key: 'updated_at', label: 'Atualizado em' },
                            ]}
                            filename="projeto-software-versoes"
                            title="Exportar versões"
                            exportMenuMode="modal"
                        />
                    }
                />
            ) : null}
        </ProjetoLayout>
    );
}