'use client';

import React, { useMemo } from 'react';
import { FileText, Menu as MenuIcon } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { Badge, Button, Select, Space, Tag, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { formatDate } from '@/lib/utils/export';
import dayjs from 'dayjs';
import type { PaginaWebsite, PaginaWebsiteStatusAprovacao } from '@/types/projeto';
import {
    PRIORIDADE_OPCOES,
    STATUS_APROVACAO_OPCOES,
    STATUS_OPCOES,
    TIPO_OPCOES,
} from '../constants';
import { getPrioridadeColor, getStatusAprovacaoColor, getStatusColor, getTipoColor } from '../paginasSiteHelpers';

export type UsePaginasSiteColumnsParams = {
    canEditar: boolean;
    permsLoading: boolean;
    tooltipSemPermissao: (acao: string) => string | undefined;
    handleStatusAprovacaoChange: (pagina: PaginaWebsite, novoStatus: PaginaWebsiteStatusAprovacao) => void;
    statusAprovacaoPending: boolean;
    statusAprovacaoUpdatingId: number | null;
    onOpenOpcoes: (record: PaginaWebsite) => void;
};

export function usePaginasSiteColumns({
    canEditar,
    permsLoading,
    tooltipSemPermissao,
    handleStatusAprovacaoChange,
    statusAprovacaoPending,
    statusAprovacaoUpdatingId,
    onOpenOpcoes,
}: UsePaginasSiteColumnsParams): ColumnsType<PaginaWebsite> {
    return useMemo(
        (): ColumnsType<PaginaWebsite> => [
            {
                title: 'Título',
                dataIndex: 'titulo',
                key: 'titulo',
                sorter: (a, b) =>
                    String(a.titulo ?? a.slug ?? '').localeCompare(
                        String(b.titulo ?? b.slug ?? ''),
                        'pt',
                    ),
                render: (titulo: string, record: PaginaWebsite) => (
                    <Space>
                        <FileText size={ICON_SIZE_MD} style={{ color: '#1c84c6' }} aria-hidden />
                        <span style={{ fontWeight: 600, color: '#2c3e50' }}>
                            {titulo || record.slug || '—'}
                        </span>
                    </Space>
                ),
            },
            {
                title: 'Slug / URL',
                dataIndex: 'slug',
                key: 'slug',
                width: 180,
                ellipsis: true,
                sorter: (a, b) => String(a.slug ?? '').localeCompare(String(b.slug ?? ''), 'pt'),
                render: (slug: string) => (
                    <code style={{ fontSize: 12, color: '#666' }}>{slug || '—'}</code>
                ),
            },
            {
                title: 'Tipo',
                dataIndex: 'tipo',
                key: 'tipo',
                width: 120,
                sorter: (a, b) => String(a.tipo ?? '').localeCompare(String(b.tipo ?? ''), 'pt'),
                render: (tipo: string) => (
                    <Tag color={getTipoColor(tipo)}>
                        {TIPO_OPCOES.find((o) => o.value === tipo)?.label ?? tipo}
                    </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={getStatusColor(status)}>
                        {STATUS_OPCOES.find((o) => o.value === status)?.label ?? status}
                    </Tag>
                ),
            },
            {
                title: 'Aprovação',
                dataIndex: 'status_aprovacao',
                key: 'status_aprovacao',
                width: 150,
                sorter: (a, b) =>
                    String(a.status_aprovacao ?? 'rascunho').localeCompare(
                        String(b.status_aprovacao ?? 'rascunho'),
                        'pt',
                    ),
                onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
                render: (_: unknown, record: PaginaWebsite) => {
                    const value = record.status_aprovacao ?? 'rascunho';
                    const label =
                        STATUS_APROVACAO_OPCOES.find((o) => o.value === value)?.label ?? value;
                    const auditHint =
                        value === 'aprovado' && record.aprovado_por?.nome
                            ? `Aprovado por ${record.aprovado_por.nome}${
                                  record.aprovado_em
                                      ? ` em ${formatDate(record.aprovado_em, true)}`
                                      : ''
                              }`
                            : undefined;

                    if (canEditar) {
                        const select = (
                            <Select<PaginaWebsiteStatusAprovacao>
                                size="small"
                                style={{ minWidth: 130, maxWidth: '100%' }}
                                value={value}
                                options={STATUS_APROVACAO_OPCOES}
                                onChange={(novo) => handleStatusAprovacaoChange(record, novo)}
                                loading={
                                    statusAprovacaoPending && statusAprovacaoUpdatingId === record.id
                                }
                                disabled={permsLoading}
                                data-testid={`pagina-status-aprovacao-${record.id}`}
                                aria-label={`Aprovação de ${record.titulo || record.slug}`}
                            />
                        );
                        return auditHint ? <Tooltip title={auditHint}>{select}</Tooltip> : select;
                    }

                    const tag = (
                        <Badge
                            status={
                                value === 'aprovado'
                                    ? 'success'
                                    : value === 'rejeitado'
                                      ? 'error'
                                      : value === 'em_revisao'
                                        ? 'processing'
                                        : 'default'
                            }
                            text={<Tag color={getStatusAprovacaoColor(value)}>{label}</Tag>}
                        />
                    );
                    return (
                        <Tooltip
                            title={
                                auditHint ?? tooltipSemPermissao('alterar a aprovação de conteúdo')
                            }
                        >
                            {tag}
                        </Tooltip>
                    );
                },
            },
            {
                title: 'Responsável atual',
                key: 'responsavel_atual',
                width: 160,
                sorter: (a, b) =>
                    String(
                        a.responsavel_atual?.nome ??
                            a.responsaveis?.dev?.nome ??
                            a.responsaveis?.conteudo?.nome ??
                            '',
                    ).localeCompare(
                        String(
                            b.responsavel_atual?.nome ??
                                b.responsaveis?.dev?.nome ??
                                b.responsaveis?.conteudo?.nome ??
                                '',
                        ),
                        'pt',
                    ),
                render: (_: unknown, record: PaginaWebsite) =>
                    record.responsavel_atual?.nome ??
                    record.responsaveis?.dev?.nome ??
                    record.responsaveis?.conteudo?.nome ??
                    '—',
            },
            {
                title: 'Última atualização',
                dataIndex: 'updated_at',
                key: 'updated_at',
                width: 120,
                sorter: (a, b) => dayjs(a.updated_at).valueOf() - dayjs(b.updated_at).valueOf(),
                render: (date: string) => (date ? formatDate(date, true) : '—'),
            },
            {
                title: 'Prioridade',
                dataIndex: 'prioridade',
                key: 'prioridade',
                width: 100,
                sorter: (a, b) =>
                    String(a.prioridade ?? '').localeCompare(String(b.prioridade ?? ''), 'pt'),
                render: (p: string) =>
                    p ? (
                        <Tag color={getPrioridadeColor(p)}>
                            {PRIORIDADE_OPCOES.find((o) => o.value === p)?.label ?? p}
                        </Tag>
                    ) : (
                        '—'
                    ),
            },
            {
                title: 'Ambiente',
                dataIndex: 'ambiente',
                key: 'ambiente',
                width: 100,
                sorter: (a, b) => String(a.ambiente ?? '').localeCompare(String(b.ambiente ?? ''), 'pt'),
                render: (amb: string) =>
                    amb ? (
                        <Tag>{amb === 'producao' ? 'Produção' : amb === 'homolog' ? 'Homolog' : amb}</Tag>
                    ) : (
                        '—'
                    ),
            },
            {
                title: 'Tags',
                key: 'tags',
                width: 140,
                sorter: (a, b) =>
                    String([...(a.tags ?? [])].sort().join(',')).localeCompare(
                        String([...(b.tags ?? [])].sort().join(',')),
                        'pt',
                    ),
                render: (_: unknown, record: PaginaWebsite) =>
                    Array.isArray(record.tags) && record.tags.length > 0 ? (
                        <Space size={[0, 4]} wrap>
                            {record.tags.slice(0, 3).map((t) => (
                                <Tag key={t} style={{ margin: 0 }}>
                                    {t}
                                </Tag>
                            ))}
                            {record.tags.length > 3 && <Tag>+{record.tags.length - 3}</Tag>}
                        </Space>
                    ) : (
                        '—'
                    ),
            },
            {
                title: '',
                key: 'menu',
                width: 56,
                align: 'center',
                fixed: 'right',
                onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
                render: (_: unknown, record: PaginaWebsite) => (
                    <Button
                        type="text"
                        size="small"
                        icon={<MenuIcon size={ICON_SIZE_MD} aria-hidden />}
                        onClick={() => onOpenOpcoes(record)}
                        aria-label="Opções"
                    />
                ),
            },
        ],
        [
            canEditar,
            permsLoading,
            tooltipSemPermissao,
            handleStatusAprovacaoChange,
            statusAprovacaoPending,
            statusAprovacaoUpdatingId,
            onOpenOpcoes,
        ],
    );
}