'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { List, Avatar, Typography, Space, Button, Popconfirm, Empty } from 'antd';
import { message } from '@/lib/feedback/message';
import { File, Pencil, Trash2, User } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { Comentario } from '@/types';
import apiClient from '@/lib/api/client';
import { formatDate } from '@/lib/utils/export';
import { DocumentPreview } from '@/components/preview';

interface CommentListProps {
    projetoId: number;
    endpoint: string;
    onCommentAdded?: () => void;
    onCommentUpdated?: () => void;
    onCommentDeleted?: () => void;
    canEdit?: boolean;
    canDelete?: boolean;
}

export function CommentList({
    projetoId,
    endpoint,
    onCommentAdded: _onCommentAdded,
    onCommentUpdated,
    onCommentDeleted,
    canEdit = true,
    canDelete = true,
}: CommentListProps) {
    const [comentarios, setComentarios] = useState<Comentario[]>([]);
    const [loading, setLoading] = useState(false);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [editContent, setEditContent] = useState('');

    const loadComentarios = useCallback(async () => {
        try {
            setLoading(true);
            const response = await apiClient.get<{ data: Comentario[] }>(endpoint);
            setComentarios(response.data.data || []);
        } catch (error) {
            console.error('Erro ao carregar comentários:', error);
        } finally {
            setLoading(false);
        }
    }, [endpoint]);

    useEffect(() => {
        loadComentarios();
    }, [projetoId, endpoint, loadComentarios]);

    const handleDelete = async (id: number) => {
        try {
            await apiClient.delete(`${endpoint}/${id}`);
            message.success('Comentário excluído com sucesso!');
            loadComentarios();
            onCommentDeleted?.();
        } catch (error: unknown) {
            const err = error as { response?: { data?: { message?: string } } };
            message.error(err?.response?.data?.message || 'Erro ao excluir comentário');
        }
    };

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

    const handleSaveEdit = async (id: number) => {
        try {
            await apiClient.put(`${endpoint}/${id}`, { conteudo: editContent });
            message.success('Comentário atualizado com sucesso!');
            setEditingId(null);
            setEditContent('');
            loadComentarios();
            onCommentUpdated?.();
        } catch (error: unknown) {
            const err = error as { response?: { data?: { message?: string } } };
            message.error(err?.response?.data?.message || 'Erro ao atualizar comentário');
        }
    };

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

    const getTipoLabel = (tipo: string) => {
        const labels: Record<string, string> = {
            comentario: 'Comentário',
            atividade: 'Atividade',
            mudanca_status: 'Mudança de Status',
            anexo: 'Anexo',
        };
        return labels[tipo] || tipo;
    };

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

    if (comentarios.length === 0) {
        return <Empty description="Nenhum comentário ainda" />;
    }

    return (
        <List
            loading={loading}
            dataSource={comentarios}
            itemLayout="vertical"
            renderItem={(comentario) => (
                <List.Item
                    key={comentario.id}
                    actions={[
                        canEdit && (
                            <Button
                                key="edit"
                                type="text"
                                size="small"
                                icon={<Pencil size={ICON_SIZE_MD} aria-hidden />}
                                onClick={() => handleEdit(comentario)}
                            >
                                Editar
                            </Button>
                        ),
                        canDelete && (
                            <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"
                            >
                                <Button type="text" size="small" danger icon={<Trash2 size={ICON_SIZE_MD} aria-hidden />}>
                                    Excluir
                                </Button>
                            </Popconfirm>
                        ),
                    ].filter(Boolean)}
                >
                    <List.Item.Meta
                        avatar={
                            <Avatar icon={<User size={ICON_SIZE_MD} aria-hidden />} src={comentario.usuario?.avatar}>
                                {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 || 'comentario')}
                                </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)}
                                        >
                                            Salvar
                                        </Button>
                                        <Button size="small" onClick={handleCancelEdit}>
                                            Cancelar
                                        </Button>
                                    </Space>
                                </div>
                            ) : (
                                <Typography.Paragraph
                                    style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}
                                >
                                    {comentario.conteudo}
                                </Typography.Paragraph>
                            )
                        }
                    />
                    {comentario.anexos && comentario.anexos.length > 0 && (
                        <div style={{ marginTop: 12 }}>
                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                Anexos:
                            </Typography.Text>
                            <Space wrap style={{ marginTop: 8 }}>
                                {comentario.anexos.map((anexo) => (
                                    <DocumentPreview
                                        key={anexo.id}
                                        url={anexo.url}
                                        filename={anexo.nome}
                                        trigger={
                                            <Button
                                                type="link"
                                                icon={<File size={ICON_SIZE_MD} aria-hidden />}
                                                size="small"
                                            >
                                                {anexo.nome}
                                            </Button>
                                        }
                                    />
                                ))}
                            </Space>
                        </div>
                    )}
                </List.Item>
            )}
        />
    );
}