/**
 * @fileoverview Componente HistoriaUsuarioForm - Formulário de História de Usuário
 *
 * @description
 * Componente de formulário para criar e editar histórias de usuário,
 * incluindo campos para formato "Como/Quero/Para" e critérios de aceitação.
 *
 * @module tarefas
 * @author Sistema de Gestão
 * @since 1.0.0
 */

'use client';

import React, { useEffect } from 'react';
import {
    Form,
    Input,
    Select,
    InputNumber,
    Button,
    Space,
    Card,
    Divider,
} from 'antd';
import type { FormInstance } from 'antd/es/form';
import { HistoriaUsuario, Epico } from '@/types/projeto';
import { Usuario } from '@/types/usuario';

const { TextArea } = Input;
const { Option } = Select;

interface HistoriaUsuarioFormProps {
    historia?: HistoriaUsuario;
    projetoId: number | string;
    epicos?: Epico[];
    usuarios?: Usuario[];
    onSubmit: (values: Record<string, unknown>) => void;
    onCancel?: () => void;
    loading?: boolean;
    /** Oculta botões quando o modal fornece footer padrão */
    hideActions?: boolean;
    form?: FormInstance;
}

export function HistoriaUsuarioForm({
    historia,
    projetoId: _projetoId,
    epicos = [],
    usuarios = [],
    onSubmit,
    onCancel,
    loading = false,
    hideActions = false,
    form: externalForm,
}: HistoriaUsuarioFormProps) {
    const [internalForm] = Form.useForm();
    const form = externalForm ?? internalForm;

    useEffect(() => {
        if (historia) {
            form.setFieldsValue({
                titulo: historia.titulo,
                descricao: historia.descricao,
                como: historia.como,
                quero: historia.quero,
                para: historia.para,
                criterios_aceitacao: historia.criterios_aceitacao?.join('\n'),
                story_points: historia.story_points,
                prioridade: historia.prioridade,
                status: historia.status,
                epico_id: historia.epico_id,
                responsavel_id: historia.responsavel_id,
            });
        }
    }, [historia, form]);

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            const formData = {
                ...values,
                criterios_aceitacao: values.criterios_aceitacao
                    ? values.criterios_aceitacao.split('\n').filter((c: string) => c.trim())
                    : [],
            };
            onSubmit(formData);
        } catch (error) {
            console.error('Erro ao validar formulário:', error);
        }
    };

    return (
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
            <Form.Item
                name="titulo"
                label="Título"
                rules={[{ required: true, message: 'Título é obrigatório' }]}
            >
                <Input placeholder="Ex: Como usuário, quero fazer login..." />
            </Form.Item>

            <Form.Item name="descricao" label="Descrição">
                <TextArea rows={3} placeholder="Descrição detalhada da história..." />
            </Form.Item>

            <Card size="small" title="Formato História de Usuário" style={{ marginBottom: 16 }}>
                <Form.Item name="como" label="Como [persona]">
                    <Input placeholder="Ex: Como desenvolvedor..." />
                </Form.Item>

                <Form.Item name="quero" label="Quero [objetivo]">
                    <Input placeholder="Ex: Quero visualizar o dashboard..." />
                </Form.Item>

                <Form.Item name="para" label="Para [benefício]">
                    <Input placeholder="Ex: Para acompanhar o progresso do projeto..." />
                </Form.Item>
            </Card>

            <Form.Item name="criterios_aceitacao" label="Critérios de Aceitação">
                <TextArea
                    rows={4}
                    placeholder="Um critério por linha&#10;Ex:&#10;O sistema deve validar o email&#10;O sistema deve enviar email de confirmação"
                />
            </Form.Item>

            <Form.Item name="epico_id" label="Épico">
                <Select placeholder="Selecione um épico" allowClear>
                    {epicos.map((epico) => (
                        <Option key={epico.id} value={epico.id}>
                            {epico.codigo} - {epico.nome}
                        </Option>
                    ))}
                </Select>
            </Form.Item>

            <Form.Item name="story_points" label="Story Points">
                <InputNumber min={0} placeholder="Ex: 5" style={{ width: '100%' }} />
            </Form.Item>

            <Form.Item name="prioridade" label="Prioridade">
                <Select placeholder="Selecione a prioridade">
                    <Option value="baixa">Baixa</Option>
                    <Option value="media">Média</Option>
                    <Option value="alta">Alta</Option>
                    <Option value="urgente">Urgente</Option>
                </Select>
            </Form.Item>

            <Form.Item name="status" label="Status">
                <Select placeholder="Selecione o status">
                    <Option value="planejamento">Planejamento</Option>
                    <Option value="em_andamento">Em Andamento</Option>
                    <Option value="concluida">Concluída</Option>
                    <Option value="pausada">Pausada</Option>
                    <Option value="cancelada">Cancelada</Option>
                </Select>
            </Form.Item>

            <Form.Item name="responsavel_id" label="Responsável">
                <Select placeholder="Selecione o responsável" allowClear showSearch>
                    {usuarios.map((usuario) => (
                        <Option key={usuario.id} value={usuario.id}>
                            {usuario.nome}
                        </Option>
                    ))}
                </Select>
            </Form.Item>

            <Divider />

            {!hideActions ? (
                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType="submit" loading={loading}>
                            {historia ? 'Atualizar' : 'Criar'}
                        </Button>
                        {onCancel ? (
                            <Button onClick={onCancel} disabled={loading}>
                                Cancelar
                            </Button>
                        ) : null}
                    </Space>
                </Form.Item>
            ) : null}
        </Form>
    );
}