import React from 'react';
import { Space, Tag } from 'antd';
import type { WBSItem, WbsItemStatus, WbsItemTipo } from './types';

const STATUS_CONFIG: Record<string, { color: string; label: string }> = {
    planejado: { color: 'default', label: 'Planejado' },
    em_andamento: { color: 'processing', label: 'Em Andamento' },
    concluido: { color: 'success', label: 'Concluído' },
    cancelado: { color: 'error', label: 'Cancelado' },
};

const TIPO_CONFIG: Record<string, { color: string; label: string }> = {
    projeto: { color: 'purple', label: 'Projeto' },
    fase: { color: 'blue', label: 'Fase' },
    pacote: { color: 'green', label: 'Pacote' },
    tarefa: { color: 'orange', label: 'Tarefa' },
};

export function getWbsStatusTag(status: WbsItemStatus | string) {
    const config = STATUS_CONFIG[status] || { color: 'default', label: status };
    return <Tag color={config.color}>{config.label}</Tag>;
}

export function getWbsTipoTag(tipo: WbsItemTipo | string) {
    const config = TIPO_CONFIG[tipo] || { color: 'default', label: tipo };
    return <Tag color={config.color}>{config.label}</Tag>;
}

export function WbsTreeNodeTitle({ item }: { item: WBSItem }) {
    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
            }}
        >
            <span>
                <span style={{ fontWeight: 500, marginRight: 8 }}>{item.codigo}</span>
                <span>{item.nome}</span>
            </span>
            <Space>
                {getWbsStatusTag(item.status)}
                {getWbsTipoTag(item.tipo)}
            </Space>
        </div>
    );
}