'use client';

/**
 * Cards de arestas do Traceability Engine (mobile).
 */

import React from 'react';
import { Button, Empty, Space, Tag, Typography } from 'antd';

import type { RastreabilidadeEdgeDto } from './rastreabilidade.types';
import styles from './ProjetoRastreabilidadePanel.module.scss';

const { Text } = Typography;

function edgeLabel(e: RastreabilidadeEdgeDto): string {
    return `${e.source_node_type}#${e.source_node_id} —[${e.edge_type}]→ ${e.target_node_type}#${e.target_node_id}`;
}

export type RastreabilidadeEdgesCardsProps = {
    edges: RastreabilidadeEdgeDto[];
    loading?: boolean;
    onConfirm: (edgeId: number) => void;
    onReject: (edgeId: number) => void;
    confirmPending?: boolean;
    rejectPending?: boolean;
};

export function RastreabilidadeEdgesCards({
    edges,
    onConfirm,
    onReject,
    confirmPending,
    rejectPending,
}: RastreabilidadeEdgesCardsProps) {
    if (edges.length === 0) {
        return (
            <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="Nenhuma aresta materializada. Sincronize as arestas."
            />
        );
    }

    return (
        <div className={styles.edgeCards} data-testid="rastreabilidade-edges-cards">
            {edges.map((row) => (
                <article key={row.id} className={styles.edgeCard}>
                    <Text className={styles.edgeTitle}>{edgeLabel(row)}</Text>
                    <Text type="secondary" style={{ fontSize: 12 }}>
                        {row.source} · {row.confidence} · {row.layer}
                    </Text>
                    <Space wrap size={6}>
                        <Tag color={row.status === 'possible_delete' ? 'warning' : 'default'}>
                            {row.status}
                        </Tag>
                    </Space>
                    {row.status !== 'rejected' ? (
                        <Space wrap className={styles.edgeActions}>
                            <Button
                                size="small"
                                loading={confirmPending}
                                onClick={() => onConfirm(row.id)}
                            >
                                Confirmar
                            </Button>
                            <Button
                                size="small"
                                danger
                                loading={rejectPending}
                                onClick={() => onReject(row.id)}
                            >
                                Rejeitar
                            </Button>
                        </Space>
                    ) : null}
                </article>
            ))}
        </div>
    );
}