'use client';

import { Tag, Typography } from 'antd';
import dayjs from 'dayjs';
import {
    EntityMobileCard,
    EntityMobileCardBody,
    EntityMobileCardHeader,
    EntityMobileCardMeta,
    EntityMobileCardTitleBlock,
} from '@/components/mobile';
import type { TarefaGantt } from './types';
import { ganttStatusBarColor, ganttStatusToTagColor } from './ganttDisplay';
import styles from './GanttMobileTaskList.module.scss';

const { Text } = Typography;

export type GanttMobileTaskListProps = {
    tarefas: TarefaGantt[];
    formatarData: (data?: string) => string;
    listHeading?: string;
};

function isTarefaAtraso(tarefa: TarefaGantt): boolean {
    if (!tarefa.data_fim) return false;
    if ((tarefa.progresso_percentual ?? 0) >= 100) return false;
    if (tarefa.status === 'concluida') return false;
    return dayjs(tarefa.data_fim).endOf('day').isBefore(dayjs());
}

/** Lista de tarefas em cards para viewport mobile (substitui tabela larga do Gantt). */
export function GanttMobileTaskList({
    tarefas,
    formatarData,
    listHeading = 'Lista de tarefas',
}: GanttMobileTaskListProps) {
    if (tarefas.length === 0) {
        return (
            <div className={styles.empty} role="status">
                <Text type="secondary">Nenhuma tarefa para exibir</Text>
            </div>
        );
    }

    return (
        <div role="list" aria-label={listHeading} className={styles.list} data-testid="gantt-mobile-task-list">
            {tarefas.map((tarefa) => {
                const tagColor = ganttStatusToTagColor(tarefa.status);
                const progresso = tarefa.progresso_percentual ?? 0;
                const atraso = isTarefaAtraso(tarefa);

                return (
                    <div key={tarefa.id} role="listitem">
                        <EntityMobileCard
                            className={atraso ? styles.cardAtraso : undefined}
                            data-testid={`gantt-mobile-task-${tarefa.id}`}
                            style={{
                                borderLeftWidth: 4,
                                borderLeftStyle: 'solid',
                                borderLeftColor: ganttStatusBarColor(tagColor),
                                marginBottom: 0,
                            }}
                        >
                            <EntityMobileCardHeader>
                                <EntityMobileCardTitleBlock>
                                    <span className={styles.title}>{tarefa.titulo}</span>
                                    <Tag color={tagColor}>
                                        {tarefa.status.replace('_', ' ').toUpperCase()}
                                    </Tag>
                                </EntityMobileCardTitleBlock>
                            </EntityMobileCardHeader>
                            <EntityMobileCardMeta>
                                <span className={styles.metaRow}>
                                    <span>Início: {formatarData(tarefa.data_inicio)}</span>
                                    <span>Fim: {formatarData(tarefa.data_fim)}</span>
                                    {tarefa.duracao_dias ? <span>{tarefa.duracao_dias} dias</span> : null}
                                    {tarefa.responsavel?.nome ? (
                                        <span>{tarefa.responsavel.nome}</span>
                                    ) : null}
                                </span>
                            </EntityMobileCardMeta>
                            <EntityMobileCardBody>
                                <div className={styles.progressWrap}>
                                    <div className={styles.progressLabel}>
                                        <span>Progresso</span>
                                        <span>{progresso}%</span>
                                    </div>
                                    <div className={styles.progressBar} aria-hidden>
                                        <div
                                            className={styles.progressFill}
                                            style={{
                                                width: `${progresso}%`,
                                                background: progresso === 100 ? '#52c41a' : '#1890ff',
                                            }}
                                        />
                                    </div>
                                </div>
                            </EntityMobileCardBody>
                        </EntityMobileCard>
                    </div>
                );
            })}
        </div>
    );
}