import { FileText, Menu as MenuIcon } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import {
    Button,
    Space,
    Tag,
    Typography,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { formatDate } from '@/lib/utils/export';
import dayjs from 'dayjs';
import type { TemplateProjeto } from './types';

const { Text } = Typography;

export function buildProjetosTemplatesColumns(opts: {
    onOpenOpcoes: (record: TemplateProjeto) => void;
}): ColumnsType<TemplateProjeto> {
    const { onOpenOpcoes } = opts;
    return [
        {
            title: 'Nome',
            dataIndex: 'nome',
            key: 'nome',
            sorter: (a, b) => String(a.nome ?? '').localeCompare(String(b.nome ?? ''), 'pt'),
            render: (text: string, record: TemplateProjeto) => (
                <Space>
                    <FileText size={ICON_SIZE_MD} aria-hidden />
                    <span style={{ fontWeight: 600, color: '#2c3e50' }}>{text}</span>
                    <Tag color="blue">{record.categoria}</Tag>
                </Space>
            )},
        {
            title: 'Descrição',
            dataIndex: 'descricao',
            key: 'descricao',
            sorter: (a, b) =>
                String(a.descricao ?? '').localeCompare(String(b.descricao ?? ''), 'pt'),
            render: (text: string) => text || '-'},
        {
            title: 'Estrutura',
            dataIndex: 'estrutura',
            key: 'estrutura',
            sorter: (a, b) => a.estrutura.etapas.length - b.estrutura.etapas.length,
            render: (estrutura: TemplateProjeto['estrutura']) => (
                <Space direction="vertical">
                    <Text type="secondary">Etapas: {estrutura.etapas.length}</Text>
                    <Text type="secondary">Tecnologias: {estrutura.tecnologias.length}</Text>
                </Space>
            )},
        {
            title: 'Criado em',
            dataIndex: 'created_at',
            key: 'created_at',
            sorter: (a, b) => dayjs(a.created_at).valueOf() - dayjs(b.created_at).valueOf(),
            render: (date: string) => formatDate(date, true)},
        {
            title: '',
            key: 'menu',
            width: 56,
            align: 'center',
            onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
            render: (_: unknown, record: TemplateProjeto) => (
                <Button
                    type="text"
                    size="small"
                    icon={<MenuIcon size={ICON_SIZE_MD} aria-hidden />}
                    onClick={() => onOpenOpcoes(record)}
                    aria-label="Opções"
                />
            )},
    ];
}