'use client';

import { Col, Row } from 'antd';

import { FormInput, FormNumber, FormSelect, FormTextarea } from '@/components/form';

import { IMPLANTACAO_CHECKLIST_STATUS_OPTIONS } from './types';

export type ModalChecklistItemFormFieldsProps = {
    /** Opções de usuários para `owner_user_id`. */
    ownerOptions: ReadonlyArray<{ label: string; value: number }>;
    ownersLoading?: boolean;
};

/**
 * Campos do modal criar/editar item de checklist cutover (ACL / migração).
 */
export function ModalChecklistItemFormFields({
    ownerOptions,
    ownersLoading = false,
}: ModalChecklistItemFormFieldsProps) {
    const statusOptions = IMPLANTACAO_CHECKLIST_STATUS_OPTIONS.map((o) => ({
        label: o.label,
        value: o.value,
    }));

    return (
        <Row gutter={[16, 0]}>
            <Col xs={24}>
                <FormInput
                    name="titulo"
                    label="Título"
                    required
                    placeholder="Ex.: Mapear papel Admin → permissões técnicas"
                    maxLength={255}
                />
            </Col>
            <Col xs={24}>
                <FormTextarea
                    name="notas"
                    label="Notas"
                    rows={3}
                    placeholder="Critérios, evidência ou decisão…"
                    maxLength={5000}
                    showCount
                />
            </Col>
            <Col xs={24} sm={12}>
                <FormSelect
                    name="status"
                    label="Estado"
                    required
                    options={statusOptions}
                    placeholder="Selecione"
                />
            </Col>
            <Col xs={24} sm={12}>
                <FormSelect
                    name="owner_user_id"
                    label="Dono (responsável)"
                    options={[...ownerOptions]}
                    placeholder="Selecione o usuário"
                    allowClear
                    showSearch
                    optionFilterProp="label"
                    loading={ownersLoading}
                />
            </Col>
            <Col xs={24} sm={12}>
                <FormNumber
                    name="ordem"
                    label="Ordem"
                    placeholder="Opcional"
                    min={0}
                    max={99999}
                    style={{ width: '100%' }}
                />
            </Col>
        </Row>
    );
}