'use client';

import { Button, Col, Form, Input, Row, Select } from 'antd';
import { FormGroup } from '@/components/form';
import type { CasoUsoPasso } from './types';
import styles from './CasoUsoFormFields.module.scss';

export const CASO_USO_NIVEL_OPTIONS = [
    { value: 'primario', label: 'Primário' },
    { value: 'secundario', label: 'Secundário' },
    { value: 'extensao', label: 'Extensão' },
];

export const CASO_USO_PRIORIDADE_OPTIONS = [
    { value: 'baixa', label: 'Baixa' },
    { value: 'media', label: 'Média' },
    { value: 'alta', label: 'Alta' },
    { value: 'critica', label: 'Crítica' },
];

export const CASO_USO_PASSO_TIPO_OPTIONS = [
    { value: 'principal', label: 'Principal' },
    { value: 'alternativo', label: 'Alternativo' },
    { value: 'excecao', label: 'Exceção' },
];

type CasoUsoSpecFieldsProps = {
    compact?: boolean;
    disabled?: boolean;
};

/** Campos Cockburn compartilhados pelo modal de cadastro e pela página de gestão. */
export function CasoUsoSpecFields({ compact = false, disabled }: CasoUsoSpecFieldsProps) {
    return (
        <>
            <FormGroup>
                <Form.Item
                    name="titulo"
                    label="Título"
                    rules={[{ required: true, message: 'Informe o título' }]}
                >
                    <Input placeholder="Título do caso de uso" disabled={disabled} />
                </Form.Item>
            </FormGroup>
            <FormGroup>
                <Form.Item
                    name="objetivo"
                    label="Objetivo"
                    rules={[{ required: true, message: 'Informe o objetivo' }]}
                >
                    <Input.TextArea rows={3} placeholder="O que o ator quer alcançar" disabled={disabled} />
                </Form.Item>
            </FormGroup>
            <FormGroup>
                <Form.Item name="ator_principal_livre" label="Ator principal">
                    <Input placeholder="Ex.: Cliente, operador financeiro" disabled={disabled} />
                </Form.Item>
            </FormGroup>
            <Row gutter={16}>
                <Col xs={24} sm={12}>
                    <Form.Item name="nivel" label="Nível">
                        <Select options={CASO_USO_NIVEL_OPTIONS} disabled={disabled} />
                    </Form.Item>
                </Col>
                <Col xs={24} sm={12}>
                    <Form.Item name="prioridade" label="Prioridade">
                        <Select options={CASO_USO_PRIORIDADE_OPTIONS} disabled={disabled} />
                    </Form.Item>
                </Col>
            </Row>
            <FormGroup>
                <Form.Item name="gatilho" label="Gatilho">
                    <Input.TextArea rows={2} disabled={disabled} />
                </Form.Item>
            </FormGroup>
            <FormGroup>
                <Form.Item name="pre_condicoes" label="Pré-condições">
                    <Input.TextArea rows={2} disabled={disabled} />
                </Form.Item>
            </FormGroup>
            <FormGroup>
                <Form.Item name="pos_condicoes_sucesso" label="Pós-condições (sucesso)">
                    <Input.TextArea rows={2} disabled={disabled} />
                </Form.Item>
            </FormGroup>
            {!compact ? (
                <>
                    <FormGroup>
                        <Form.Item name="pos_condicoes_falha" label="Pós-condições (falha)">
                            <Input.TextArea rows={2} disabled={disabled} />
                        </Form.Item>
                    </FormGroup>
                    <FormGroup>
                        <Form.Item name="escopo" label="Escopo">
                            <Input.TextArea rows={2} disabled={disabled} />
                        </Form.Item>
                    </FormGroup>
                    <FormGroup>
                        <Form.Item name="frequencia" label="Frequência">
                        <Select
                            allowClear
                            placeholder="Selecione"
                            disabled={disabled}
                            options={[
                                { value: 'rara', label: 'Rara' },
                                { value: 'ocasional', label: 'Ocasional' },
                                { value: 'frequente', label: 'Frequente' },
                                { value: 'continua', label: 'Contínua' },
                            ]}
                        />
                    </Form.Item>
                    </FormGroup>
                    <FormGroup>
                        <Form.Item name="observacoes" label="Observações">
                            <Input.TextArea rows={2} disabled={disabled} />
                        </Form.Item>
                    </FormGroup>
                </>
            ) : null}
        </>
    );
}

type CasoUsoPassosFieldsProps = {
    disabled?: boolean;
};

export function CasoUsoPassosFields({ disabled }: CasoUsoPassosFieldsProps) {
    return (
        <Form.List name="passos">
            {(fields, { add, remove }) => (
                <>
                    {fields.length === 0 ? (
                        <p style={{ margin: '0 0 12px', color: 'rgba(0,0,0,0.45)' }}>
                            Ainda não há passos. Inclua o fluxo principal (ator, ação e resposta do sistema).
                        </p>
                    ) : null}
                    {fields.map((field, index) => (
                        <div key={field.key} className={styles.passoCard}>
                            <div className={styles.passoIndex} aria-hidden>
                                {index + 1}
                            </div>
                            <div className={styles.passoFields}>
                                <Form.Item {...field} name={[field.name, 'tipo']} initialValue="principal" label="Tipo">
                                    <Select options={CASO_USO_PASSO_TIPO_OPTIONS} disabled={disabled} />
                                </Form.Item>
                                <Form.Item {...field} name={[field.name, 'ator']} label="Ator">
                                    <Input placeholder="Quem executa" disabled={disabled} />
                                </Form.Item>
                                <Form.Item
                                    {...field}
                                    className={styles.passoWide}
                                    name={[field.name, 'acao']}
                                    label="Ação"
                                    rules={[{ required: true, message: 'Informe a ação' }]}
                                >
                                    <Input.TextArea
                                        placeholder="O que o ator faz neste passo"
                                        rows={2}
                                        disabled={disabled}
                                    />
                                </Form.Item>
                                <Form.Item
                                    {...field}
                                    className={styles.passoWide}
                                    name={[field.name, 'sistema_responde']}
                                    label="Resposta do sistema"
                                >
                                    <Input.TextArea
                                        placeholder="Como o sistema reage"
                                        rows={2}
                                        disabled={disabled}
                                    />
                                </Form.Item>
                            </div>
                            {!disabled ? (
                                <div className={styles.passoAcoes}>
                                    <Button danger type="text" onClick={() => remove(field.name)}>
                                        Remover
                                    </Button>
                                </div>
                            ) : null}
                        </div>
                    ))}
                    {!disabled ? (
                        <Button type="dashed" block onClick={() => add({ tipo: 'principal', acao: '' } satisfies CasoUsoPasso)}>
                            Adicionar passo
                        </Button>
                    ) : null}
                </>
            )}
        </Form.List>
    );
}