'use client';

/**
 * Vista mobile "Release week" (TASK-PPS-056 / PPS-OP-024).
 * Cards densos com readiness e ≤5 toques até o detalhe @390px.
 */

import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
import React from 'react';
import { Button, Empty, Space, Tag, Typography } from 'antd';
import {
    RELEASE_STATUS_COLOR,
    RELEASE_STATUS_LABEL,
    type ProdutoReleaseResumo,
} from '../types';

const { Text, Title } = Typography;

export type ReleaseWeekCardsProps = {
    projetoId: string;
    releases: readonly ProdutoReleaseResumo[];
    canEditar: boolean;
    onDuplicar?: (release: ProdutoReleaseResumo) => void;
    onNovaRelease?: () => void;
};

/**
 * Lista em cards para viewport estreita — foco teclado + aria.
 */
export function ReleaseWeekCards({
    projetoId,
    releases,
    canEditar,
    onDuplicar,
    onNovaRelease,
}: ReleaseWeekCardsProps) {
    if (releases.length === 0) {
        return (
            <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="Nenhuma release nesta semana de train."
                data-testid="release-week-empty"
            >
                {canEditar && onNovaRelease ? (
                    <Button type="primary" onClick={onNovaRelease} data-testid="release-week-empty-cta">
                        Nova release
                    </Button>
                ) : null}
            </Empty>
        );
    }

    return (
        <ul
            role="list"
            aria-label="Release week — lista de releases"
            style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}
            data-testid="release-week-cards"
        >
            {releases.map((release) => {
                const detailHref = `/projetos/${projetoId}/produto/releases/${release.id}`;
                const superficies = release.superficies_count ?? 0;
                return (
                    <li key={release.id}>
                        <article
                            aria-labelledby={`release-week-title-${release.id}`}
                            style={{
                                border: '1px solid var(--border-light, #f0f0f0)',
                                borderRadius: 8,
                                padding: 12,
                                background: 'var(--surface, #fff)',
                            }}
                            data-testid={`release-week-card-${release.id}`}
                        >
                            <Space direction="vertical" size={8} style={{ width: '100%' }}>
                                <Space wrap size={8} style={{ width: '100%', justifyContent: 'space-between' }}>
                                    <Title
                                        id={`release-week-title-${release.id}`}
                                        level={5}
                                        style={{ margin: 0 }}
                                    >
                                        {release.nome}
                                    </Title>
                                    <Tag color={RELEASE_STATUS_COLOR[release.status]}>
                                        {RELEASE_STATUS_LABEL[release.status]}
                                    </Tag>
                                </Space>
                                <Text type="secondary">
                                    {release.codigo}
                                    {release.data_alvo ? ` · alvo ${release.data_alvo}` : ''}
                                </Text>
                                <Text>
                                    Readiness:{' '}
                                    <Text strong>
                                        {superficies} superfície{superficies === 1 ? '' : 's'}
                                    </Text>
                                    <Text type="secondary"> — abra o detalhe para marcar prontas</Text>
                                </Text>
                                <Space wrap size={8}>
                                    <Link href={detailHref}>
                                        <Button
                                            type="primary"
                                            size="small"
                                            data-testid={`release-week-abrir-${release.id}`}
                                            aria-label={`Abrir checklist da release ${release.nome}`}
                                        >
                                            Abrir checklist
                                            <ChevronRight size={14} aria-hidden style={{ marginLeft: 4 }} />
                                        </Button>
                                    </Link>
                                    {canEditar && onDuplicar ? (
                                        <Button
                                            size="small"
                                            onClick={() => onDuplicar(release)}
                                            data-testid={`release-week-duplicar-${release.id}`}
                                            aria-label={`Duplicar release ${release.nome}`}
                                        >
                                            Duplicar
                                        </Button>
                                    ) : null}
                                </Space>
                            </Space>
                        </article>
                    </li>
                );
            })}
        </ul>
    );
}