'use client';

/**
 * Listagem + CRUD de checklist de implantação (ACL ou cutover) — TASK-PSC-036.
 * Persistência via `/cutover-itens` filtrado por `categoria`.
 */

import { Loader2, ListChecks, Plus, Save } from 'lucide-react';
import { Alert, Button, Form, Modal } from 'antd';
import { useMemo, useState } from 'react';

import { ICON_SIZE_MD } from '@/components/icons';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { ListPageCreateFloatButton } from '@/components/listings';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import {
    ProjetoTipologicoEmptyState,
    TIPOLOGICO_EMPTY_DOMAIN,
} from '@/features/projetos/projeto-tipologico-empty-state';
import { LazyDataTable } from '@/components/lazy';
import { TableScrollWrapper } from '@/components/tables/TableScrollWrapper';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useQueryCache } from '@/hooks/useQueryCache';
import {
    useWaygestFormModalProps,
    waygestFormModalFooterClassName,
} from '@/hooks/useWaygestFormModalProps';
import apiClient from '@/lib/api/client';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { message } from '@/lib/feedback/message';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
import type { Projeto } from '@/types';

import { buildImplantacaoChecklistColumns } from './implantacaoChecklistColumns';
import { getImplantacaoChecklistErrorMessage } from './implantacaoChecklistDisplay';
import { ModalChecklistItemFormFields } from './ModalChecklistItemFormFields';
import { ModalOpcoesChecklistItem } from './ModalOpcoesChecklistItem';
import type {
    ImplantacaoChecklistItem,
    ImplantacaoChecklistItemPayload,
    ImplantacaoChecklistScreenConfig,
} from './types';

const FORM_ID = 'projeto-implantacao-checklist-form';

export type ProjetoImplantacaoChecklistScreenProps = {
    projetoId: string;
    config: ImplantacaoChecklistScreenConfig;
};

type UsuarioOption = { id: number; nome: string; email?: string | null };

/**
 * Tela CRUD de checklist tipológico (ACL ou migração/cutover).
 */
export function ProjetoImplantacaoChecklistScreen({
    projetoId: id,
    config,
}: ProjetoImplantacaoChecklistScreenProps) {
    const { canEditar, permsLoading } = useProjetoWriteGates();
    const categoria = config.kind;
    const queryKey = queryKeys.projetos.cutoverItens(id, categoria);
    const indexEndpoint = API_ENDPOINTS.projetos.cutoverItens.index(id);
    const storeEndpoint = API_ENDPOINTS.projetos.cutoverItens.store(id);

    const [modalVisible, setModalVisible] = useState(false);
    const [editing, setEditing] = useState<ImplantacaoChecklistItem | null>(null);
    const [opcoesItem, setOpcoesItem] = useState<ImplantacaoChecklistItem | null>(null);
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

    const { data: projeto } = useQueryCache<Projeto>({
        queryKey: queryKeys.projetos.detail(id),
        endpoint: API_ENDPOINTS.projetos.show(id),
        enabled: !!id,
        staleTime: 60_000,
        gcTime: 5 * 60_000,
    });

    const {
        data: listData,
        isLoading,
        isError,
        error,
        refetch,
        isFetching,
    } = useQueryCache<{ data: ImplantacaoChecklistItem[] }>({
        queryKey,
        endpoint: indexEndpoint,
        params: { categoria, per_page: 100 },
        enabled: !!id,
        staleTime: 30_000,
        gcTime: 5 * 60_000,
        retry: false,
        config: { timeout: 12_000 },
    });

    const { data: usuariosData, isLoading: ownersLoading } = useQueryCache<{
        data: UsuarioOption[];
    }>({
        queryKey: queryKeys.usuariosCatalog.list('cutover-itens'),
        endpoint: API_ENDPOINTS.usuarios.index,
        params: { per_page: 1000 },
        staleTime: 5 * 60_000,
        gcTime: 10 * 60_000,
        enabled: modalVisible,
    });

    const items = listData?.data ?? [];
    const ownerOptions = useMemo(
        () =>
            (usuariosData?.data ?? []).map((u) => ({
                label: u.email ? `${u.nome} (${u.email})` : u.nome,
                value: u.id,
            })),
        [usuariosData?.data]
    );

    const columns = useMemo(
        () => buildImplantacaoChecklistColumns({ onOpenOpcoes: setOpcoesItem }),
        []
    );

    const saveMutation = useMutationCache({
        endpoint: editing
            ? API_ENDPOINTS.projetos.cutoverItens.update(id, editing.id)
            : storeEndpoint,
        method: editing ? 'PUT' : 'POST',
        invalidateQueries: [queryKey],
        onSuccess: () => {
            message.success(editing ? 'Item atualizado.' : 'Item criado.');
            setModalVisible(false);
            setEditing(null);
            form.resetFields();
            void refetch();
        },
        onError: (err: unknown) => {
            message.error(getImplantacaoChecklistErrorMessage(err, 'Não foi possível salvar o item.'));
        },
    });

    const handleCreate = () => {
        setEditing(null);
        form.resetFields();
        form.setFieldsValue({ status: 'pendente', ordem: undefined });
        setModalVisible(true);
    };

    const handleEdit = (item: ImplantacaoChecklistItem) => {
        setEditing(item);
        form.setFieldsValue({
            titulo: item.titulo,
            notas: item.notas ?? '',
            status: item.status,
            owner_user_id: item.owner_user_id ?? item.owner?.id ?? undefined,
            ordem: item.ordem ?? undefined,
        });
        setModalVisible(true);
    };

    const handleDelete = async (item: ImplantacaoChecklistItem) => {
        try {
            await apiClient.delete(API_ENDPOINTS.projetos.cutoverItens.destroy(id, item.id));
            message.success('Item excluído.');
            void refetch();
        } catch (err: unknown) {
            message.error(getImplantacaoChecklistErrorMessage(err, 'Não foi possível excluir o item.'));
        }
    };

    const handleSubmit = (values: Record<string, unknown>) => {
        const ownerRaw = values.owner_user_id;
        const ownerId =
            ownerRaw === undefined || ownerRaw === null || ownerRaw === ''
                ? null
                : Number(ownerRaw);
        const ordemRaw = values.ordem;
        const ordem =
            ordemRaw === undefined || ordemRaw === null || ordemRaw === ''
                ? null
                : Number(ordemRaw);

        const payload: ImplantacaoChecklistItemPayload = {
            categoria,
            titulo: String(values.titulo ?? '').trim(),
            status: values.status as ImplantacaoChecklistItemPayload['status'],
            owner_user_id: Number.isFinite(ownerId as number) ? ownerId : null,
            notas: (values.notas as string)?.trim() || null,
            ordem: Number.isFinite(ordem as number) ? ordem : null,
        };
        saveMutation.mutate(payload);
    };

    const closeModal = () => {
        setModalVisible(false);
        setEditing(null);
        form.resetFields();
    };

    if (!id) return null;

    const testIdPrefix = `projeto-${config.kind}-checklist`;
    const loadFailed = isError;

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle={config.pageTitle}
            pageIcon={config.pageIcon}
            titleSection={config.titleSection}
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: projeto?.nome || 'Projeto' },
                { title: config.titleSection },
            ]}
        >
            <div data-testid={testIdPrefix}>
                <OperativeRouteHint
                    type="info"
                    message="Âmbito desta tela"
                    description={config.scopeHint}
                />

                {loadFailed ? (
                    <Alert
                        type="error"
                        showIcon
                        style={{ marginBottom: 16 }}
                        message="Não foi possível carregar o checklist"
                        description={getImplantacaoChecklistErrorMessage(
                            error,
                            'Tente novamente. Se o erro persistir, contate o suporte.'
                        )}
                        action={
                            <Button size="small" onClick={() => void refetch()} loading={isFetching}>
                                Tentar novamente
                            </Button>
                        }
                        data-testid={`${testIdPrefix}-load-error`}
                    />
                ) : null}

                {isLoading && !loadFailed ? (
                    <div style={{ textAlign: 'center', padding: 40 }}>
                        <Loader2
                            size={ICON_SIZE_MD}
                            className="animate-spin"
                            style={{ color: '#95a5a6' }}
                            aria-hidden
                        />
                        <p style={{ marginTop: 12, color: '#7f8c8d' }}>Carregando checklist…</p>
                    </div>
                ) : !loadFailed && items.length === 0 ? (
                    
                    <ProjetoTipologicoEmptyState
                        projetoId={id}
                        icon={
                            <ListChecks
                                size={48}
                                style={{ color: '#d9d9d9' }}
                                aria-hidden
                            />
                        }
                        title={config.emptyTitle}
                        domainDescription={
                            canEditar
                                ? config.kind === 'acl'
                                    ? TIPOLOGICO_EMPTY_DOMAIN.acl
                                    : config.emptyDescription
                                : 'Não há itens nesta listagem. Peça acesso para cadastrar se precisar incluir um registro.'
                        }
                        data-testid={`${testIdPrefix}-empty`}
                        showSyncCtas={config.kind === 'acl'}
                        primaryAction={
                            !permsLoading && canEditar ? (
                                <Button
                                    type="primary"
                                    icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                    onClick={handleCreate}
                                    data-testid={`${testIdPrefix}-empty-cta`}
                                >
                                    {config.createLabel}
                                </Button>
                            ) : undefined
                        }
                    />
                    
                ) : !loadFailed ? (
                    
                    <TableScrollWrapper>
                        <LazyDataTable
                            columns={columns}
                            data={items}
                            loading={isLoading}
                            onRefresh={() => void refetch()}
                            {...listingTableVirtualScrollProps(items.length)}
                            onRow={(record: unknown) => ({
                                onClick: () => setOpcoesItem(record as ImplantacaoChecklistItem),
                                style: { cursor: 'pointer' },
                            })}
                        />
                    </TableScrollWrapper>
                    
                ) : null}

                <ModalOpcoesChecklistItem
                    open={opcoesItem !== null}
                    item={opcoesItem}
                    onClose={() => setOpcoesItem(null)}
                    onEditar={(item) => {
                        setOpcoesItem(null);
                        handleEdit(item);
                    }}
                    onExcluir={(item) => {
                        setOpcoesItem(null);
                        void handleDelete(item);
                    }}
                />

                <Modal
                    title={editing ? config.editLabel : config.createLabel}
                    open={modalVisible}
                    onCancel={closeModal}
                    footer={
                        <div className={waygestFormModalFooterClassName}>
                            <Button onClick={closeModal}>Cancelar</Button>
                            <Button
                                type="primary"
                                htmlType="submit"
                                form={FORM_ID}
                                loading={saveMutation.isPending}
                                icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                            >
                                {editing ? 'Salvar' : 'Criar'}
                            </Button>
                        </div>
                    }
                    width={640}
                    centered={formModalLayout.centered ?? true}
                    className={formModalLayout.className}
                    styles={formModalLayout.styles}
                    zIndex={formModalLayout.zIndex}
                    destroyOnHidden
                    data-testid={`${testIdPrefix}-form-modal`}
                >
                    <Form id={FORM_ID} form={form} layout="vertical" onFinish={handleSubmit}>
                        <ModalChecklistItemFormFields
                            ownerOptions={ownerOptions}
                            ownersLoading={ownersLoading}
                        />
                    </Form>
                </Modal>

                {!loadFailed && !permsLoading && canEditar ? (
                    <ListPageCreateFloatButton
                        data-testid={`${testIdPrefix}-fab-novo`}
                        tooltip={{ title: config.createLabel }}
                        onClick={handleCreate}
                    />
                ) : null}
            </div>
        </ProjetoLayout>
    );
}