'use client';
import type { MenuProps } from 'antd';

import { Calendar, Ellipsis, Eye, Pencil, User } from 'lucide-react';
import {
    Avatar,
    Button,
    Card,
    Dropdown,
    Space,
    Tag,
    Typography,
} from 'antd';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { useRouter } from 'next/navigation';
import { Tarefa } from '@/types';
import { ChaveTarefa } from '../ChaveTarefa/ChaveTarefa';
import { formatDate } from '@/lib/utils/export';
import { getTarefaStatusLabel } from '@/constants/enums';
import { minhasTarefasTarefaDetalhePath } from '@/lib/routes/desenvolvimentoTarefasNav';
import styles from './CardTarefa.module.scss';

const { Text } = Typography;

const STATUS_COLORS: Record<string, string> = {
    novo: 'processing',
    em_andamento: 'processing',
    code_review: 'warning',
    teste: 'warning',
    concluida: 'success',
    cancelada: 'default',
};

const PRIORIDADE_LABELS: Record<string, string> = {
    baixa: 'Baixa',
    media: 'Média',
    alta: 'Alta',
    critica: 'Crítica',
};

const PRIORIDADE_COLORS: Record<string, string> = {
    baixa: 'default',
    media: 'warning',
    alta: 'error',
    critica: 'error',
};

const tagCompactStyle: React.CSSProperties = {
    margin: 0,
    fontSize: 11,
    lineHeight: '18px',
    padding: '0 7px',
    borderRadius: 6,
};

export interface CardTarefaProps {
    tarefa: Tarefa;
    /** Modo compacto para uso no Kanban (menos informações, sem ações expandidas) */
    compact?: boolean;
    /** Mostrar ações (Ver, Editar, menu) no card. Ignorado quando onCardClick é informado. */
    showActions?: boolean;
    /** Callback ao clicar no card (navegação para detalhe). Se não passar, usa router para Minhas tarefas / tarefa / [id] */
    onVer?: (tarefa: Tarefa) => void;
    /** Quando informado, o clique em todo o card abre este callback (ex.: abrir ModalOpcoes). Oculta o botão de menu. */
    onCardClick?: (tarefa: Tarefa) => void;
    /** Callback ao clicar em Editar (ex.: abrir modal) */
    onEditar?: (tarefa: Tarefa) => void;
    /** Se true, o card inteiro não é clicável (útil quando está dentro de um sortable/drag) */
    disableCardClick?: boolean;
    /** Se true, exibe avatar/foto do responsável (em compact) em vez de só ícone + nome */
    showResponsavelAvatar?: boolean;
    /** Conteúdo extra para arrastar (dnd-kit): ref, attributes, listeners, style */
    dragHandle?: {
        setNodeRef: (element: HTMLElement | null) => void;
        attributes: Record<string, unknown>;
        listeners: Record<string, unknown>;
        style: React.CSSProperties;
    };
}

export function CardTarefa({
    tarefa,
    compact = false,
    showActions = true,
    onVer,
    onCardClick,
    onEditar,
    disableCardClick = false,
    showResponsavelAvatar = false,
    dragHandle,
}: CardTarefaProps) {
    const router = useRouter();
    const useCardClick = !!onCardClick;
    const showMenu = showActions && !compact && !useCardClick;

    const handleVer = (e?: React.MouseEvent) => {
        e?.stopPropagation();
        if (onVer) {
            onVer(tarefa);
        } else {
            router.push(minhasTarefasTarefaDetalhePath(tarefa.id));
        }
    };

    const handleEditar = (e: React.MouseEvent) => {
        e.stopPropagation();
        onEditar?.(tarefa);
    };

    const menuItems: MenuProps['items'] = [
        {
            key: 'ver',
            icon: <Eye />,
            label: 'Ver detalhes',
            onClick: () => handleVer(),
        },
        {
            key: 'editar',
            icon: <Pencil />,
            label: 'Editar',
            onClick: (e) => {
                e.domEvent.stopPropagation();
                onEditar?.(tarefa);
            },
        },
    ];

    const statusLabel = getTarefaStatusLabel(tarefa.status);
    const statusColor = STATUS_COLORS[tarefa.status] ?? 'default';
    const prioridadeLabel = PRIORIDADE_LABELS[tarefa.prioridade] ?? tarefa.prioridade;
    const prioridadeColor = PRIORIDADE_COLORS[tarefa.prioridade] ?? 'default';

    const cardAriaLabel = [
        'Tarefa',
        tarefa.chave_tarefa || `#${tarefa.id}`,
        tarefa.titulo,
        statusLabel,
        prioridadeLabel,
    ]
        .filter(Boolean)
        .join('. ');

    const titleBlockClick =
        disableCardClick || useCardClick
            ? undefined
            : (e: React.MouseEvent) => {
                  e.stopPropagation();
                  handleVer();
              };

    const compactTagsFooter = (
        <div
            style={{
                marginTop: 10,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: 8,
                flexWrap: 'wrap',
            }}
        >
            <Space size={6} wrap style={{ flex: '1 1 auto', minWidth: 0 }}>
                <Tag color={statusColor} bordered={false} style={tagCompactStyle}>
                    {statusLabel}
                </Tag>
                <Tag color={prioridadeColor} variant="outlined" style={tagCompactStyle}>
                    {prioridadeLabel}
                </Tag>
            </Space>
            {showResponsavelAvatar && tarefa.responsavel && (
                <Avatar
                    size={26}
                    src={tarefa.responsavel.avatar}
                    icon={!tarefa.responsavel.avatar ? <User /> : undefined}
                    style={{ flexShrink: 0 }}
                    title={tarefa.responsavel.nome}
                >
                    {!tarefa.responsavel.avatar && tarefa.responsavel.nome?.slice(0, 1).toUpperCase()}
                </Avatar>
            )}
        </div>
    );

    const compactContent = (
        <>
            {(tarefa.chave_tarefa || tarefa.chave) && (
                <Text
                    type="secondary"
                    ellipsis={{ tooltip: (tarefa.chave_tarefa || tarefa.chave) as string }}
                    style={{
                        fontSize: 11,
                        display: 'block',
                        marginBottom: 6,
                        fontVariantNumeric: 'tabular-nums',
                        letterSpacing: '0.02em',
                    }}
                >
                    {tarefa.chave_tarefa || tarefa.chave}
                </Text>
            )}
            <Text
                strong
                style={{
                    fontSize: 14,
                    lineHeight: 1.35,
                    display: '-webkit-box',
                    WebkitLineClamp: 2,
                    WebkitBoxOrient: 'vertical',
                    overflow: 'hidden',
                    cursor: disableCardClick ? 'default' : useCardClick ? 'pointer' : 'pointer',
                    color: 'var(--text-primary)',
                }}
                onClick={titleBlockClick}
            >
                {tarefa.titulo}
            </Text>
            {tarefa.projeto?.nome && (
                <Text
                    type="secondary"
                    ellipsis={{ tooltip: tarefa.projeto.nome }}
                    style={{ fontSize: 11, display: 'block', marginTop: 6, lineHeight: 1.3 }}
                >
                    {tarefa.projeto.nome}
                </Text>
            )}
            {compactTagsFooter}
            {compact && showActions && (
                <div style={{ marginTop: 10, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                    <Button type="link" size="small" icon={<Eye />} onClick={handleVer}>
                        Ver
                    </Button>
                    {onEditar && (
                        <Button type="link" size="small" icon={<Pencil />} onClick={handleEditar}>
                            Editar
                        </Button>
                    )}
                </div>
            )}
        </>
    );

    const expandedContent = (
        <>
            <div
                style={{
                    marginBottom: 8,
                    display: 'flex',
                    alignItems: 'flex-start',
                    justifyContent: 'space-between',
                    gap: 8,
                }}
            >
                <div style={{ flex: 1, minWidth: 0 }}>
                    {tarefa.chave_tarefa && (
                        <div style={{ marginBottom: 4 }}>
                            <ChaveTarefa chave={tarefa.chave_tarefa} showCopy={false} />
                        </div>
                    )}
                    <div
                        style={{
                            fontWeight: 600,
                            fontSize: 14,
                            cursor: disableCardClick ? 'default' : 'pointer',
                            lineHeight: 1.4,
                        }}
                        onClick={
                            disableCardClick
                                ? undefined
                                : useCardClick
                                  ? undefined
                                  : (e) => {
                                        e.stopPropagation();
                                        handleVer();
                                    }
                        }
                    >
                        {tarefa.titulo}
                    </div>
                </div>
                {showMenu && (
                    <Dropdown menu={{ items: menuItems }} trigger={['click']} placement="bottomRight">
                        <Button
                            type="text"
                            size="small"
                            icon={<Ellipsis />}
                            onClick={(e) => e.stopPropagation()}
                        />
                    </Dropdown>
                )}
            </div>
            {!compact && tarefa.projeto?.nome && (
                <div style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>{tarefa.projeto.nome}</div>
            )}
            <Space wrap size={[4, 4]}>
                <Tag color={statusColor}>{statusLabel}</Tag>
                <Tag color={prioridadeColor}>{prioridadeLabel}</Tag>
            </Space>
            {!compact && (tarefa.data_vencimento || tarefa.responsavel) && (
                <div
                    style={{
                        marginTop: 8,
                        fontSize: 12,
                        color: '#8c8c8c',
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: 12,
                    }}
                >
                    {tarefa.data_vencimento && (
                        <span>
                            <Calendar style={{ marginRight: 4 }} />
                            {formatDate(tarefa.data_vencimento)}
                        </span>
                    )}
                    {tarefa.responsavel && (
                        <span>
                            <User style={{ marginRight: 4 }} />
                            {tarefa.responsavel.nome}
                        </span>
                    )}
                </div>
            )}
        </>
    );

    const cardContent = compact ? compactContent : expandedContent;

    const wrapperStyle: React.CSSProperties = dragHandle
        ? {
              ...dragHandle.style,
              cursor: 'grab',
          }
        : {};

    const wrapperProps = dragHandle
        ? {
              ref: dragHandle.setNodeRef as React.Ref<HTMLDivElement>,
              ...dragHandle.attributes,
              ...dragHandle.listeners,
          }
        : {};

    const handleCardClick = () => {
        if (disableCardClick) return;
        if (useCardClick) onCardClick?.(tarefa);
        else if (compact) handleVer();
    };

    const cardInteractive = !disableCardClick && (useCardClick || (compact && !useCardClick));

    const handleCardKeyDown = (e: React.KeyboardEvent) => {
        if (!cardInteractive) return;
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleCardClick();
        }
    };

    return (
        <div style={wrapperStyle} {...wrapperProps}>
            <Card
                size="small"
                hoverable={!disableCardClick}
                className={cardInteractive ? styles.cardFocusable : undefined}
                role={cardInteractive ? 'button' : undefined}
                tabIndex={cardInteractive ? 0 : undefined}
                aria-label={cardInteractive ? cardAriaLabel : undefined}
                onKeyDown={cardInteractive ? handleCardKeyDown : undefined}
                style={{
                    marginBottom: 8,
                    borderRadius: 10,
                    border: '1px solid #f0f0f0',
                    boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
                    transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
                }}
                styles={{
                    body: {
                        padding: compact ? '10px 12px' : 14,
                    },
                }}
                onClick={handleCardClick}
            >
                {cardContent}
            </Card>
        </div>
    );
}