'use client';

import React, { useState } from 'react';
import {
    Avatar,
    Typography,
    Space,
    Button,
    Popover,
    Tooltip,
    Popconfirm,
} from 'antd';
import type { LucideIcon } from 'lucide-react';
import {
    CheckCircle2,
    File,
    Heart,
    Pencil,
    Smile,
    ThumbsUp,
    Trash2,
    User,
} from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { DocumentPreview } from '@/components/preview';
import { formatDate } from '@/lib/utils/export';
import ReactMarkdown from 'react-markdown';
import { LazyCodeBlockHighlighter } from '@/components/lazy';
import type { Comentario } from '@/types';

const { Paragraph, Text } = Typography;

interface RichCommentDisplayProps {
    comentario: Comentario & {
        reactions?: Array<{
            tipo: string;
            usuario_id: number;
            usuario?: { id: number; nome: string };
        }>;
        anexos?: Array<{
            id: number;
            nome: string;
            url: string;
            tipo: string;
            tamanho: number;
        }>;
        metadados?: {
            mentions?: number[];
            reactions?: Array<{ tipo: string; usuario_id: number }>;
        };
    };
    currentUserId?: number;
    onEdit?: (comentario: Comentario) => void;
    onDelete?: (id: number) => void;
    onReaction?: (comentarioId: number, tipo: string) => void;
    usuarios?: Array<{ id: number; nome: string; email: string }>;
    canEdit?: boolean;
    canDelete?: boolean;
}

const REACTION_TYPES: Array<{ tipo: string; icon: LucideIcon; label: string; emoji: string }> = [
    { tipo: 'like', icon: ThumbsUp, label: 'Curtir', emoji: '👍' },
    { tipo: 'heart', icon: Heart, label: 'Coração', emoji: '❤️' },
    { tipo: 'smile', icon: Smile, label: 'Sorriso', emoji: '😊' },
    { tipo: 'check', icon: CheckCircle2, label: 'Confirmar', emoji: '✅' },
];

export function RichCommentDisplay({
    comentario,
    currentUserId,
    onEdit,
    onDelete,
    onReaction,
    usuarios = [],
    canEdit = true,
    canDelete = true,
}: RichCommentDisplayProps) {
    const [showReactions, setShowReactions] = useState(false);

    // Processar conteúdo com mentions
    const processContent = (content: string): string => {
        // Substituir @[id](nome) por @nome com link
        return content.replace(/@\[(\d+)\]\(([^)]+)\)/g, (match, id, nome) => {
            const usuario = usuarios.find((u) => u.id === parseInt(id, 10));
            return usuario ? `[@${usuario.nome}](/usuarios/${id})` : `@${nome}`;
        });
    };

    // Obter reações do comentário
    const reactions = comentario.reactions || comentario.metadados?.reactions || [];
    const reactionCounts = reactions.reduce((acc, r) => {
        acc[r.tipo] = (acc[r.tipo] || 0) + 1;
        return acc;
    }, {} as Record<string, number>);

    const userReactions = reactions.filter((r: any) => r.usuario_id === currentUserId);

    const handleReaction = (tipo: string) => {
        if (onReaction) {
            onReaction(comentario.id, tipo);
        }
        setShowReactions(false);
    };

    const processedContent = processContent(comentario.conteudo);

    return (
        <div style={{ marginBottom: 16 }}>
            <Space align="start" style={{ width: '100%' }}>
                <Avatar icon={<User size={ICON_SIZE_MD} aria-hidden />} src={comentario.usuario?.avatar}>
                    {comentario.usuario?.nome?.charAt(0).toUpperCase() || 'U'}
                </Avatar>
                <div style={{ flex: 1 }}>
                    {/* Header */}
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                        <Space>
                            <Text strong>{comentario.usuario?.nome || 'Usuário'}</Text>
                            <Text type="secondary" style={{ fontSize: 12 }}>
                                {formatDate(comentario.created_at, true)}
                            </Text>
                        </Space>
                        <Space>
                            {(canEdit || canDelete) && (
                                <>
                                    {canEdit && (
                                        <Button
                                            type="text"
                                            size="small"
                                            icon={<Pencil size={ICON_SIZE_MD} aria-hidden />}
                                            onClick={() => onEdit?.(comentario)}
                                        >
                                            Editar
                                        </Button>
                                    )}
                                    {canDelete && (
                                        <Popconfirm
                                            title="Excluir comentário"
                                            description="Tem certeza que deseja excluir este comentário?"
                                            onConfirm={() => onDelete?.(comentario.id)}
                                            okText="Sim"
                                            cancelText="Não"
                                        >
                                            <Button type="text" size="small" danger icon={<Trash2 size={ICON_SIZE_MD} aria-hidden />}>
                                                Excluir
                                            </Button>
                                        </Popconfirm>
                                    )}
                                </>
                            )}
                        </Space>
                    </div>

                    {/* Conteúdo */}
                    <div
                        style={{
                            background: '#f9f9f9',
                            padding: 12,
                            borderRadius: 4,
                            marginBottom: 8,
                        }}
                    >
                        <ReactMarkdown
                            skipHtml
                            components={{
                                // Code blocks com syntax highlighting
                                code({ node: _node, className, children, ...props }) {
                                    const match = /language-(\w+)/.exec(className || '');
                                    const language = match ? match[1] : '';
                                    const isInline = !className;
                                    const { ref: _ref, ...restProps } = props;
                                    void _ref;
                                    return !isInline && language ? (
                                        <LazyCodeBlockHighlighter
                                            language={language}
                                            value={String(children).replace(/\n$/, '')}
                                        />
                                    ) : (
                                        <code className={className} {...restProps}>
                                            {children}
                                        </code>
                                    );
                                },
                                // Links com mentions
                                a({ node: _node, href, children, ...props }) {
                                    const safeHref =
                                        typeof href === 'string' &&
                                        (href.startsWith('/usuarios/') ||
                                            href.startsWith('/') ||
                                            /^https?:\/\//i.test(href))
                                            ? href
                                            : undefined;

                                    if (!safeHref) {
                                        return <span {...props}>{children}</span>;
                                    }

                                    if (safeHref.startsWith('/usuarios/')) {
                                        return (
                                            <a
                                                href={safeHref}
                                                style={{ color: '#1890ff', fontWeight: 500 }}
                                                {...props}
                                            >
                                                {children}
                                            </a>
                                        );
                                    }
                                    return (
                                        <a
                                            href={safeHref}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            {...props}
                                        >
                                            {children}
                                        </a>
                                    );
                                },
                                // Parágrafos
                                p({ children }) {
                                    return <Paragraph style={{ marginBottom: 8 }}>{children}</Paragraph>;
                                },
                            }}
                        >
                            {processedContent}
                        </ReactMarkdown>
                    </div>

                    {/* Anexos */}
                    {comentario.anexos && comentario.anexos.length > 0 && (
                        <div style={{ marginBottom: 8 }}>
                            <Text type="secondary" style={{ fontSize: 12 }}>
                                Anexos:
                            </Text>
                            <Space wrap style={{ marginTop: 4 }}>
                                {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>
                    )}

                    {/* Reactions */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        {Object.keys(reactionCounts).length > 0 && (
                            <Space>
                                {REACTION_TYPES.map((reaction) => {
                                    const count = reactionCounts[reaction.tipo] || 0;
                                    if (count === 0) return null;
                                    const Icon = reaction.icon;
                                    const isActive = userReactions.some((r: any) => r.tipo === reaction.tipo);
                                    return (
                                        <Tooltip
                                            key={reaction.tipo}
                                            title={`${count} ${reaction.label}(s)`}
                                        >
                                            <Button
                                                type={isActive ? 'primary' : 'text'}
                                                size="small"
                                                icon={<Icon size={ICON_SIZE_MD} aria-hidden />}
                                                onClick={() => handleReaction(reaction.tipo)}
                                                style={{
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    gap: 4,
                                                }}
                                            >
                                                {reaction.emoji} {count}
                                            </Button>
                                        </Tooltip>
                                    );
                                })}
                            </Space>
                        )}
                        <Popover
                            content={
                                <Space direction="vertical">
                                    {REACTION_TYPES.map((reaction) => {
                                        const Icon = reaction.icon;
                                        const isActive = userReactions.some(
                                            (r) => r.tipo === reaction.tipo
                                        );
                                        return (
                                            <Button
                                                key={reaction.tipo}
                                                type={isActive ? 'primary' : 'default'}
                                                icon={<Icon size={ICON_SIZE_MD} aria-hidden />}
                                                onClick={() => handleReaction(reaction.tipo)}
                                                block
                                            >
                                                {reaction.label} {reaction.emoji}
                                            </Button>
                                        );
                                    })}
                                </Space>
                            }
                            title="Adicionar reação"
                            trigger="click"
                            open={showReactions}
                            onOpenChange={setShowReactions}
                        >
                            <Button type="text" size="small">
                                {Object.keys(reactionCounts).length === 0 ? 'Reagir' : '➕'}
                            </Button>
                        </Popover>
                    </div>
                </div>
            </Space>
        </div>
    );
}