'use client';

/**
 * Formulário de criação de caso de teste QA no contexto do projeto.
 *
 * @route /projetos/[id]/qualidade/testes/create
 */

import { Save } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { useRouter, useParams } from 'next/navigation';
import { Form, Button, Row, Col, Alert } from 'antd';
import { message } from '@/lib/feedback/message';
import { FormInput, FormTextarea, FormSelect } from '@/components/form';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { extractProjetoApiErrorMessage } from '@/features/projetos/utils/extractProjetoApiErrorMessage';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import PageHeaderPagina from '@/components/layouts/PageHeaderPagina';
import ContentCard from '@/components/layouts/ContentCard';
import { FormActions } from '@/components/form';

type CatalogoItem = { id: number; nome: string; codigo: string };

export function ProjetoQualidadeTesteCreateScreen() {
    const router = useRouter();
    const params = useParams();
    const projetoId = params?.id as string;
    const [form] = Form.useForm();

    const { data: tiposData } = useQueryCache<{ data: CatalogoItem[] }>({
        queryKey: queryKeys.qa.testes.tipos(),
        endpoint: API_ENDPOINTS.qa?.testes?.tipos || '/api/v1/qa/testes/tipos',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000,
    });

    const { data: categoriasData } = useQueryCache<{ data: CatalogoItem[] }>({
        queryKey: queryKeys.qa.testes.categorias(),
        endpoint: API_ENDPOINTS.qa?.testes?.categorias || '/api/v1/qa/testes/categorias',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000,
    });

    const { data: statusData } = useQueryCache<{ data: CatalogoItem[] }>({
        queryKey: queryKeys.qa.testes.status(),
        endpoint: API_ENDPOINTS.qa?.testes?.status || '/api/v1/qa/testes/status',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000,
    });

    const { data: prioridadesData } = useQueryCache<{ data: CatalogoItem[] }>({
        queryKey: queryKeys.qa.testes.prioridades(),
        endpoint: API_ENDPOINTS.qa?.testes?.prioridades || '/api/v1/qa/testes/prioridades',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000,
    });

    const tipoOptions =
        tiposData?.data?.map((item) => ({ label: item.nome, value: item.id })) ?? [];
    const categoriaOptions =
        categoriasData?.data?.map((item) => ({ label: item.nome, value: item.id })) ?? [];
    const statusOptions =
        statusData?.data?.map((item) => ({ label: item.nome, value: item.id })) ?? [];
    const prioridadeOptions =
        prioridadesData?.data?.map((item) => ({ label: item.nome, value: item.id })) ?? [];

    const createMutation = useMutationCache<Record<string, unknown>, Record<string, unknown>>({
        endpoint: API_ENDPOINTS.qa?.testes?.store || '/api/v1/qa/testes',
        method: 'POST',
        invalidateQueries: [['qa', 'testes']],
        onSuccess: () => {
            message.success('Teste criado com sucesso!');
            router.push(`/projetos/${projetoId}/qualidade/testes`);
        },
        onError: (err: unknown) => {
            message.error(extractProjetoApiErrorMessage(err, 'Erro ao criar teste'));
        },
    });

    const handleSubmit = async (values: Record<string, unknown>) => {
        const pid = Number(projetoId);
        createMutation.mutate({
            ...values,
            ...(Number.isFinite(pid) && pid > 0 ? { projeto_id: pid } : {}),
        });
    };

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Novo Teste"
            pageIcon="check-double"
            titleSection="Qualidade"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: 'Projeto', path: `/projetos/${projetoId}` },
                { title: 'Qualidade' },
                { title: 'Testes', path: `/projetos/${projetoId}/qualidade/testes` },
                { title: 'Novo Teste' },
            ]}
        >
            <PageHeaderPagina title="Novo Teste" />

            <Alert
                type="info"
                showIcon
                style={{ marginBottom: 16 }}
                message="Caso de teste mínimo"
                description={
                    <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
                        <li>Título claro e objetivo — identifica o cenário a validar.</li>
                        <li>Passos e resultado esperado facilitam a execução e a rastreabilidade.</li>
                        <li>O código é gerado automaticamente após salvar.</li>
                    </ul>
                }
            />

            <ContentCard>
                <Form form={form} layout="vertical" onFinish={handleSubmit} size="large">
                    <FormInput
                        name="titulo"
                        label="Título"
                        required
                        placeholder="Ex.: Login com credenciais válidas"
                    />

                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <FormSelect
                                name="tipo_projeto_software_teste_id"
                                label="Tipo"
                                options={tipoOptions}
                                allowClear
                                placeholder="Selecione o tipo"
                            />
                        </Col>
                        <Col xs={24} sm={12}>
                            <FormSelect
                                name="categoria_projeto_software_teste_id"
                                label="Categoria"
                                options={categoriaOptions}
                                allowClear
                                placeholder="Selecione a categoria"
                            />
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <FormSelect
                                name="status_projeto_software_teste_id"
                                label="Status"
                                options={statusOptions}
                                allowClear
                                placeholder="Selecione o status"
                            />
                        </Col>
                        <Col xs={24} sm={12}>
                            <FormSelect
                                name="prioridade_projeto_software_teste_id"
                                label="Prioridade"
                                options={prioridadeOptions}
                                allowClear
                                placeholder="Selecione a prioridade"
                            />
                        </Col>
                    </Row>

                    <FormTextarea
                        name="descricao"
                        label="Descrição"
                        rows={4}
                        placeholder="Contexto ou objetivo do teste..."
                        maxLength={2000}
                        showCount
                    />

                    <FormTextarea
                        name="pre_condicoes"
                        label="Pré-condições"
                        rows={3}
                        placeholder="Ex.: Usuário autenticado com perfil Administrador"
                        maxLength={2000}
                        showCount
                    />

                    <FormTextarea
                        name="passos"
                        label="Passos"
                        rows={6}
                        placeholder={'1. Acessar a tela de login\n2. Informar credenciais válidas\n3. Clicar em Entrar'}
                        maxLength={4000}
                        showCount
                    />

                    <FormTextarea
                        name="resultado_esperado"
                        label="Resultado esperado"
                        rows={4}
                        placeholder="Ex.: O usuário é redirecionado para o dashboard principal"
                        maxLength={2000}
                        showCount
                    />

                    <FormActions>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={createMutation.isPending}
                            icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                        >
                            Criar Teste
                        </Button>
                        <Button onClick={() => router.push(`/projetos/${projetoId}/qualidade/testes`)}>
                            Cancelar
                        </Button>
                    </FormActions>
                </Form>
            </ContentCard>
        </ProjetoLayout>
    );
}