'use client';

/**
 * Modal de opções na listagem de tecnologias do projeto.
 * FRONT-S2-02 — movido de `app/(dashboard)/projetos/[id]/tecnologias/components/`.
 */

import { Eye, Pencil, Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { ModalOpcoesBase, type ModalOpcaoAction } from '@/components/ModalOpcoesBase';
import type { TecnologiaProjeto } from './types';

export interface ModalOpcoesTecnologiaProps {
    open: boolean;
    onClose: () => void;
    item: TecnologiaProjeto | null;
    onVerDetalhes: (item: TecnologiaProjeto) => void;
    onEditar?: (item: TecnologiaProjeto) => void;
    onExcluir?: (item: TecnologiaProjeto) => void;
}

export function ModalOpcoesTecnologia({
    open,
    onClose,
    item,
    onVerDetalhes,
    onEditar,
    onExcluir}: ModalOpcoesTecnologiaProps) {
    if (!item) return null;
    const subtitle = [item.nome, item.versao ? `v${item.versao}` : null, item.categoria]
        .filter(Boolean)
        .join(' · ');
    const actions: ModalOpcaoAction[] = [
        {
            key: 'detalhes',
            label: 'Ver detalhes',
            icon: <Eye size={ICON_SIZE_MD} aria-hidden />,
            onClick: () => {
                onClose();
                onVerDetalhes(item);
            },
            primary: true},
    ];
    if (onEditar) {
        actions.push({
            key: 'editar',
            label: 'Editar',
            icon: <Pencil size={ICON_SIZE_MD} aria-hidden />,
            onClick: () => {
                onClose();
                onEditar(item);
            }});
    }
    if (onExcluir) {
        actions.push({
            key: 'excluir',
            label: 'Excluir',
            icon: <Trash2 size={ICON_SIZE_MD} aria-hidden />,
            onClick: () => {
                onClose();
                onExcluir(item);
            },
            danger: true});
    }
    return (
        <ModalOpcoesBase
            open={open}
            onClose={onClose}
            title="Opções da tecnologia"
            subtitle={subtitle}
            actions={actions}
            width={380}
            data-testid="projeto-tecnologia-vinculo-opcoes-modal"
            aria-label="Opções da tecnologia"
        />
    );
}