/**
 * @fileoverview FormularioDinamico - Componente de formulário dinâmico baseado em tela
 * 
 * @description
 * Componente que renderiza um formulário dinamicamente baseado em uma tela (screen)
 * configurada. Suporta diferentes tipos de campos e validações baseadas em configuração
 * de campos.
 */

'use client';

import React, { useEffect, useMemo } from 'react';
import { FormInstance } from 'antd';
import {
    FormInput,
    FormTextarea,
    FormDatePicker,
    FormNumber,
} from '@/components/form';
import { Tela, CampoConfiguracao, TelaCampo } from '@/types/projeto';
import type { ValoresCamposCustomizados } from '@/types/campo-customizado';

interface FormularioDinamicoProps {
    form: FormInstance;
    tela?: Tela | null;
    configuracoes?: Record<string, CampoConfiguracao>;
    valoresIniciais?: ValoresCamposCustomizados;
    projetoId?: number;
    tipoTarefaId?: number;
    modo?: 'criar' | 'editar' | 'visualizar';
    onValuesChange?: (changedValues: ValoresCamposCustomizados, allValues: ValoresCamposCustomizados) => void;
}

/**
 * Mapeamento de campos padrão para componentes de formulário
 */
const MAPEAMENTO_CAMPOS: Record<string, { component: string; props?: Record<string, unknown> }> = {
    titulo: { component: 'input' },
    descricao: { component: 'textarea' },
    projeto_id: { component: 'select' },
    sprint_id: { component: 'select' },
    tipo_tarefa_id: { component: 'select' },
    epico_id: { component: 'select' },
    responsavel_id: { component: 'select' },
    prioridade: { component: 'select' },
    status: { component: 'select' },
    estimativa: { component: 'number' },
    data_vencimento: { component: 'date' },
    data_inicio: { component: 'date' },
};

/**
 * Componente FormularioDinamico
 */
export default function FormularioDinamico({
    form,
    tela,
    configuracoes = {},
    valoresIniciais,
    modo = 'criar',
    onValuesChange: _onValuesChange,
}: FormularioDinamicoProps) {
    // Ordenar campos pela ordem definida na tela
    const camposOrdenados = useMemo(() => {
        if (!tela?.campos) return [];

        return [...tela.campos]
            .filter((campo) => {
                // Filtrar campos visíveis
                const config = configuracoes[campo.campo_chave];
                if (config && !config.visivel) return false;
                return campo.visivel;
            })
            .sort((a, b) => a.ordem - b.ordem);
    }, [tela?.campos, configuracoes]);

    // Aplicar valores iniciais quando mudarem
    useEffect(() => {
        if (valoresIniciais) {
            form.setFieldsValue(valoresIniciais);
        }
    }, [valoresIniciais, form]);

    // Se não houver tela, não renderizar nada (ou renderizar formulário padrão)
    if (!tela || camposOrdenados.length === 0) {
        return null;
    }

    const renderCampo = (campo: TelaCampo) => {
        const config: Partial<CampoConfiguracao> = configuracoes[campo.campo_chave] ?? {};
        const mapeamento = MAPEAMENTO_CAMPOS[campo.campo_chave] || { component: 'input' };
        const isReadonly = modo === 'visualizar' || config.editavel === false;

        // Se não for visível, não renderizar
        if (!config.visivel && config.visivel !== undefined) {
            return null;
        }

        const props = {
            name: campo.campo_chave,
            label: campo.campo_chave.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
            required: config.obrigatorio || false,
            disabled: isReadonly,
            placeholder: config.texto_ajuda || `Digite ${campo.campo_chave}`,
            ...mapeamento.props,
        };

        switch (mapeamento.component) {
            case 'textarea':
                return (
                    <FormTextarea
                        key={campo.id}
                        {...props}
                        rows={4}
                        maxLength={1000}
                        showCount
                    />
                );

            case 'select':
                // Para selects, precisaríamos passar as opções via props
                // Por enquanto, renderizar como input
                return (
                    <FormInput
                        key={campo.id}
                        {...props}
                    />
                );

            case 'number':
                return (
                    <FormNumber
                        key={campo.id}
                        {...props}
                        min={0}
                        step={0.5}
                    />
                );

            case 'date':
                return (
                    <FormDatePicker
                        key={campo.id}
                        {...props}
                    />
                );

            default:
                return (
                    <FormInput
                        key={campo.id}
                        {...props}
                    />
                );
        }
    };

    // Não criar Form wrapper, apenas renderizar os campos
    // O Form já existe na página pai
    return (
        <>
            {camposOrdenados.map((campo) => renderCampo(campo))}
        </>
    );
}