'use client';

/**
 * @fileoverview Listagem e CRUD de templates de projetos.
 * @route /projetos/templates
 */

import { confirmDialog } from '@/lib/feedback/confirmDialog';
import { message } from '@/lib/feedback/message';

import { Copy, FileText, Plus } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useState, useMemo } from 'react';
import { Button, Space, Tag, Modal, Form, Input, Select, Descriptions, Alert, Tooltip } from 'antd';
import { LazyExportButton, LazyDataTable } from '@/components/lazy';
import { useRouter } from 'next/navigation';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useWaygestFormModalProps } from '@/hooks/useWaygestFormModalProps';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { formatDate } from '@/lib/utils/export';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
import { PermissionGuard } from '@/components/permissions';
import PageWrapper from '@/components/layouts/PageWrapper';
import PageHeaderPagina from '@/components/layouts/PageHeaderPagina';
import { ListPageCreateFloatButton } from '@/components/listings';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import { EmptyState } from '@/components/empty';
import { queryKeys } from '@/lib/cache/queryKeys';
import type { TemplateProjeto } from './types';
import { ModalOpcoesTemplateProjeto } from './ModalOpcoesTemplateProjeto';
import { buildProjetosTemplatesColumns } from './projetosTemplatesDisplay';

type TemplateUpdatePayload = Record<string, unknown> & { id: number };

export function ProjetosTemplatesListaScreen() {
    const router = useRouter();
    const [modalVisible, setModalVisible] = useState(false);
    const [viewModalVisible, setViewModalVisible] = useState(false);
    const [selectedTemplate, setSelectedTemplate] = useState<TemplateProjeto | null>(null);
    const [editingTemplate, setEditingTemplate] = useState<TemplateProjeto | null>(null);
    const [form] = Form.useForm();
    const [opcoesItem, setOpcoesItem] = useState<TemplateProjeto | null>(null);
    const modalLayout = useWaygestFormModalProps();

    const {
        data: templatesData,
        isLoading,
        refetch} = useQueryCache<{ data: TemplateProjeto[] }>({
        queryKey: queryKeys.projetos.templatesList(),
        endpoint: API_ENDPOINTS.projetos.templates.index,
        staleTime: 5 * 60 * 1000,
        gcTime: 30 * 60 * 1000});

    const templates = useMemo(() => templatesData?.data || [], [templatesData]);

    const handleCreate = () => {
        setEditingTemplate(null);
        form.resetFields();
        setModalVisible(true);
    };

    const handleEdit = (template: TemplateProjeto) => {
        setEditingTemplate(template);
        form.setFieldsValue(template);
        setModalVisible(true);
    };

    const handleView = (template: TemplateProjeto) => {
        setSelectedTemplate(template);
        setViewModalVisible(true);
    };

    const deleteMutation = useMutationCache<unknown, number>({
        endpoint: (templateId) => API_ENDPOINTS.projetos.templates.destroy(templateId),
        method: 'DELETE',
        invalidateQueries: [['projetos', 'templates', 'list']],
        onSuccess: () => {
            message.success('Template excluído com sucesso!');
            refetch();
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao excluir template';
            message.error(errorMessage);
        }});

    const handleDelete = (template: TemplateProjeto) => {
        confirmDialog({
            title: 'Confirmar exclusão',
            content: `Tem certeza que deseja excluir o template "${template.nome}"? Esta ação não pode ser desfeita.`,
            okText: 'Excluir',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: () => {
                deleteMutation.mutate(template.id);
            }});
    };

    const handleUseTemplate = (template: TemplateProjeto) => {
        router.push(`/projetos/create?template=${template.id}`);
    };

    const createMutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.templates.store,
        method: 'POST',
        invalidateQueries: [['projetos', 'templates', 'list']],
        onSuccess: () => {
            message.success('Template criado com sucesso!');
            setModalVisible(false);
            form.resetFields();
            refetch();
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao criar template';
            message.error(errorMessage);
        }});

    const updateMutation = useMutationCache<unknown, TemplateUpdatePayload>({
        endpoint: (vars) => API_ENDPOINTS.projetos.templates.update(vars.id),
        method: 'PUT',
        buildBody: (vars) => {
            const { id, ...body } = vars;
            void id;
            return body;
        },
        invalidateQueries: [['projetos', 'templates', 'list']],
        onSuccess: () => {
            message.success('Template atualizado com sucesso!');
            setModalVisible(false);
            form.resetFields();
            setEditingTemplate(null);
            refetch();
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao atualizar template';
            message.error(errorMessage);
        }});

    const handleSubmit = async (values: Record<string, unknown>) => {
        if (editingTemplate) {
            updateMutation.mutate({ ...values, id: editingTemplate.id });
        } else {
            createMutation.mutate(values);
        }
    };

    const columns = buildProjetosTemplatesColumns({ onOpenOpcoes: setOpcoesItem });

    return (
        <PageWrapper>
            <PageHeaderPagina
                title="Templates de Projetos"
                actions={
                    <Space wrap size={8} align="center">
                        <Tooltip title="Exportar templates (Excel, PDF, CSV ou JSON)">
                            <span style={{ display: 'inline-block' }}>
                                <LazyExportButton
                                    data={templates as unknown as Record<string, unknown>[]}
                                    columns={[
                                        { key: 'nome', label: 'Nome' },
                                        { key: 'categoria', label: 'Categoria' },
                                        { key: 'descricao', label: 'Descrição' },
                                    ]}
                                    filename="templates_projetos"
                                    iconOnly
                                    title="Exportar templates de projetos"
                                    size="large"
                                    exportMenuMode="modal"
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </span>
                        </Tooltip>
                    </Space>
                }
            />

            <Alert
                type="info"
                showIcon
                style={{ marginBottom: 16 }}
                message="Padronização e ativação rápida"
                description={'Templates aceleram projetos com o mesmo tipo de entrega. Mantenha nome e escopo explícitos; use "Usar template" para abrir o assistente de criação já pré-preenchido.'}
            />

            
            {templates.length === 0 && !isLoading ? (
                <EmptyState
                    icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                    title="Nenhum template encontrado"
                    description="Crie seu primeiro template para acelerar a criação de projetos"
                    action={
                        <PermissionGuard
                            permission="projetos.templates.create"
                            module="projetos"
                            action="create"
                        >
                            <Button
                                type="primary"
                                icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                onClick={handleCreate}
                            >
                                Criar Primeiro Template
                            </Button>
                        </PermissionGuard>
                    }
                />
            ) : (
                <LazyDataTable
                    columns={columns}
                    data={templates}
                    loading={isLoading}
                    onRefresh={refetch}
                    {...listingTableVirtualScrollProps(templates.length)}
                    onRow={(record: unknown) => ({
                        onClick: () => setOpcoesItem(record as TemplateProjeto),
                        style: { cursor: 'pointer' }})}
                />
            )}
            

            <ModalOpcoesTemplateProjeto
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onVerDetalhes={(item) => {
                    setOpcoesItem(null);
                    handleView(item);
                }}
                onUsar={(item) => {
                    setOpcoesItem(null);
                    handleUseTemplate(item);
                }}
                onEditar={(item) => {
                    setOpcoesItem(null);
                    handleEdit(item);
                }}
                onExcluir={(item) => {
                    setOpcoesItem(null);
                    handleDelete(item);
                }}
            />

            <Modal
                title={editingTemplate ? 'Editar Template' : 'Novo Template'}
                open={modalVisible}
                onCancel={() => {
                    setModalVisible(false);
                    setEditingTemplate(null);
                    form.resetFields();
                }}
                onOk={() => form.submit()}
                width={modalLayout.width ?? 600}
                centered={modalLayout.centered ?? true}
                className={modalLayout.className}

                styles={modalLayout.styles ?? {}}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="projetos-templates-form-modal"
            >
                <Form form={form} onFinish={handleSubmit} layout="vertical">
                    <Form.Item
                        name="nome"
                        label="Nome do Template"
                        rules={[{ required: true, message: 'Nome é obrigatório' }]}
                    >
                        <Input placeholder="Ex: Template Web App" />
                    </Form.Item>

                    <Form.Item
                        name="categoria"
                        label="Categoria"
                        rules={[{ required: true, message: 'Categoria é obrigatória' }]}
                    >
                        <Select placeholder="Selecione a categoria">
                            <Select.Option value="Web">Web</Select.Option>
                            <Select.Option value="Mobile">Mobile</Select.Option>
                            <Select.Option value="Desktop">Desktop</Select.Option>
                            <Select.Option value="API">API</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name="descricao" label="Descrição">
                        <Input.TextArea rows={3} placeholder="Descrição do template" />
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                title="Detalhes do Template"
                open={viewModalVisible}
                onCancel={() => setViewModalVisible(false)}
                footer={[
                    <Button
                        key="use"
                        type="primary"
                        icon={<Copy size={ICON_SIZE_MD} aria-hidden />}
                        onClick={() => selectedTemplate && handleUseTemplate(selectedTemplate)}
                    >
                        Usar Template
                    </Button>,
                    <Button key="close" onClick={() => setViewModalVisible(false)}>
                        Fechar
                    </Button>,
                ]}
                width={modalLayout.width ?? 700}
                centered={modalLayout.centered ?? true}
                className={modalLayout.className}

                styles={modalLayout.styles ?? {}}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="projetos-templates-detalhes-modal"
            >
                {selectedTemplate && (
                    <Descriptions bordered column={1}>
                        <Descriptions.Item label="Nome">{selectedTemplate.nome}</Descriptions.Item>
                        <Descriptions.Item label="Categoria">
                            <Tag color="blue">{selectedTemplate.categoria}</Tag>
                        </Descriptions.Item>
                        <Descriptions.Item label="Descrição">
                            {selectedTemplate.descricao || '-'}
                        </Descriptions.Item>
                        <Descriptions.Item label="Etapas">
                            <Space wrap>
                                {selectedTemplate.estrutura.etapas.map((etapa, index) => (
                                    <Tag key={index}>{etapa}</Tag>
                                ))}
                            </Space>
                        </Descriptions.Item>
                        <Descriptions.Item label="Tecnologias">
                            <Space wrap>
                                {selectedTemplate.estrutura.tecnologias.map((tech, index) => (
                                    <Tag key={index} color="green">
                                        {tech}
                                    </Tag>
                                ))}
                            </Space>
                        </Descriptions.Item>
                        <Descriptions.Item label="Documentos">
                            <Space wrap>
                                {selectedTemplate.estrutura.documentos.map((doc, index) => (
                                    <Tag key={index} color="orange">
                                        {doc}
                                    </Tag>
                                ))}
                            </Space>
                        </Descriptions.Item>
                        <Descriptions.Item label="Criado em">
                            {formatDate(selectedTemplate.created_at)}
                        </Descriptions.Item>
                    </Descriptions>
                )}
            </Modal>

            <PermissionGuard permission="projetos.templates.create" module="projetos" action="create">
                <ListPageCreateFloatButton
                data-testid="projetos-templates-fab-novo"
                tooltip={{ title: 'Novo template de projeto' }}
                    onClick={handleCreate}
/>
            </PermissionGuard>
        </PageWrapper>
    );
}