'use client';

import { ListChecks } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { Card, Tag } from 'antd';
import type { BacklogItemSummary } from '@/features/projetos/desenvolvimento-backlog';

const statusColors: Record<string, string> = { backlog: 'default', planejado: 'blue', em_andamento: 'processing', concluido: 'success', cancelado: 'error' };
const tipoColors: Record<string, string> = { feature: 'blue', bug: 'red', melhoria: 'green', refatoracao: 'orange', documentacao: 'purple' };
const prioridadeColors: Record<string, string> = { baixa: 'default', media: 'blue', alta: 'orange', critica: 'red' };

export interface CardBacklogItemProps {
    item: BacklogItemSummary & { estimativa?: number };
    onOpenOpcoes?: (item: BacklogItemSummary) => void;
    onView?: (item: BacklogItemSummary) => void;
}

export function CardBacklogItem({ item, onOpenOpcoes, onView }: CardBacklogItemProps) {
    const handleClick = () => (onOpenOpcoes ? onOpenOpcoes(item) : onView?.(item));
    return (
        <Card
            hoverable
            className="module-card bordered-left"
            style={{ borderLeft: '6px solid #1890ff', marginBottom: 16, cursor: 'pointer' }}
            styles={{ body: { padding: '16px 20px' } }}
            onClick={handleClick}
        >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ fontWeight: 700, color: '#2c3e50' }}>
                    <ListChecks size={ICON_SIZE_MD} style={{ marginRight: 8, color: '#1890ff' }} aria-hidden />
                    {item.titulo}
                </div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {item.tipo && <Tag color={tipoColors[item.tipo] || 'default'}>{item.tipo}</Tag>}
                    {item.status && <Tag color={statusColors[item.status] || 'default'}>{item.status}</Tag>}
                    {item.prioridade && <Tag color={prioridadeColors[item.prioridade] || 'default'}>{item.prioridade}</Tag>}
                </div>
                {item.projeto?.nome && <div style={{ fontSize: 12, color: '#7f8c8d' }}>{item.projeto.nome}</div>}
                {(item as { estimativa?: number }).estimativa != null && (
                    <div style={{ fontSize: 12, color: '#95a5a6' }}>{(item as { estimativa: number }).estimativa}h</div>
                )}
            </div>
        </Card>
    );
}