'use client';

/**
 * WG-ENT-042 — timeline mínima de entregas (barras CSS; sem Gantt).
 */

import React, { useMemo } from 'react';
import { Empty, Space, Tag, Typography } from 'antd';
import { formatDate } from '@/lib/utils/export';
import type { Entrega } from '../types';
import { buildEntregaTimelineBars } from '../utils/entregasCronogramaTimeline';
import {
    getEntregaStatusColor,
    getEntregaStatusLabel,
} from '../entregasPlanejamentoOptions';
import styles from './EntregasCronogramaTimeline.module.scss';

const { Text } = Typography;

export type EntregasCronogramaTimelineProps = {
    entregas: Entrega[];
    onSelect?: (entrega: Entrega) => void;
};

export function EntregasCronogramaTimeline({
    entregas,
    onSelect,
}: EntregasCronogramaTimelineProps) {
    const bars = useMemo(() => buildEntregaTimelineBars(entregas), [entregas]);

    if (bars.length === 0) {
        return (
            <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="Nenhuma entrega para exibir no cronograma."
                data-testid="planejamento-entregas-cronograma-empty"
            />
        );
    }

    return (
        <div className={styles.timeline} data-testid="planejamento-entregas-cronograma">
            <Text type="secondary" style={{ display: 'block', marginBottom: 4 }}>
                Ordenado pelo início planejado. As barras mostram a janela relativa das entregas
                visíveis nesta página.
            </Text>
            {bars.map(({ entrega, leftPct, widthPct, inicio, fim, semDatas }) => {
                const rotulo = [entrega.codigo, entrega.titulo].filter(Boolean).join(' — ');
                return (
                    <div key={entrega.id} className={styles.row}>
                        <div className={styles.label}>
                            <button
                                type="button"
                                className="ant-btn ant-btn-link"
                                style={{ padding: 0, height: 'auto', maxWidth: '100%' }}
                                onClick={() => onSelect?.(entrega)}
                                data-testid={`planejamento-entregas-cronograma-item-${entrega.id}`}
                            >
                                <span className={styles.labelTitle}>{rotulo || `Entrega #${entrega.id}`}</span>
                            </button>
                            <Space size={6} wrap className={styles.labelMeta}>
                                <Tag color={getEntregaStatusColor(entrega.status)}>
                                    {getEntregaStatusLabel(entrega.status)}
                                </Tag>
                                {!semDatas ? (
                                    <span>
                                        {formatDate(inicio)} → {formatDate(fim)}
                                    </span>
                                ) : (
                                    <span>Sem datas planejadas</span>
                                )}
                            </Space>
                        </div>
                        <div className={styles.track} aria-hidden={semDatas}>
                            {semDatas ? (
                                <div className={styles.barEmpty}>Sem janela planejada</div>
                            ) : (
                                <div
                                    className={styles.bar}
                                    style={{ left: `${leftPct}%`, width: `${widthPct}%` }}
                                    title={`${formatDate(inicio)} → ${formatDate(fim)}`}
                                />
                            )}
                        </div>
                    </div>
                );
            })}
        </div>
    );
}