'use client';

import React, { useEffect } from 'react';
import { Form, Input, Modal } from 'antd';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';

export type ModalImportarEscopoUrlProps = {
    open: boolean;
    confirmLoading?: boolean;
    onClose: () => void;
    onConfirm: (url: string) => void;
};

export function ModalImportarEscopoUrl({
    open,
    confirmLoading = false,
    onClose,
    onConfirm,
}: ModalImportarEscopoUrlProps) {
    const modalLayout = useResponsiveModalProps();
    const [form] = Form.useForm<{ url: string }>();

    useEffect(() => {
        if (!open) {
            form.resetFields();
        }
    }, [open, form]);

    return (
        <Modal
            title="Importar escopo por URL"
            open={open}
            onCancel={onClose}
            onOk={() => {
                void form.validateFields().then((values) => {
                    onConfirm(values.url.trim());
                });
            }}
            okText="Ler e carregar"
            okButtonProps={{ loading: confirmLoading }}
            cancelText="Cancelar"
            width={modalLayout.width ?? 560}
            centered={modalLayout.centered}
            styles={modalLayout.styles}
            destroyOnHidden
            data-testid="projeto-escopo-modal-importar-url"
        >
            <p style={{ marginBottom: 16 }}>
                Informe a URL de um site ou repositório (GitHub/GitLab). O Waygest lê o conteúdo
                público (HTML ou README) e monta um rascunho de escopo no formulário — sem salvar
                automaticamente.
            </p>
            <Form form={form} layout="vertical" requiredMark={false}>
                <Form.Item
                    name="url"
                    label="URL"
                    rules={[
                        { required: true, message: 'Informe a URL' },
                        { type: 'url', message: 'Informe uma URL válida (http ou https)' },
                    ]}
                >
                    <Input
                        placeholder="https://exemplo.com.br ou https://github.com/org/repo"
                        allowClear
                        data-testid="projeto-escopo-importar-url-input"
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
}