'use client';

import { Code } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { Card, Tag, Rate } from 'antd';

interface TecnologiaProjetoType {
    id: number;
    nome: string;
    categoria?: string;
    versao?: string | null;
    status?: string;
    tipo?: string;
    nivel_proficiencia?: number | null;
}

const getTipoColor = (tipo: string) => {
    const colors: Record<string, string> = {
        linguagem: 'blue',
        framework: 'green',
        biblioteca: 'purple',
        ferramenta: 'orange',
        banco_dados: 'cyan',
        servico: 'red'};
    return colors[tipo] || 'default';
};

const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
        ativo: 'green',
        deprecado: 'red',
        em_avaliacao: 'orange'};
    return colors[status] || 'default';
};

export interface CardTecnologiaProps {
    item: TecnologiaProjetoType & { updated_at?: string };
    onOpenOpcoes?: (item: TecnologiaProjetoType) => void;
    onView?: (item: TecnologiaProjetoType) => void;
}

export function CardTecnologia({ item, onOpenOpcoes, onView }: CardTecnologiaProps) {
    const handleClick = () => (onOpenOpcoes ? onOpenOpcoes(item) : onView?.(item));
    return (
        <Card
            hoverable
            className="module-card bordered-left"
            style={{ borderLeft: '6px solid #3498db', 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', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <Code size={ICON_SIZE_MD} style={{ color: '#3498db' }} aria-hidden />
                    {item.nome}
                    {item.versao && <Tag color="blue">v{item.versao}</Tag>}
                </div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    <Tag color={getTipoColor(item.tipo ?? '')}>{item.tipo ?? '-'}</Tag>
                    <Tag color={getStatusColor(item.status ?? '')}>{(item.status ?? '-').replace('_', ' ')}</Tag>
                </div>
                {item.nivel_proficiencia != null && (
                    <Rate disabled value={item.nivel_proficiencia} count={5} style={{ fontSize: 14 }} />
                )}
                <div style={{ fontSize: 12, color: '#95a5a6' }}>{item.categoria}</div>
            </div>
        </Card>
    );
}