'use client';

import React from 'react';
import { Space, Typography, Tag } from 'antd';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { getKanbanPrioridadeTagColor } from './kanbanDisplay';
import type { TarefaKanban } from './types';

const { Text } = Typography;

export function ProjetoKanbanTarefaCard({
    tarefa,
    onEdit,
}: {
    tarefa: TarefaKanban;
    onEdit: (t: TarefaKanban) => void;
}) {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
        id: tarefa.id.toString(),
    });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.5 : 1,
    };

    return (
        <div
            ref={setNodeRef}
            {...attributes}
            {...listeners}
            onClick={() => onEdit(tarefa)}
            style={{
                ...style,
                background: 'white',
                padding: '12px',
                marginBottom: '8px',
                borderRadius: '8px',
                border: '1px solid #e8e8e8',
                cursor: 'grab',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
            }}
        >
            <div style={{ marginBottom: '8px' }}>
                <Text strong style={{ fontSize: '14px' }}>
                    {tarefa.titulo}
                </Text>
            </div>
            {tarefa.descricao && (
                <Text
                    type="secondary"
                    style={{ fontSize: '12px', display: 'block', marginBottom: '8px' }}
                >
                    {tarefa.descricao.length > 60
                        ? `${tarefa.descricao.substring(0, 60)}...`
                        : tarefa.descricao}
                </Text>
            )}
            <Space wrap>
                <Tag color={getKanbanPrioridadeTagColor(tarefa.prioridade)}>
                    {tarefa.prioridade.toUpperCase()}
                </Tag>
                {tarefa.categoria && <Tag>{tarefa.categoria}</Tag>}
            </Space>
            {tarefa.responsavel && (
                <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
                    <Text type="secondary">👤 {tarefa.responsavel.nome}</Text>
                </div>
            )}
        </div>
    );
}