'use client';

import { ArrowLeft, Pencil, Plus, Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Button, Space, Modal, Form, Input, Select, DatePicker, Card, Row, Col, Spin, Tooltip } from 'antd';
import { message } from '@/lib/feedback/message';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useWaygestFormModalProps } from '@/hooks/useWaygestFormModalProps';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { EpicoCard } from '@/features/tarefas/components';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { ListagemEmptyState } from '@/components/listings';
import dayjs from 'dayjs';
import type { Epico } from '@/types/projeto';
import {
    EPICOS_PROJETO_LIST_QUERY_KEY_PREFIX,
    projetoEpicosListQueryKey,
    USUARIOS_SELECT_LIST_QUERY_KEY,
} from './projetoEpicosListaConstants';
import { projetoEpicoDetalhePath, projetoEpicosListaProjetoPath } from './projetoEpicosListaPaths';
import { PROJETO_EPICO_STATUS_OPTIONS } from './projetoEpicosListaFormOptions';

const { TextArea } = Input;

function epicoProjetoInvalidateKey(projetoId: string) {
    return [...EPICOS_PROJETO_LIST_QUERY_KEY_PREFIX, projetoId] as const;
}

export function ProjetoEpicosListaScreen() {
    const params = useParams();
    const router = useRouter();
    const projetoId = params?.id as string;
    const [modalVisible, setModalVisible] = useState(false);
    const [editingEpico, setEditingEpico] = useState<Epico | null>(null);
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

    const {
        data: epicosData,
        isLoading,
        refetch,
    } = useQueryCache<{ data: Epico[] }>({
        queryKey: projetoEpicosListQueryKey(projetoId),
        endpoint: API_ENDPOINTS.epicos.index(projetoId),
        enabled: !!projetoId,
        staleTime: 2 * 60 * 1000,
        gcTime: 10 * 60 * 1000,
    });

    const epicos = epicosData?.data || [];

    const epicosAtencaoCount = useMemo(() => {
        return epicos.filter((ep) => {
            if (!ep.responsavel_id && !ep.responsavel) return true;
            if (ep.data_fim_prevista && dayjs(ep.data_fim_prevista).endOf('day').isBefore(dayjs())) {
                return (ep.progresso ?? 0) < 100;
            }
            const s = (ep.status || '').toLowerCase();
            if (s.includes('bloque') || s.includes('atras')) return true;
            return false;
        }).length;
    }, [epicos]);

    const cardBorderEpico = (ep: Epico): string => {
        if (!ep.responsavel_id && !ep.responsavel) return '1px solid #faad14';
        if (ep.data_fim_prevista && dayjs(ep.data_fim_prevista).endOf('day').isBefore(dayjs()) && (ep.progresso ?? 0) < 100) {
            return '1px solid #ff4d4f';
        }
        return '1px solid #e8e8e8';
    };

    const { data: usuariosData } = useQueryCache<{ data: Array<{ id: number; nome: string }> }>({
        queryKey: USUARIOS_SELECT_LIST_QUERY_KEY,
        endpoint: API_ENDPOINTS.usuarios.index,
        staleTime: 5 * 60 * 1000,
    });

    const usuarios = usuariosData?.data || [];

    const invalidateEpicos = [epicoProjetoInvalidateKey(projetoId)];

    const createMutation = useMutationCache<Epico, Record<string, unknown>>({
        endpoint: API_ENDPOINTS.epicos.store(projetoId),
        method: 'POST',
        invalidateQueries: invalidateEpicos,
        onSuccess: () => {
            message.success('Épico 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 épico';
            message.error(errorMessage);
        },
    });

    const updateMutation = useMutationCache<Epico, Record<string, unknown>>({
        endpoint: (data) => API_ENDPOINTS.epicos.update((data as { id: number }).id),
        method: 'PUT',
        invalidateQueries: invalidateEpicos,
        onSuccess: () => {
            message.success('Épico atualizado com sucesso!');
            setModalVisible(false);
            form.resetFields();
            setEditingEpico(null);
            refetch();
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao atualizar épico';
            message.error(errorMessage);
        },
    });

    const deleteMutation = useMutationCache<void, number>({
        endpoint: (id) => API_ENDPOINTS.epicos.destroy(id),
        method: 'DELETE',
        invalidateQueries: invalidateEpicos,
        onSuccess: () => {
            message.success('Épico excluído com sucesso!');
            refetch();
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao excluir épico';
            message.error(errorMessage);
        },
    });

    const handleCreate = () => {
        setEditingEpico(null);
        form.resetFields();
        form.setFieldsValue({
            cor: '#1890ff',
            progresso: 0,
        });
        setModalVisible(true);
    };

    const handleEdit = (epico: Epico) => {
        setEditingEpico(epico);
        form.setFieldsValue({
            ...epico,
            data_inicio: epico.data_inicio ? dayjs(epico.data_inicio) : undefined,
            data_fim_prevista: epico.data_fim_prevista ? dayjs(epico.data_fim_prevista) : undefined,
        });
        setModalVisible(true);
    };

    const handleDelete = (id: number) => {
        deleteMutation.mutate(id);
    };

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            const submitData = {
                ...values,
                data_inicio: values.data_inicio ? values.data_inicio.format('YYYY-MM-DD') : null,
                data_fim_prevista: values.data_fim_prevista
                    ? values.data_fim_prevista.format('YYYY-MM-DD')
                    : null,
            };

            if (editingEpico) {
                updateMutation.mutate({ ...submitData, id: editingEpico.id });
            } else {
                createMutation.mutate(submitData);
            }
        } catch {
            // validação do formulário
        }
    };

    const handleViewDetails = (epicoId: number) => {
        router.push(projetoEpicoDetalhePath(projetoId, epicoId));
    };

    const headerAction = (
        <Space wrap size={8} align="center">
            <Tooltip title="Voltar ao projeto">
                <span style={{ display: 'inline-block' }}>
                    <Button
                        icon={<ArrowLeft />}
                        onClick={() => router.push(projetoEpicosListaProjetoPath(projetoId))}
                    >
                        Voltar
                    </Button>
                </span>
            </Tooltip>
            <Tooltip title="Criar novo épico no projeto">
                <span style={{ display: 'inline-block' }}>
                    <ButtonHeaderIcon
                        icon={<Plus />}
                        onClick={handleCreate}
                        variant="primary"
                        title="Novo Épico"
                    />
                </span>
            </Tooltip>
        </Space>
    );

    if (isLoading) {
        return (
            <ProjetoLayout
                projetoId={projetoId}
                pageTitle="Épicos"
                showPageTitleIcon={false}
                titleSection="Épicos"
            >
                <Spin size="large" style={{ display: 'block', textAlign: 'center', padding: 50 }} />
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Épicos"
            showPageTitleIcon={false}
            titleSection="Épicos"
            headerAction={headerAction}
        >
            <OperativeRouteHint
                type={epicosAtencaoCount > 0 ? 'warning' : 'info'}
                message="Gestão de escopo por épico"
                description={
                    epicosAtencaoCount > 0
                        ? `${epicosAtencaoCount} épico(s) com responsável em falta, prazo ultrapassado ou estado de bloqueio — abra o cartão para rever prioridade, datas e progresso antes de desdobrar histórias.`
                        : 'Priorize pelo progresso e datas; use "Novo épico" para blocos de trabalho e abra o detalhe para ligar histórias e tarefas.'
                }
            />

            <ContentCard>
                {epicos.length === 0 ? (
                    <ListagemEmptyState
                        data-testid="projeto-epicos-lista-empty"
                        type="info"
                        icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                        message="Nenhum épico encontrado"
                        description="Crie o primeiro épico para organizar o escopo em blocos de trabalho e ligar histórias."
                        ctaLabel="Criar primeiro épico"
                        onCta={handleCreate}
                    />
                ) : (
                    <Row gutter={[16, 16]}>
                        {epicos.map((epico) => (
                            <Col key={epico.id} xs={24} sm={12} lg={8} xl={6}>
                                <Card
                                    hoverable
                                    onClick={() => handleViewDetails(epico.id)}
                                    style={{ height: '100%', border: cardBorderEpico(epico) }}
                                    actions={[
                                        <Pencil
                                            key="edit"
                                            size={ICON_SIZE_MD}
                                            aria-hidden
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                handleEdit(epico);
                                            }}
                                        />,
                                        <Trash2
                                            key="delete"
                                            size={ICON_SIZE_MD}
                                            aria-hidden
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                handleDelete(epico.id);
                                            }}
                                        />,
                                    ]}
                                >
                                    <EpicoCard epico={epico} showProgress showDetails />
                                </Card>
                            </Col>
                        ))}
                    </Row>
                )}
            </ContentCard>

            <Modal
                title={editingEpico ? 'Editar Épico' : 'Novo Épico'}
                open={modalVisible}
                onCancel={() => {
                    setModalVisible(false);
                    form.resetFields();
                    setEditingEpico(null);
                }}
                onOk={handleSubmit}
                confirmLoading={createMutation.isPending || updateMutation.isPending}
                width={formModalLayout.width ?? 600}
                centered={formModalLayout.centered}
                styles={formModalLayout.styles}
                className={formModalLayout.className}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="projeto-epicos-form-modal"
            >
                <Form form={form} layout="vertical">
                    <Form.Item
                        name="nome"
                        label="Nome"
                        rules={[{ required: true, message: 'Por favor, informe o nome' }]}
                    >
                        <Input placeholder="Nome do épico" />
                    </Form.Item>

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

                    <Form.Item name="cor" label="Cor">
                        <Input type="color" style={{ width: 100 }} />
                    </Form.Item>

                    <Form.Item name="status" label="Status">
                        <Select placeholder="Selecione o status">
                            {PROJETO_EPICO_STATUS_OPTIONS.map((opt) => (
                                <Select.Option key={opt.value} value={opt.value}>
                                    {opt.label}
                                </Select.Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="data_inicio" label="Data de Início">
                                <DatePicker style={{ width: '100%' }} format="DD/MM/YYYY" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="data_fim_prevista" label="Data Fim Prevista">
                                <DatePicker style={{ width: '100%' }} format="DD/MM/YYYY" />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Form.Item name="responsavel_id" label="Responsável">
                        <Select
                            placeholder="Selecione o responsável"
                            allowClear
                            showSearch
                            optionFilterProp="children"
                        >
                            {usuarios.map((usuario) => (
                                <Select.Option key={usuario.id} value={usuario.id}>
                                    {usuario.nome}
                                </Select.Option>
                            ))}
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}