'use client';

/**
 * @route /projetos/[id]/desenvolvimento/templates-tarefas
 */

import { CheckCircle2, FileText, Plus } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useState } from 'react';
import { Button, Tag, Modal, Form, Input, InputNumber, Space } from 'antd';
import { message } from '@/lib/feedback/message';
import { useIsSmallMobile } from '@/hooks/useIsMobile';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { useMutationCache } from '@/hooks/useMutationCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { useRouter, useParams } from 'next/navigation';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { EmptyState } from '@/components/empty';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { FormTextarea } from '@/components/form';
import { minhasTarefasTarefaDetalhePath } from '@/lib/routes/desenvolvimentoTarefasNav';

interface TarefaTemplate {
    id: number;
    nome: string;
    descricao?: string;
    prioridade: string;
    tipo_execucao?: string;
    estimativa_horas?: number;
    ativo: boolean;
    usos: number;
}

export default function TemplatesTarefasPage() {
    const router = useRouter();
    const params = useParams();
    const projetoId = params?.id as string;
    const isSmallMobile = useIsSmallMobile();
    const [applyModalVisible, setApplyModalVisible] = useState(false);
    const [selectedTemplate, setSelectedTemplate] = useState<TarefaTemplate | null>(null);
    const [form] = Form.useForm();
    const aplicarTemplateModalLayout = useResponsiveModalProps();

    // Buscar templates ativos
    const { data: templatesData, isLoading } = useQueryCache<{ templates: TarefaTemplate[] }>({
        queryKey: queryKeys.desenvolvimento.templatesTarefas.ativos(),
        endpoint: API_ENDPOINTS.desenvolvimento.templatesTarefas.ativos,
        staleTime: 5 * 60 * 1000, // 5 minutos
    });

    // Mutation para aplicar template
    const applyMutation = useMutationCache<Record<string, unknown>, Record<string, unknown>>({
        endpoint: API_ENDPOINTS.desenvolvimento.templatesTarefas.aplicar,
        method: 'POST',
        invalidateQueries: [queryKeys.desenvolvimento.tarefas.lists()],
        onSuccess: (data) => {
            message.success('Tarefa criada a partir do template com sucesso!');
            setApplyModalVisible(false);
            form.resetFields();
            setSelectedTemplate(null);
            const tarefaId = (data as { tarefa?: { id?: number } })?.tarefa?.id;
            if (tarefaId) {
                router.push(minhasTarefasTarefaDetalhePath(tarefaId));
            }
        },
        onError: (err: unknown) => {
            const errorMessage =
                (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
                'Erro ao aplicar template';
            message.error(errorMessage);
        }});

    const handleApplyTemplate = (template: TarefaTemplate) => {
        setSelectedTemplate(template);
        form.setFieldsValue({
            template_id: template.id,
            titulo: '',
            descricao: ''});
        setApplyModalVisible(true);
    };

    const handleSubmitApply = async () => {
        try {
            const values = await form.validateFields();
            applyMutation.mutate(values);
        } catch (error) {
            // Validação falhou
        }
    };

    const getPrioridadeColor = (prioridade: string) => {
        const colors: Record<string, string> = {
            baixa: 'default',
            media: 'processing',
            alta: 'warning',
            critica: 'error'};
        return colors[prioridade] || 'default';
    };

    const getPrioridadeLabel = (prioridade: string) => {
        const labels: Record<string, string> = {
            baixa: 'Baixa',
            media: 'Média',
            alta: 'Alta',
            critica: 'Crítica'};
        return labels[prioridade] || prioridade;
    };

    const getTipoExecucaoLabel = (tipo?: string) => {
        if (!tipo) return '-';
        const labels: Record<string, string> = {
            laravel_job: 'Laravel Job',
            laravel_event: 'Laravel Event',
            cursor_ia: 'Cursor IA'};
        return labels[tipo] || tipo;
    };

    const templates = templatesData?.templates || [];

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Templates de tarefas"
            showPageTitleIcon={false}
            titleSection="Templates de tarefas"
            headerAction={
                <ButtonHeaderIcon
                    icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                    title="Novo Template"
                    onClick={() =>
                        message.info('Criação de templates via API ou interface administrativa')
                    }
                />
            }
        >
            <OperativeRouteHint
                message="Menos retrabalho ao criar tarefas"
                description="Escolha um template, ajuste o título ao contexto atual e confirme — a tarefa criada abre no detalhe para continuar o fluxo."
            >
                <Space wrap>
                    <Button type="primary" onClick={() => router.push(`/projetos/${projetoId}/planejamento/backlog`)}>
                        Ver backlog técnico
                    </Button>
                    <Button onClick={() => router.push(`/projetos/${projetoId}/kanban`)}>Kanban</Button>
                </Space>
            </OperativeRouteHint>

            {templates.length === 0 && !isLoading ? (
                <ContentCard>
                    <EmptyState
                        icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                        title="Nenhum template ativo encontrado"
                        description="Crie templates para agilizar a criação de tarefas recorrentes"
                    />
                </ContentCard>
            ) : (
                <div
                    style={{
                        display: 'grid',
                        gridTemplateColumns: isSmallMobile ? '1fr' : 'repeat(auto-fill, minmax(300px, 1fr))',
                        gap: 16,
                        minWidth: 0}}
                >
                    {templates.map((template) => (
                        <ContentCard
                            key={template.id}
                            headerActions={[
                                <Button
                                    type="link"
                                    key="apply"
                                    onClick={() => handleApplyTemplate(template)}
                                    icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                                >
                                    Aplicar Template
                                </Button>,
                            ]}
                        >
                            <div>
                                <div
                                    style={{
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                        marginBottom: 12}}
                                >
                                    <span style={{ fontWeight: 600, fontSize: 16 }}>
                                        {template.nome}
                                    </span>
                                    <Tag color={getPrioridadeColor(template.prioridade)}>
                                        {getPrioridadeLabel(template.prioridade)}
                                    </Tag>
                                </div>
                                {template.descricao && (
                                    <p style={{ marginBottom: 12, color: '#666' }}>
                                        {template.descricao}
                                    </p>
                                )}
                                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                                    {template.tipo_execucao && (
                                        <Tag>{getTipoExecucaoLabel(template.tipo_execucao)}</Tag>
                                    )}
                                    {template.estimativa_horas && (
                                        <Tag>{template.estimativa_horas}h</Tag>
                                    )}
                                    <Tag>
                                        <CheckCircle2 size={ICON_SIZE_MD} style={{ marginRight: 4 }} aria-hidden />
                                        {template.usos} uso{template.usos !== 1 ? 's' : ''}
                                    </Tag>
                                </div>
                            </div>
                        </ContentCard>
                    ))}
                </div>
            )}

            {/* Modal para aplicar template */}
            <Modal
                title={`Aplicar Template: ${selectedTemplate?.nome}`}
                data-testid="projeto-templates-tarefas-aplicar-modal"
                open={applyModalVisible}
                onOk={handleSubmitApply}
                onCancel={() => {
                    setApplyModalVisible(false);
                    form.resetFields();
                    setSelectedTemplate(null);
                }}
                confirmLoading={applyMutation.isPending}
                okText="Criar Tarefa"
                cancelText="Cancelar"
                width={aplicarTemplateModalLayout.width ?? 600}
                centered={aplicarTemplateModalLayout.centered}
                styles={aplicarTemplateModalLayout.styles}
                keyboard
                focusTriggerAfterClose
                destroyOnHidden
            >
                <Form form={form} layout="vertical">
                    <Form.Item name="template_id" hidden>
                        <Input type="hidden" />
                    </Form.Item>
                    <Form.Item
                        name="titulo"
                        label="Título da Tarefa"
                        rules={[{ required: true, message: 'Informe o título da tarefa' }]}
                    >
                        <Input placeholder="Ex: Implementar funcionalidade X" />
                    </Form.Item>
                    <FormTextarea
                        name="descricao"
                        label="Descrição"
                        rows={4}
                        placeholder="Descrição adicional da tarefa..."
                    />
                    <Form.Item name="projeto_id" label="Projeto">
                        <InputNumber
                            style={{ width: '100%' }}
                            placeholder="ID do projeto"
                            min={1}
                        />
                    </Form.Item>
                    <Form.Item name="sprint_id" label="Sprint">
                        <InputNumber style={{ width: '100%' }} placeholder="ID da sprint" min={1} />
                    </Form.Item>
                    <Form.Item name="responsavel_id" label="Responsável">
                        <InputNumber
                            style={{ width: '100%' }}
                            placeholder="ID do responsável"
                            min={1}
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}