'use client';

import React, { useEffect } from 'react';
import { Button, Form, Modal } from 'antd';
import {
    mergeWaygestFormModalBodyStyles,
    useWaygestFormModalProps,
    waygestFormModalFooterClassName,
} from '@/hooks/useWaygestFormModalProps';
import { useMutationCache } from '@/hooks/useMutationCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { getLaravelApiErrorMessage } from '@/lib/api/laravelApiErrorMessage';
import { message } from '@/lib/feedback/message';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { CasoUsoPassosFields, CasoUsoSpecFields } from './CasoUsoFormFields';
import type { CasoUso } from './types';

export type ModalCasoUsoFormProps = {
    open: boolean;
    projetoId: string;
    onClose: () => void;
    onSaved?: (caso: CasoUso) => void;
};

type Envelope<T> = { data: T };

/** Cadastro rápido no modal padrão. A gestão completa ocorre na página do caso de uso. */
export function ModalCasoUsoForm({ open, projetoId, onClose, onSaved }: ModalCasoUsoFormProps) {
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();
    const { canCriar } = useProjetoWriteGates();

    const { mutateAsync: salvar, isPending } = useMutationCache<Envelope<CasoUso>, Record<string, unknown>>({
        endpoint: API_ENDPOINTS.projetos.casosUso.store(projetoId),
        method: 'POST',
        invalidateQueries: [
            queryKeys.projetos.casosUso(projetoId),
            queryKeys.projetos.casosUsoResumo(projetoId),
        ],
    });

    useEffect(() => {
        if (!open) {
            return;
        }
        form.resetFields();
        form.setFieldsValue({
            nivel: 'primario',
            prioridade: 'media',
            passos: [],
        });
    }, [open, form]);

    const fechar = () => {
        form.resetFields();
        onClose();
    };

    const onFinish = async (values: Record<string, unknown>) => {
        try {
            const res = await salvar(values);
            const saved = res?.data ?? (res as unknown as CasoUso);
            message.success('Caso de uso criado.');
            onSaved?.(saved);
            fechar();
        } catch (e) {
            message.error(getLaravelApiErrorMessage(e));
        }
    };

    return (
        <Modal
            title="Novo caso de uso"
            open={open}
            onCancel={fechar}
            footer={
                <div className={waygestFormModalFooterClassName}>
                    <Button onClick={fechar}>Cancelar</Button>
                    <Button
                        type="primary"
                        loading={isPending}
                        disabled={!canCriar}
                        onClick={() => form.submit()}
                    >
                        Criar
                    </Button>
                </div>
            }
            width={formModalLayout.width ?? 720}
            centered={formModalLayout.centered ?? true}
            className={formModalLayout.className}
            zIndex={formModalLayout.zIndex}
            styles={mergeWaygestFormModalBodyStyles(formModalLayout)}
            destroyOnHidden
            keyboard
            focusTriggerAfterClose
            data-testid="projeto-casos-uso-form-modal"
        >
            <Form form={form} layout="vertical" onFinish={onFinish}>
                <CasoUsoSpecFields compact />
                <CasoUsoPassosFields />
            </Form>
        </Modal>
    );
}