'use client';

/**
 * Vista mobile da matriz de rastreabilidade — árvore/lista (Collapse), não Table.
 */

import { ListTodo } from 'lucide-react';
import { iconTokenSize } from '@/components/icons';
import React from 'react';
import { Button, Collapse, Space, Typography } from 'antd';
import { ListagemEmptyState } from '@/components/listings';

import { formatDateOnly } from '@/lib/utils/export';

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

const { Text } = Typography;

export type RastreabilidadeMatrizListaProps = {
    matriz: RastreabilidadeMatrizItem[];
    requisitoLabel: (item: RastreabilidadeMatrizItem) => string;
    coberturaTags: (item: RastreabilidadeMatrizItem) => React.ReactNode;
    onOpenDetail: (item: RastreabilidadeMatrizItem) => void;
};

export function RastreabilidadeMatrizLista({
    matriz,
    requisitoLabel,
    coberturaTags,
    onOpenDetail,
}: RastreabilidadeMatrizListaProps) {
    if (matriz.length === 0) {
        return (
            <ListagemEmptyState
                type="info"
                icon={<ListTodo size={iconTokenSize.xl} aria-hidden />}
                message="Nenhum requisito na matriz"
                description="Cadastre requisitos para acompanhar a cobertura."
                data-testid="rastreabilidade-matriz-lista-empty"
            />
        );
    }

    return (
        <Collapse
            bordered={false}
            className={styles.matrizLista}
            data-testid="rastreabilidade-matriz-lista"
            items={matriz.map((record) => ({
                key: String(record.requisito.id),
                label: (
                    <div className={styles.matrizListaLabel}>
                        <Text strong className={styles.matrizListaTitle}>
                            {requisitoLabel(record)}
                        </Text>
                        {coberturaTags(record)}
                        <Text type="secondary" style={{ fontSize: 12 }}>
                            {record.entregas.length} entrega(s) · {record.tarefas.length} tarefa(s)
                        </Text>
                    </div>
                ),
                children: (
                    <div className={styles.expandBlock}>
                        <div>
                            <div className={styles.expandLabel}>Entregas</div>
                            {record.entregas.length === 0 ? (
                                <Text type="secondary">Nenhuma entrega vinculada.</Text>
                            ) : (
                                <ul className={styles.treeList}>
                                    {record.entregas.map((e) => (
                                        <li key={e.id}>
                                            <Text>
                                                {e.nome || `Entrega #${e.id}`}
                                                {e.status ? ` (${e.status})` : ''}
                                            </Text>
                                            {e.data_prevista ? (
                                                <Text type="secondary">
                                                    {' '}
                                                    — {formatDateOnly(e.data_prevista)}
                                                </Text>
                                            ) : null}
                                        </li>
                                    ))}
                                </ul>
                            )}
                        </div>
                        <div>
                            <div className={styles.expandLabel}>Tarefas</div>
                            {record.tarefas.length === 0 ? (
                                <Text type="secondary">Nenhuma tarefa vinculada.</Text>
                            ) : (
                                <ul className={styles.treeList}>
                                    {record.tarefas.map((t) => (
                                        <li key={t.id}>
                                            <Space size={4} wrap>
                                                <ListTodo size={14} aria-hidden />
                                                <Text>
                                                    {t.titulo || `Tarefa #${t.id}`}
                                                    {t.status ? ` (${t.status})` : ''}
                                                </Text>
                                            </Space>
                                        </li>
                                    ))}
                                </ul>
                            )}
                        </div>
                        <Button
                            type="link"
                            size="small"
                            className={styles.detailLink}
                            onClick={() => onOpenDetail(record)}
                            data-testid={`rastreabilidade-abrir-detalhe-${record.requisito.id}`}
                        >
                            Ver ligações
                        </Button>
                    </div>
                ),
            }))}
        />
    );
}