import React from 'react';
import { Button, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { ChaveTarefa } from '@/features/tarefas/components';
import type { Tarefa } from '@/types/projeto';

export function getEpicoDetalheStatusTagColor(status?: string): string {
    switch (status?.toLowerCase()) {
        case 'concluido':
        case 'concluída':
            return 'success';
        case 'em_andamento':
        case 'em andamento':
            return 'processing';
        case 'planejamento':
            return 'default';
        case 'pausado':
            return 'warning';
        case 'cancelado':
            return 'error';
        default:
            return 'default';
    }
}

export function getEpicoDetalhePrioridadeTagColor(prioridade: string): string {
    switch (prioridade?.toLowerCase()) {
        case 'critica':
            return 'red';
        case 'alta':
            return 'orange';
        case 'media':
            return 'blue';
        case 'baixa':
            return 'default';
        default:
            return 'default';
    }
}

export function buildEpicoDetalheTarefasColumns(opts: {
    onNavigateTarefa: (tarefaId: number) => void;
}): ColumnsType<Tarefa> {
    const { onNavigateTarefa } = opts;
    return [
        {
            title: 'Chave',
            dataIndex: 'chave_tarefa',
            key: 'chave_tarefa',
            width: 120,
            sorter: (a, b) =>
                String(a.chave_tarefa ?? '').localeCompare(String(b.chave_tarefa ?? ''), 'pt'),
            render: (chave: string) =>
                chave ? <ChaveTarefa chave={chave} showCopy={false} /> : '-',
        },
        {
            title: 'Título',
            dataIndex: 'titulo',
            key: 'titulo',
            sorter: (a, b) => String(a.titulo ?? '').localeCompare(String(b.titulo ?? ''), 'pt'),
            render: (titulo: string, record: Tarefa) => (
                <Button type="link" onClick={() => onNavigateTarefa(record.id)}>
                    {titulo}
                </Button>
            ),
        },
        {
            title: 'Tipo',
            dataIndex: 'tipo_tarefa',
            key: 'tipo_tarefa',
            width: 120,
            sorter: (a, b) =>
                String(a.tipo_tarefa?.nome ?? a.tipo_tarefa?.chave ?? '').localeCompare(
                    String(b.tipo_tarefa?.nome ?? b.tipo_tarefa?.chave ?? ''),
                    'pt'
                ),
            render: (tipoTarefa?: { nome: string; chave: string }) =>
                tipoTarefa ? (
                    <Tag color="blue">
                        {tipoTarefa.chave} - {tipoTarefa.nome}
                    </Tag>
                ) : (
                    '-'
                ),
        },
        {
            title: 'Status',
            dataIndex: 'status',
            key: 'status',
            width: 120,
            sorter: (a, b) => String(a.status ?? '').localeCompare(String(b.status ?? ''), 'pt'),
            render: (status: string) => (
                <Tag color={getEpicoDetalheStatusTagColor(status)}>{status}</Tag>
            ),
        },
        {
            title: 'Prioridade',
            dataIndex: 'prioridade',
            key: 'prioridade',
            width: 100,
            sorter: (a, b) =>
                String(a.prioridade ?? '').localeCompare(String(b.prioridade ?? ''), 'pt'),
            render: (prioridade: string) => (
                <Tag color={getEpicoDetalhePrioridadeTagColor(prioridade)}>{prioridade}</Tag>
            ),
        },
        {
            title: 'Responsável',
            dataIndex: 'responsavel',
            key: 'responsavel',
            width: 150,
            sorter: (a, b) =>
                String(a.responsavel?.nome ?? '').localeCompare(String(b.responsavel?.nome ?? ''), 'pt'),
            render: (responsavel?: { nome: string }) => responsavel?.nome || '-',
        },
    ];
}