'use client';

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

import { Pencil, Trash2, User } from 'lucide-react';
import {
    Avatar,
    Button,
    Card,
    Empty,
    List,
    Popconfirm,
    Space,
    Typography,
} from 'antd';

import { ICON_SIZE_MD } from '@/components/icons';
import React, { useState } from 'react';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { formatDate } from '@/lib/utils/export';
import { CommentForm } from '@/components/comments';
import apiClient from '@/lib/api/client';

interface TarefaComentario {
    id: number;
    tarefa_id: number;
    usuario_id: number | null;
    conteudo: string;
    tipo: string;
    metadados?: Record<string, unknown>;
    usuario?: {
        id: number;
        nome: string;
        email: string;
    };
    created_at: string;
    updated_at: string;
}

interface TarefaComentariosProps {
    tarefaId: string | number;
}

export function TarefaComentarios({ tarefaId }: TarefaComentariosProps) {
    const [editingId, setEditingId] = useState<number | null>(null);
    const [editContent, setEditContent] = useState('');

    // Cache otimizado para carregar comentários
    const {
        data: comentariosData,
        isLoading,
        refetch,
    } = useQueryCache<{
        data: TarefaComentario[];
        current_page: number;
        per_page: number;
        total: number;
        last_page: number;
    }>({
        queryKey: queryKeys.desenvolvimento.tarefas.comentarios(tarefaId),
        endpoint: API_ENDPOINTS.desenvolvimento.tarefas.comentarios.index(tarefaId),
        enabled: !!tarefaId,
        staleTime: 1 * 60 * 1000, // 1 minuto
        gcTime: 5 * 60 * 1000, // 5 minutos
    });

    const queryClient = useQueryClient();

    // Mutation para deletar comentário
    const deleteMutation = useMutation<void, Error, number>({
        mutationFn: async (comentarioId: number) => {
            await apiClient.delete(
                API_ENDPOINTS.desenvolvimento.tarefas.comentarios.destroy(tarefaId, comentarioId)
            );
        },
        onSuccess: () => {
            queryClient.invalidateQueries({
                queryKey: queryKeys.desenvolvimento.tarefas.comentarios(tarefaId),
            });
            message.success('Comentário excluído com sucesso!');
            refetch();
        },
        onError: (err: unknown) => {
            const apiError = err as { response?: { data?: { message?: string } } };
            const errorMessage = apiError?.response?.data?.message || 'Erro ao excluir comentário';
            message.error(errorMessage);
        },
    });

    // Mutation para atualizar comentário
    const updateMutation = useMutation<
        TarefaComentario,
        Error,
        { comentarioId: number; conteudo: string }
    >({
        mutationFn: async ({ comentarioId, conteudo }) => {
            const response = await apiClient.put<TarefaComentario>(
                API_ENDPOINTS.desenvolvimento.tarefas.comentarios.update(tarefaId, comentarioId),
                { conteudo }
            );
            return response.data;
        },
        onSuccess: () => {
            queryClient.invalidateQueries({
                queryKey: queryKeys.desenvolvimento.tarefas.comentarios(tarefaId),
            });
            message.success('Comentário atualizado com sucesso!');
            setEditingId(null);
            setEditContent('');
            refetch();
        },
        onError: (err: unknown) => {
            const apiError = err as { response?: { data?: { message?: string } } };
            const errorMessage =
                apiError?.response?.data?.message || 'Erro ao atualizar comentário';
            message.error(errorMessage);
        },
    });

    const comentarios = comentariosData?.data || [];

    const handleEdit = (comentario: TarefaComentario) => {
        setEditingId(comentario.id);
        setEditContent(comentario.conteudo);
    };

    const handleSaveEdit = (id: number) => {
        updateMutation.mutate({ comentarioId: id, conteudo: editContent });
    };

    const handleCancelEdit = () => {
        setEditingId(null);
        setEditContent('');
    };

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

    const getTipoLabel = (tipo: string) => {
        const labels: Record<string, string> = {
            comentario: 'Comentário',
            observacao: 'Observação',
            duvida: 'Dúvida',
            sistema: 'Sistema',
        };
        return labels[tipo] || tipo;
    };

    if (isLoading && comentarios.length === 0) {
        return <Empty description="Carregando comentários..." />;
    }

    return (
        <div>
            <Card size="small" style={{ marginBottom: 16 }}>
                <CommentForm
                    projetoId={Number(tarefaId)}
                    endpoint={API_ENDPOINTS.desenvolvimento.tarefas.comentarios.store(tarefaId)}
                    onSuccess={() => {
                        refetch();
                    }}
                    placeholder="Digite seu comentário sobre a tarefa..."
                    showAttachments={false}
                />
            </Card>

            {comentarios.length === 0 ? (
                <Empty description="Nenhum comentário ainda" />
            ) : (
                <List
                    loading={isLoading}
                    dataSource={comentarios}
                    itemLayout="vertical"
                    renderItem={(comentario) => (
                        <List.Item
                            key={comentario.id}
                            actions={[
                                <Button
                                    key="edit"
                                    type="text"
                                    size="small"
                                    icon={<Pencil />}
                                    onClick={() => handleEdit(comentario)}
                                    disabled={updateMutation.isPending || deleteMutation.isPending}
                                >
                                    Editar
                                </Button>,
                                <Popconfirm
                                    key="delete"
                                    title="Excluir comentário"
                                    description="Tem certeza que deseja excluir este comentário?"
                                    onConfirm={() => handleDelete(comentario.id)}
                                    okText="Sim"
                                    cancelText="Não"
                                    disabled={updateMutation.isPending || deleteMutation.isPending}
                                >
                                    <Button
                                        type="text"
                                        size="small"
                                        danger
                                        icon={<Trash2 />}
                                        loading={deleteMutation.isPending}
                                        disabled={
                                            updateMutation.isPending || deleteMutation.isPending
                                        }
                                    >
                                        Excluir
                                    </Button>
                                </Popconfirm>,
                            ]}
                        >
                            <List.Item.Meta
                                avatar={
                                    <Avatar icon={<User />} src={comentario.usuario?.email}>
                                        {comentario.usuario?.nome?.charAt(0).toUpperCase()}
                                    </Avatar>
                                }
                                title={
                                    <Space>
                                        <Typography.Text strong>
                                            {comentario.usuario?.nome || 'Usuário'}
                                        </Typography.Text>
                                        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                            {getTipoLabel(comentario.tipo)}
                                        </Typography.Text>
                                        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                            {formatDate(comentario.created_at, true)}
                                        </Typography.Text>
                                    </Space>
                                }
                                description={
                                    editingId === comentario.id ? (
                                        <div>
                                            <textarea
                                                value={editContent}
                                                onChange={(e) => setEditContent(e.target.value)}
                                                style={{
                                                    width: '100%',
                                                    minHeight: 100,
                                                    padding: 8,
                                                    borderRadius: 4,
                                                    border: '1px solid #d9d9d9',
                                                }}
                                            />
                                            <Space style={{ marginTop: 8 }}>
                                                <Button
                                                    size="small"
                                                    type="primary"
                                                    onClick={() => handleSaveEdit(comentario.id)}
                                                    loading={updateMutation.isPending}
                                                >
                                                    Salvar
                                                </Button>
                                                <Button size="small" onClick={handleCancelEdit}>
                                                    Cancelar
                                                </Button>
                                            </Space>
                                        </div>
                                    ) : (
                                        <Typography.Paragraph
                                            style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}
                                        >
                                            {comentario.conteudo}
                                        </Typography.Paragraph>
                                    )
                                }
                            />
                        </List.Item>
                    )}
                />
            )}
        </div>
    );
}