'use client';

import { Tag, Typography } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import {
    getImplantacaoChecklistStatusColor,
    getImplantacaoChecklistStatusLabel,
} from './implantacaoChecklistDisplay';
import type { ImplantacaoChecklistItem } from './types';

const { Text } = Typography;

export type BuildImplantacaoChecklistColumnsParams = {
    onOpenOpcoes: (item: ImplantacaoChecklistItem) => void;
};

/**
 * Colunas da listagem de checklist ACL / cutover.
 */
export function buildImplantacaoChecklistColumns({
    onOpenOpcoes,
}: BuildImplantacaoChecklistColumnsParams): ColumnsType<ImplantacaoChecklistItem> {
    return [
        {
            title: 'Item',
            dataIndex: 'titulo',
            key: 'titulo',
            ellipsis: true,
            render: (titulo: string, record) => (
                <button
                    type="button"
                    onClick={() => onOpenOpcoes(record)}
                    style={{
                        background: 'none',
                        border: 'none',
                        padding: 0,
                        cursor: 'pointer',
                        textAlign: 'left',
                        color: 'inherit',
                        font: 'inherit',
                    }}
                >
                    <Text strong>{titulo}</Text>
                    {record.notas ? (
                        <div>
                            <Text type="secondary" style={{ fontSize: 12 }}>
                                {record.notas.length > 120
                                    ? `${record.notas.slice(0, 120)}…`
                                    : record.notas}
                            </Text>
                        </div>
                    ) : null}
                </button>
            ),
        },
        {
            title: 'Estado',
            dataIndex: 'status',
            key: 'status',
            width: 140,
            render: (status: ImplantacaoChecklistItem['status']) => (
                <Tag color={getImplantacaoChecklistStatusColor(status)}>
                    {getImplantacaoChecklistStatusLabel(status)}
                </Tag>
            ),
        },
        {
            title: 'Dono',
            key: 'owner',
            width: 180,
            ellipsis: true,
            render: (_: unknown, record) => {
                const nome = record.owner?.nome;
                if (!nome) {
                    return <Text type="secondary">—</Text>;
                }
                return <Text>{nome}</Text>;
            },
        },
        {
            title: 'Ordem',
            dataIndex: 'ordem',
            key: 'ordem',
            width: 80,
            render: (ordem: number | null | undefined) =>
                ordem == null ? <Text type="secondary">—</Text> : ordem,
        },
    ];
}