'use client';

/**
 * Modal criar/editar módulo — abas Dados | Documentação | Técnico.
 */
import React, { useEffect, useMemo } from 'react';
import { Form, Input, InputNumber, Modal, Select, Tabs } from 'antd';
import { FormTextarea } from '@/components/form';
import { message } from '@/lib/feedback/message';
import { useWaygestFormModalProps } from '@/hooks/useWaygestFormModalProps';
import { STATUS_OPCOES } from './constants';
import { collectSelfAndDescendantIds } from './moduloTreeHelpers';
import type { ProjetoModulo, ProjetoModuloFormValues } from './types';

export interface ModuloFormModalProps {
    open: boolean;
    onClose: () => void;
    onSubmit: (values: ProjetoModuloFormValues) => void;
    loading?: boolean;
    modulo?: ProjetoModulo | null;
    /** Lista flat do projeto — Select de pai e dependências. */
    modulos: ProjetoModulo[];
}

export function ModuloFormModal({
    open,
    onClose,
    onSubmit,
    loading = false,
    modulo = null,
    modulos,
}: ModuloFormModalProps) {
    const [form] = Form.useForm<ProjetoModuloFormValues>();
    const modalLayout = useWaygestFormModalProps();

    const excludedPaiIds = useMemo(() => {
        if (!modulo) return new Set<number>();
        return collectSelfAndDescendantIds(modulos, modulo.id);
    }, [modulo, modulos]);

    const paiOptions = useMemo(
        () =>
            modulos
                .filter((m) => !excludedPaiIds.has(m.id))
                .map((m) => ({ value: m.id, label: m.nome })),
        [modulos, excludedPaiIds],
    );

    const dependenciaOptions = useMemo(
        () =>
            modulos
                .filter((m) => !modulo || m.id !== modulo.id)
                .map((m) => ({ value: m.id, label: m.nome })),
        [modulos, modulo],
    );

    useEffect(() => {
        if (!open) return;
        if (modulo) {
            form.setFieldsValue({
                nome: modulo.nome,
                descricao: modulo.descricao ?? '',
                funcionalidades_principais: modulo.funcionalidades_principais ?? '',
                status: modulo.status,
                story_points: modulo.story_points ?? undefined,
                observacoes: modulo.observacoes ?? '',
                codigo: modulo.codigo ?? '',
                ordem: modulo.ordem ?? undefined,
                modulo_pai_id: modulo.modulo_pai_id ?? undefined,
                tecnologias: modulo.tecnologias ?? [],
                dependencias: modulo.dependencias ?? [],
                documentacao_objetivo: modulo.documentacao_objetivo ?? '',
                documentacao_publico_alvo: modulo.documentacao_publico_alvo ?? '',
                documentacao_regras_negocio: modulo.documentacao_regras_negocio ?? '',
                documentacao_dependencias_texto: modulo.documentacao_dependencias_texto ?? '',
                documentacao_pendencias: modulo.documentacao_pendencias ?? '',
                documentacao_endpoints: modulo.documentacao_endpoints ?? '',
                documentacao_componentes: modulo.documentacao_componentes ?? '',
                documentacao_paginas: modulo.documentacao_paginas ?? '',
            });
        } else {
            form.resetFields();
            form.setFieldsValue({
                status: 'planejado',
                tecnologias: [],
                dependencias: [],
            });
        }
    }, [open, modulo, form]);

    const handleOk = async () => {
        try {
            const values = await form.validateFields();
            const payload: ProjetoModuloFormValues = {
                ...values,
                modulo_pai_id: values.modulo_pai_id ?? null,
            };
            onSubmit(payload);
        } catch (err) {
            // Campos em outras abas: orientar o operador
            const errorFields = (err as { errorFields?: { name: (string | number)[] }[] })?.errorFields;
            if (errorFields?.length) {
                const first = errorFields[0]?.name?.[0];
                const docFields = [
                    'documentacao_objetivo',
                    'documentacao_publico_alvo',
                    'documentacao_regras_negocio',
                    'documentacao_dependencias_texto',
                    'documentacao_pendencias',
                    'documentacao_endpoints',
                    'documentacao_componentes',
                    'documentacao_paginas',
                ];
                const techFields = ['tecnologias', 'dependencias'];
                if (typeof first === 'string' && docFields.includes(first)) {
                    message.warning('Há campos inválidos na aba Documentação.');
                } else if (typeof first === 'string' && techFields.includes(first)) {
                    message.warning('Há campos inválidos na aba Técnico.');
                } else {
                    message.warning('Revise os campos obrigatórios antes de salvar.');
                }
            }
        }
    };

    return (
        <Modal
            {...modalLayout}
            title={modulo ? 'Editar módulo' : 'Novo módulo'}
            open={open}
            onCancel={onClose}
            onOk={() => void handleOk()}
            confirmLoading={loading}
            destroyOnHidden
            okText="Salvar"
            cancelText="Cancelar"
            data-testid="estrutura-modulos-form-modal"
        >
            <Form form={form} layout="vertical" style={{ marginTop: 8 }}>
                <Tabs
                    items={[
                        {
                            key: 'dados',
                            label: 'Dados',
                            forceRender: true,
                            children: (
                                <>
                                    <Form.Item
                                        name="nome"
                                        label="Nome"
                                        rules={[{ required: true, message: 'Informe o nome do módulo' }]}
                                    >
                                        <Input
                                            placeholder="Ex.: Módulo Financeiro"
                                            maxLength={255}
                                            showCount
                                        />
                                    </Form.Item>
                                    <Form.Item name="codigo" label="Código">
                                        <Input placeholder="Opcional" maxLength={100} />
                                    </Form.Item>
                                    <Form.Item name="descricao" label="Descrição">
                                        <Input.TextArea rows={2} placeholder="Descrição do módulo" />
                                    </Form.Item>
                                    <FormTextarea
                                        name="funcionalidades_principais"
                                        label="Funcionalidades principais"
                                        rows={3}
                                        placeholder="Principais funcionalidades deste módulo"
                                    />
                                    <Form.Item
                                        name="status"
                                        label="Status"
                                        rules={[{ required: true, message: 'Selecione o status' }]}
                                    >
                                        <Select options={STATUS_OPCOES} placeholder="Status" />
                                    </Form.Item>
                                    <Form.Item name="modulo_pai_id" label="Módulo pai">
                                        <Select
                                            allowClear
                                            showSearch
                                            optionFilterProp="label"
                                            placeholder="Nenhum (raiz)"
                                            options={paiOptions}
                                        />
                                    </Form.Item>
                                    <Form.Item name="ordem" label="Ordem">
                                        <InputNumber min={0} style={{ width: '100%' }} placeholder="0" />
                                    </Form.Item>
                                    <Form.Item name="story_points" label="Story points">
                                        <InputNumber min={0} style={{ width: '100%' }} placeholder="0" />
                                    </Form.Item>
                                    <Form.Item name="observacoes" label="Observações">
                                        <Input.TextArea rows={2} placeholder="Observações adicionais" />
                                    </Form.Item>
                                </>
                            ),
                        },
                        {
                            key: 'documentacao',
                            label: 'Documentação',
                            forceRender: true,
                            children: (
                                <>
                                    <FormTextarea
                                        name="documentacao_objetivo"
                                        label="Objetivo"
                                        rows={3}
                                        placeholder="Objetivo do módulo"
                                    />
                                    <FormTextarea
                                        name="documentacao_publico_alvo"
                                        label="Público-alvo"
                                        rows={2}
                                        placeholder="Quem usa ou é impactado"
                                    />
                                    <FormTextarea
                                        name="documentacao_regras_negocio"
                                        label="Regras de negócio"
                                        rows={3}
                                        placeholder="Regras relevantes"
                                    />
                                    <FormTextarea
                                        name="documentacao_dependencias_texto"
                                        label="Dependências (texto)"
                                        rows={2}
                                        placeholder="Dependências em texto livre"
                                    />
                                    <FormTextarea
                                        name="documentacao_pendencias"
                                        label="Pendências"
                                        rows={2}
                                        placeholder="Itens em aberto"
                                    />
                                    <FormTextarea
                                        name="documentacao_endpoints"
                                        label="Endpoints"
                                        rows={2}
                                        placeholder="Endpoints relacionados"
                                    />
                                    <FormTextarea
                                        name="documentacao_componentes"
                                        label="Componentes"
                                        rows={2}
                                        placeholder="Componentes relacionados"
                                    />
                                    <FormTextarea
                                        name="documentacao_paginas"
                                        label="Páginas (documentação)"
                                        rows={2}
                                        placeholder="Páginas relacionadas em texto"
                                    />
                                </>
                            ),
                        },
                        {
                            key: 'tecnico',
                            label: 'Técnico',
                            forceRender: true,
                            children: (
                                <>
                                    <Form.Item
                                        name="tecnologias"
                                        label="Tecnologias"
                                        tooltip="Digite e pressione Enter para adicionar"
                                    >
                                        <Select
                                            mode="tags"
                                            tokenSeparators={[',']}
                                            placeholder="Ex.: Laravel, Next.js"
                                            style={{ width: '100%' }}
                                        />
                                    </Form.Item>
                                    <Form.Item name="dependencias" label="Dependências (módulos)">
                                        <Select
                                            mode="multiple"
                                            allowClear
                                            showSearch
                                            optionFilterProp="label"
                                            placeholder="Módulos dos quais este depende"
                                            options={dependenciaOptions}
                                        />
                                    </Form.Item>
                                </>
                            ),
                        },
                    ]}
                />
            </Form>
        </Modal>
    );
}