'use client';

/**
 * Modal de Sprint Retrospective — registro da retrospectiva da sprint
 * (padrão Waygest: `useWaygestFormModalProps`, como Planning/Review).
 */

import { Plus, Save, Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useEffect, useState } from 'react';
import {
    Alert,
    Button,
    Card,
    DatePicker,
    Descriptions,
    Form,
    Input,
    List,
    Modal,
    Select,
    Space,
    Tag,
    Typography,
} from 'antd';
import { message } from '@/lib/feedback/message';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import {
    mergeWaygestFormModalBodyStyles,
    useWaygestFormModalProps,
    waygestFormModalFooterClassName,
} from '@/hooks/useWaygestFormModalProps';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import type { Sprint, SprintRetrospectiva } from '@/types/projeto';
import type { Usuario } from '@/types/usuario';
import type { ItemAcaoRetrospectiva } from '@/types/retrospectiva';
import dayjs, { type Dayjs } from 'dayjs';

const { TextArea } = Input;
const { Paragraph } = Typography;

const statusSprintLabel: Record<string, string> = {
    planejada: 'Planejada',
    ativa: 'Ativa',
    concluida: 'Concluída',
    cancelada: 'Cancelada',
};

export interface ModalSprintRetrospectiveProps {
    open: boolean;
    onClose: () => void;
    sprintId: string;
    sprint?: Sprint | null;
    onSuccess?: () => void;
}

export function ModalSprintRetrospective({
    open,
    onClose,
    sprintId,
    sprint: sprintProp,
    onSuccess,
}: ModalSprintRetrospectiveProps) {
    const formModalLayout = useWaygestFormModalProps();
    const [form] = Form.useForm();
    const [itensAcao, setItensAcao] = useState<ItemAcaoRetrospectiva[]>([]);
    const sprintIdSafe = sprintId.trim();
    const enabled = open && Boolean(sprintIdSafe);

    const { data: sprintFetched } = useQueryCache<Sprint>({
        queryKey: queryKeys.desenvolvimento.sprints.detail(sprintIdSafe),
        endpoint: API_ENDPOINTS.desenvolvimento.sprints.show(sprintIdSafe),
        enabled: enabled && !sprintProp,
        staleTime: 1 * 60 * 1000,
    });

    const sprint = sprintProp ?? sprintFetched ?? null;

    const { data: retrospectivaData, isLoading: loadingRetrospectiva } = useQueryCache<{
        data: SprintRetrospectiva;
    }>({
        queryKey: queryKeys.desenvolvimento.sprintLegacy.retrospectiva(sprintIdSafe),
        endpoint: API_ENDPOINTS.desenvolvimento.sprints.retrospectiva(sprintIdSafe),
        enabled,
    });

    const { data: usuariosData } = useQueryCache<{ data: Usuario[] }>({
        queryKey: queryKeys.usuariosCatalog.list(),
        endpoint: API_ENDPOINTS.admin.usuarios.index,
        params: { per_page: 1000 },
        enabled,
    });

    const retrospectiva = retrospectivaData?.data;
    const usuarios = usuariosData?.data ?? [];

    useEffect(() => {
        if (!open) {
            return;
        }
        if (retrospectiva) {
            form.setFieldsValue({
                realizado_em: retrospectiva.realizado_em
                    ? dayjs(retrospectiva.realizado_em)
                    : undefined,
                participantes: retrospectiva.participantes,
                o_que_funcionou: retrospectiva.o_que_funcionou,
                o_que_nao_funcionou: retrospectiva.o_que_nao_funcionou,
                melhorias: retrospectiva.melhorias,
            });
            setItensAcao(retrospectiva.itens_acao ?? []);
            return;
        }
        if (!loadingRetrospectiva) {
            form.resetFields();
            setItensAcao([]);
        }
    }, [open, retrospectiva, loadingRetrospectiva, form]);

    const saveMutation = useMutationCache<SprintRetrospectiva, Record<string, unknown>>({
        endpoint: () => API_ENDPOINTS.desenvolvimento.sprints.salvarRetrospectiva(sprintIdSafe),
        method: 'POST',
        invalidateQueries: [
            ['sprint', sprintIdSafe, 'retrospectiva'],
            queryKeys.desenvolvimento.sprints.detail(sprintIdSafe),
        ],
        onSuccess: () => {
            message.success('Retrospectiva da sprint salva com sucesso!');
            onSuccess?.();
            onClose();
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao salvar retrospectiva';
            message.error(errorMessage);
        },
    });

    const handleCancel = () => {
        form.resetFields();
        setItensAcao([]);
        onClose();
    };

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            saveMutation.mutate({
                ...values,
                realizado_em: values.realizado_em
                    ? values.realizado_em.toISOString()
                    : undefined,
                itens_acao: itensAcao.map((item) => ({
                    id: item.id,
                    descricao: item.descricao,
                    responsavel_id: item.responsavel_id,
                    status: item.status,
                    prazo: item.prazo ? dayjs(item.prazo).toISOString() : undefined,
                })),
            });
        } catch {
            // Validação Ant Design — campos destacados no formulário.
        }
    };

    const adicionarItemAcao = () => {
        setItensAcao((prev) => [...prev, { descricao: '', status: 'pendente' }]);
    };

    const removerItemAcao = (index: number) => {
        setItensAcao((prev) => prev.filter((_, i) => i !== index));
    };

    const atualizarItemAcao = (
        index: number,
        campo: keyof ItemAcaoRetrospectiva,
        valor: string | number | null | undefined | Dayjs,
    ) => {
        setItensAcao((prev) => {
            const next = [...prev];
            next[index] = { ...next[index], [campo]: valor };
            return next;
        });
    };

    return (
        <Modal
            title={
                sprint?.nome
                    ? `Sprint Retrospective — ${sprint.nome}`
                    : 'Sprint Retrospective'
            }
            data-testid="projeto-sprint-retrospective-modal"
            open={open}
            onCancel={handleCancel}
            footer={
                <div className={waygestFormModalFooterClassName}>
                    <Button onClick={handleCancel}>Cancelar</Button>
                    <Button
                        type="primary"
                        loading={saveMutation.isPending}
                        onClick={() => void handleSubmit()}
                        icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                    >
                        Salvar
                    </Button>
                </div>
            }
            width={formModalLayout.width ?? 720}
            centered={formModalLayout.centered ?? true}
            className={formModalLayout.className}
            zIndex={formModalLayout.zIndex}
            styles={mergeWaygestFormModalBodyStyles(formModalLayout)}
            destroyOnHidden
            keyboard
            focusTriggerAfterClose
        >
            {sprint ? (
                <div style={{ marginBottom: 16 }}>
                    <Paragraph strong>Síntese para discussão</Paragraph>
                    <Descriptions
                        bordered
                        size="small"
                        column={{ xs: 1, sm: 2 }}
                        style={{ marginTop: 12 }}
                    >
                        <Descriptions.Item label="Período">
                            {sprint.data_inicio && sprint.data_fim
                                ? `${new Date(sprint.data_inicio).toLocaleDateString('pt-BR')} → ${new Date(sprint.data_fim).toLocaleDateString('pt-BR')}`
                                : '—'}
                        </Descriptions.Item>
                        <Descriptions.Item label="Estado">
                            <Tag
                                color={
                                    sprint.status === 'concluida'
                                        ? 'green'
                                        : sprint.status === 'ativa'
                                          ? 'blue'
                                          : 'default'
                                }
                            >
                                {statusSprintLabel[sprint.status] ?? sprint.status}
                            </Tag>
                        </Descriptions.Item>
                        <Descriptions.Item label="Velocidade planejada">
                            {sprint.velocidade_planejada ?? '—'}
                        </Descriptions.Item>
                        <Descriptions.Item label="Velocidade real">
                            {sprint.velocidade_real ?? '—'}
                        </Descriptions.Item>
                    </Descriptions>
                </div>
            ) : null}

            <Alert
                type="info"
                showIcon
                style={{ marginBottom: 16 }}
                message="Causa raiz e acionáveis"
                description='Em "O que não funcionou", prefira fatos observáveis. Em "Melhorias", proponha mudanças concretas. Nos itens de ação, defina responsável, prazo e estado para acompanhamento na próxima sprint.'
            />

            <Form form={form} layout="vertical" size="large">
                <Form.Item name="realizado_em" label="Data e hora da retrospectiva">
                    <DatePicker
                        showTime
                        format="DD/MM/YYYY HH:mm"
                        style={{ width: '100%' }}
                    />
                </Form.Item>

                <Form.Item name="participantes" label="Participantes">
                    <Select
                        mode="multiple"
                        placeholder="Selecione os participantes"
                        showSearch
                        optionFilterProp="label"
                        options={usuarios.map((usuario) => ({
                            value: usuario.id,
                            label: usuario.nome,
                        }))}
                    />
                </Form.Item>

                <Form.Item
                    name="o_que_funcionou"
                    label="O que funcionou bem"
                    extra="Evidências e práticas a manter."
                >
                    <TextArea rows={3} placeholder="Liste o que funcionou bem nesta sprint..." />
                </Form.Item>

                <Form.Item
                    name="o_que_nao_funcionou"
                    label="O que não funcionou (sintomas e fatos)"
                    extra="Evite culpar pessoas; descreva o que aconteceu e o impacto."
                >
                    <TextArea
                        rows={3}
                        placeholder="Liste o que não funcionou bem nesta sprint..."
                    />
                </Form.Item>

                <Form.Item
                    name="melhorias"
                    label="Melhorias e causas prováveis"
                    extra="Ligue melhorias a causas e a como medir o sucesso na próxima sprint."
                >
                    <TextArea
                        rows={3}
                        placeholder="Descreva as melhorias sugeridas para as próximas sprints..."
                    />
                </Form.Item>

                <Card
                    size="small"
                    title="Itens de ação"
                    extra={
                        <Button
                            type="dashed"
                            size="small"
                            icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                            onClick={adicionarItemAcao}
                        >
                            Adicionar item
                        </Button>
                    }
                    style={{ marginTop: 8 }}
                >
                    <List
                        dataSource={itensAcao}
                        locale={{ emptyText: 'Nenhum item de ação adicionado' }}
                        renderItem={(item, index) => (
                            <List.Item
                                actions={[
                                    <Button
                                        key="delete"
                                        type="link"
                                        danger
                                        icon={<Trash2 size={ICON_SIZE_MD} aria-hidden />}
                                        onClick={() => removerItemAcao(index)}
                                        aria-label="Remover item de ação"
                                    >
                                        Remover
                                    </Button>,
                                ]}
                            >
                                <Space direction="vertical" style={{ width: '100%' }} size={8}>
                                    <Input
                                        value={item.descricao}
                                        onChange={(e) =>
                                            atualizarItemAcao(index, 'descricao', e.target.value)
                                        }
                                        placeholder="Descrição do item de ação"
                                    />
                                    <Space wrap>
                                        <Select
                                            value={item.responsavel_id}
                                            onChange={(value) =>
                                                atualizarItemAcao(index, 'responsavel_id', value)
                                            }
                                            placeholder="Responsável"
                                            style={{ minWidth: 180 }}
                                            allowClear
                                            options={usuarios.map((usuario) => ({
                                                value: usuario.id,
                                                label: usuario.nome,
                                            }))}
                                        />
                                        <Select
                                            value={item.status ?? 'pendente'}
                                            onChange={(value) =>
                                                atualizarItemAcao(index, 'status', value)
                                            }
                                            placeholder="Estado"
                                            style={{ width: 160 }}
                                            options={[
                                                { value: 'pendente', label: 'Pendente' },
                                                {
                                                    value: 'em_andamento',
                                                    label: 'Em andamento',
                                                },
                                                { value: 'concluida', label: 'Concluída' },
                                            ]}
                                        />
                                        <DatePicker
                                            value={item.prazo ? dayjs(item.prazo) : undefined}
                                            onChange={(date) =>
                                                atualizarItemAcao(
                                                    index,
                                                    'prazo',
                                                    date ? date.toISOString() : null,
                                                )
                                            }
                                            placeholder="Prazo"
                                            style={{ width: 160 }}
                                        />
                                    </Space>
                                </Space>
                            </List.Item>
                        )}
                    />
                </Card>
            </Form>
        </Modal>
    );
}