'use client';

import { MessageCircle, MessageSquare } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useState } from 'react';
import {
    Card,
    List,
    Space,
    Button,
    Empty,
    Spin,
    Divider,
} from 'antd';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import apiClient from '@/lib/api/client';
import { RichCommentEditor } from '@/components/comments/RichCommentEditor/RichCommentEditor';
import { RichCommentDisplay } from '@/components/comments/RichCommentDisplay/RichCommentDisplay';
import { useAuth } from '@/contexts/AuthContext';
import type { ComentarioDisplay } from '@/types/comentario';
import { queryKeys } from '@/lib/cache/queryKeys';

export interface ProjetoComentario {
    id: number;
    projeto_id: number;
    usuario_id?: number;
    comentario_pai_id?: number;
    conteudo: string;
    tipo: string;
    metadados?: { mentions?: number[] };
    editado: boolean;
    created_at: string;
    updated_at: string;
    usuario?: { id: number; nome: string; email: string };
    reactions?: Array<{
        id: number;
        tipo: string;
        usuario_id: number;
        usuario?: { id: number; nome: string };
    }>;
    anexos?: Array<{ id: number; nome_original: string; url: string; tamanho: number }>;
    respostas?: ProjetoComentario[];
}

interface ProjetoCommentsProps {
    projetoId: number | string;
    /** TASK-PSC-055 — desligar fetch/poll fora da tab Comentários. */
    enabled?: boolean;
}

export function ProjetoComments({ projetoId, enabled = true }: ProjetoCommentsProps) {
    const { user } = useAuth();
    const [replyingTo, setReplyingTo] = useState<number | null>(null);
    const [editingId, setEditingId] = useState<number | null>(null);

    const { data: comentariosData, isLoading, refetch } = useQueryCache<{
        data: ProjetoComentario[];
    }>({
        queryKey: queryKeys.projetos.comentarios(projetoId),
        endpoint: API_ENDPOINTS.projetos.comentarios.index(projetoId),
        enabled: !!projetoId && enabled,
        staleTime: 1 * 60 * 1000,
        refetchInterval: enabled ? 30000 : false,
    });

    const { isPending: isCreating } = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.comentarios.store(projetoId),
        method: 'POST',
        invalidateQueries: [['projetos', 'comentarios', projetoId], ['projetos', 'timeline', projetoId]],
        onSuccess: () => {
            refetch();
            setReplyingTo(null);
        },
    });

    const { mutate: _atualizarComentario } = useMutationCache({
        endpoint: (comentarioId: number) => API_ENDPOINTS.projetos.comentarios.update(projetoId, comentarioId),
        method: 'PUT',
        invalidateQueries: [['projetos', 'comentarios', projetoId]],
        onSuccess: () => {
            refetch();
            setEditingId(null);
        },
    });
    void _atualizarComentario;

    const { mutate: deletarComentario } = useMutationCache({
        endpoint: (comentarioId: number) => API_ENDPOINTS.projetos.comentarios.destroy(projetoId, comentarioId),
        method: 'DELETE',
        invalidateQueries: [['projetos', 'comentarios', projetoId], ['projetos', 'timeline', projetoId]],
        onSuccess: () => refetch(),
    });

    const { mutate: toggleReaction } = useMutationCache<unknown, { comentarioId: number; tipo: string }>({
        endpoint: ({ comentarioId }) =>
            API_ENDPOINTS.projetos.comentarios.reaction(projetoId, comentarioId),
        method: 'POST',
        invalidateQueries: [['projetos', 'comentarios', projetoId]],
        onSuccess: () => refetch(),
    });

    const handleSubmit = async (content: string, mentions: number[], attachments: File[]) => {
        const formData = new FormData();
        formData.append('conteudo', content);
        formData.append('metadados', JSON.stringify({ mentions }));
        if (replyingTo) formData.append('comentario_pai_id', replyingTo.toString());
        attachments.forEach((file) => formData.append('anexos[]', file));
        try {
            await apiClient.post(API_ENDPOINTS.projetos.comentarios.store(projetoId), formData);
            refetch();
            setReplyingTo(null);
        } catch (error) {
            console.error('Erro ao criar comentário:', error);
        }
    };

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

    return (
        <Card
            title={
                <Space>
                    <MessageCircle />
                    <span>Comentários ({comentarios.length})</span>
                </Space>
            }
        >
            <RichCommentEditor
                projetoId={projetoId as number}
                onSubmit={handleSubmit}
                loading={isCreating}
                placeholder="Adicione um comentário... (use @ para mencionar)"
            />
            <Divider />
            {isLoading ? (
                <div style={{ textAlign: 'center', padding: '40px' }}>
                    <Spin />
                </div>
            ) : comentarios.length === 0 ? (
                <Empty description="Nenhum comentário ainda. Seja o primeiro a comentar!" />
            ) : (
                <List
                    dataSource={comentarios}
                    renderItem={(comentario) => (
                        <List.Item style={{ padding: '16px 0', borderBottom: '1px solid #f0f0f0' }}>
                            <div style={{ width: '100%' }}>
                                <RichCommentDisplay
                                    comentario={{
                                        id: comentario.id,
                                        conteudo: comentario.conteudo,
                                        created_at: comentario.created_at,
                                        updated_at: comentario.updated_at,
                                        usuario: comentario.usuario
                                            ? {
                                                  id: comentario.usuario.id,
                                                  nome: comentario.usuario.nome,
                                                  email: comentario.usuario.email,
                                              }
                                            : undefined,
                                        reactions: comentario.reactions,
                                        anexos: comentario.anexos?.map((anexo) => ({
                                            id: anexo.id,
                                            nome: anexo.nome_original,
                                            url: anexo.url,
                                            tipo: anexo.url.split('.').pop() || '',
                                            tamanho: anexo.tamanho,
                                        })),
                                        metadados: comentario.metadados,
                                    } as ComentarioDisplay}
                                    currentUserId={user?.id}
                                    onEdit={editingId === comentario.id ? undefined : () => setEditingId(comentario.id)}
                                    onDelete={() => deletarComentario(comentario.id)}
                                    onReaction={(id, tipo) => toggleReaction({ comentarioId: id, tipo })}
                                    usuarios={[]}
                                    canEdit={comentario.usuario_id === user?.id}
                                    canDelete={comentario.usuario_id === user?.id}
                                />
                                <div style={{ marginTop: 8, marginLeft: 48 }}>
                                    <Button
                                        type="link"
                                        size="small"
                                        icon={<MessageSquare />}
                                        onClick={() => setReplyingTo(replyingTo === comentario.id ? null : comentario.id)}
                                    >
                                        {replyingTo === comentario.id ? 'Cancelar' : 'Responder'}
                                    </Button>
                                </div>
                                {replyingTo === comentario.id && (
                                    <div style={{ marginTop: 16, marginLeft: 48, padding: 16, backgroundColor: '#fafafa', borderRadius: 4 }}>
                                        <RichCommentEditor
                                            projetoId={projetoId as number}
                                            onSubmit={(content, mentions, attachments) => {
                                                const fd = new FormData();
                                                fd.append('conteudo', content);
                                                fd.append('comentario_pai_id', comentario.id.toString());
                                                fd.append('metadados', JSON.stringify({ mentions }));
                                                attachments.forEach((file) => fd.append('anexos[]', file));
                                                void apiClient
                                                    .post(API_ENDPOINTS.projetos.comentarios.store(projetoId), fd)
                                                    .then(() => {
                                                        refetch();
                                                        setReplyingTo(null);
                                                    })
                                                    .catch((err) => console.error('Erro ao criar resposta:', err));
                                            }}
                                            loading={isCreating}
                                            placeholder="Escreva uma resposta..."
                                        />
                                    </div>
                                )}
                                {comentario.respostas && comentario.respostas.length > 0 && (
                                    <div style={{ marginTop: 16, marginLeft: 48, paddingLeft: 16, borderLeft: '2px solid #e8e8e8' }}>
                                        {comentario.respostas.map((resposta) => (
                                            <div key={resposta.id} style={{ marginBottom: 16 }}>
                                                <RichCommentDisplay
                                                    comentario={{
                                                        id: resposta.id,
                                                        conteudo: resposta.conteudo,
                                                        created_at: resposta.created_at,
                                                        updated_at: resposta.updated_at,
                                                        usuario: resposta.usuario
                                                            ? {
                                                                  id: resposta.usuario.id,
                                                                  nome: resposta.usuario.nome,
                                                                  email: resposta.usuario.email,
                                                              }
                                                            : undefined,
                                                        reactions: resposta.reactions,
                                                        anexos: resposta.anexos?.map((anexo) => ({
                                                            id: anexo.id,
                                                            nome: anexo.nome_original,
                                                            url: anexo.url,
                                                            tipo: anexo.url.split('.').pop() || '',
                                                            tamanho: anexo.tamanho,
                                                        })),
                                                        metadados: resposta.metadados,
                                                    }}
                                                    currentUserId={user?.id}
                                                    onEdit={editingId === resposta.id ? undefined : () => setEditingId(resposta.id)}
                                                    onDelete={() => deletarComentario(resposta.id)}
                                                    onReaction={(id, tipo) => toggleReaction({ comentarioId: id, tipo })}
                                                    usuarios={[]}
                                                    canEdit={resposta.usuario_id === user?.id}
                                                    canDelete={resposta.usuario_id === user?.id}
                                                />
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </List.Item>
                    )}
                />
            )}
        </Card>
    );
}