'use client';

import React from 'react';
import { Col, Badge } from 'antd';
import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import ContentCard from '@/components/layouts/ContentCard';
import { ProjetoKanbanTarefaCard } from './ProjetoKanbanTarefaCard';
import { getKanbanColunaAccentColor } from './kanbanDisplay';
import type { TarefaKanban } from './types';

export function ProjetoKanbanColuna({
    id,
    titulo,
    tarefas = [],
    onEdit,
    fullWidth = false,
}: {
    id: string;
    titulo: string;
    tarefas: TarefaKanban[];
    onEdit: (tarefa: TarefaKanban) => void;
    /** Mobile: uma coluna a 100% (sem empilhar várias no mesmo viewport). */
    fullWidth?: boolean;
}) {
    const { setNodeRef, isOver } = useDroppable({ id });
    const sortableIds = tarefas.map((t) => t.id.toString());
    const accent = getKanbanColunaAccentColor(titulo);

    return (
        <Col xs={24} {...(fullWidth ? {} : { sm: 12, md: 8, lg: 6 })}>
            <ContentCard
                title={titulo}
                headerActions={<Badge count={tarefas.length} style={{ backgroundColor: accent }} />}
                style={{
                    height: '100%',
                    borderTop: `4px solid ${accent}`,
                    backgroundColor: isOver ? '#f0f9ff' : 'white',
                }}
            >
                <div
                    ref={setNodeRef}
                    style={{ minHeight: fullWidth ? 'min(60vh, 480px)' : '200px' }}
                    data-testid={fullWidth ? 'projeto-kanban-coluna-mobile' : undefined}
                >
                    <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
                        {tarefas.map((tarefa) => (
                            <ProjetoKanbanTarefaCard key={tarefa.id} tarefa={tarefa} onEdit={onEdit} />
                        ))}
                        {tarefas.length === 0 && (
                            <div style={{ textAlign: 'center', padding: '20px', color: '#999' }}>
                                Nenhuma tarefa
                            </div>
                        )}
                    </SortableContext>
                </div>
            </ContentCard>
        </Col>
    );
}