import React from 'react';
import { Space, Typography, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TarefaMetrica } from './types';

const { Text } = Typography;

export const DASHBOARD_METRICAS_CHART_COLORS = [
    '#1890ff',
    '#52c41a',
    '#faad14',
    '#f5222d',
    '#722ed1',
    '#13c2c2',
];

export function getDashboardMetricasStatusTagColor(status: string): string {
    const colors: Record<string, string> = {
        novo: 'default',
        em_andamento: 'processing',
        concluida: 'success',
        pendente: 'warning',
        cancelada: 'default',
    };
    return colors[status] || 'default';
}

export function getDashboardMetricasPrioridadeTagColor(prioridade: string): string {
    const colors: Record<string, string> = {
        baixa: 'default',
        media: 'blue',
        alta: 'orange',
        critica: 'red',
    };
    return colors[prioridade] || 'default';
}

export function buildDashboardMetricasTarefasColumns(): ColumnsType<TarefaMetrica> {
    return [
        {
            title: 'Tarefa',
            dataIndex: 'titulo',
            key: 'titulo',
            sorter: (a, b) =>
                String(a.titulo ?? '').localeCompare(String(b.titulo ?? ''), 'pt'),
            render: (text: string, record: TarefaMetrica) => (
                <Space>
                    <Text strong>{text}</Text>
                    <Tag color={getDashboardMetricasStatusTagColor(record.status)}>
                        {record.status.replace('_', ' ').toUpperCase()}
                    </Tag>
                </Space>
            ),
        },
        {
            title: 'Prioridade',
            dataIndex: 'prioridade',
            key: 'prioridade',
            sorter: (a, b) =>
                String(a.prioridade ?? '').localeCompare(String(b.prioridade ?? ''), 'pt'),
            render: (prioridade: string) => (
                <Tag color={getDashboardMetricasPrioridadeTagColor(prioridade)}>
                    {prioridade.toUpperCase()}
                </Tag>
            ),
        },
        {
            title: 'Responsável',
            key: 'responsavel',
            sorter: (a, b) =>
                String(a.responsavel?.nome ?? '').localeCompare(
                    String(b.responsavel?.nome ?? ''),
                    'pt'
                ),
            render: (_: unknown, record: TarefaMetrica) => record.responsavel?.nome || '-',
        },
        {
            title: 'Progresso',
            key: 'progresso',
            sorter: (a, b) => (a.progresso_percentual ?? 0) - (b.progresso_percentual ?? 0),
            render: (_: unknown, record: TarefaMetrica) => (
                <div>
                    <div style={{ marginBottom: '4px' }}>{record.progresso_percentual || 0}%</div>
                    <div
                        style={{
                            width: '100px',
                            height: '8px',
                            background: '#f0f0f0',
                            borderRadius: '4px',
                            overflow: 'hidden',
                        }}
                    >
                        <div
                            style={{
                                width: `${record.progresso_percentual || 0}%`,
                                height: '100%',
                                background:
                                    record.progresso_percentual === 100 ? '#52c41a' : '#1890ff',
                                transition: 'width 0.3s',
                            }}
                        />
                    </div>
                </div>
            ),
        },
    ];
}