'use client';

import { Shield } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { Card, Tag } from 'antd';
import { formatDate } from '@/lib/utils/export';
import type { ProjetoVulnerabilidade } from '@/features/projetos/qualidade-vulnerabilidades/types';

const severidadeColors: Record<string, string> = {
    baixa: 'default',
    media: 'blue',
    alta: 'orange',
    critica: 'red'};
const statusColors: Record<string, string> = {
    aberta: 'red',
    em_analise: 'orange',
    corrigida: 'green',
    falso_positivo: 'default',
    aceita: 'purple'};

export interface CardVulnerabilidadeProps {
    item: ProjetoVulnerabilidade;
    onOpenOpcoes?: (item: ProjetoVulnerabilidade) => void;
    onView?: (item: ProjetoVulnerabilidade) => void;
}

export function CardVulnerabilidade({ item, onOpenOpcoes, onView }: CardVulnerabilidadeProps) {
    const handleClick = () => (onOpenOpcoes ? onOpenOpcoes(item) : onView?.(item));
    return (
        <Card
            hoverable
            className="module-card bordered-left"
            style={{ borderLeft: '6px solid #e74c3c', 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' }}>
                    <Shield size={ICON_SIZE_MD} style={{ marginRight: 8, color: '#e74c3c' }} aria-hidden />
                    {item.titulo}
                </div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    <Tag color={severidadeColors[item.severidade] || 'default'}>{item.severidade}</Tag>
                    <Tag color={statusColors[item.status] || 'default'}>
                        {item.status?.replace('_', ' ')}
                    </Tag>
                </div>
                {item.tipo && <div style={{ fontSize: 12, color: '#95a5a6' }}>{item.tipo}</div>}
                {item.data_descoberta && (
                    <div style={{ fontSize: 12, color: '#95a5a6' }}>{formatDate(item.data_descoberta)}</div>
                )}
            </div>
        </Card>
    );
}