'use client';

import { Rocket } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { Card, Tag } from 'antd';
import { formatDate } from '@/lib/utils/export';
import type { Sprint } from '@/types';

const getStatusColor = (s: string) =>
    ({ planejada: 'default', ativa: 'processing', concluida: 'success', cancelada: 'error' }[s] || 'default');
const getStatusLabel = (s: string) =>
    ({ planejada: 'Planejada', ativa: 'Ativa', concluida: 'Concluída', cancelada: 'Cancelada' }[s] || s);

export interface CardSprintProps {
    item: Sprint;
    onOpenOpcoes?: (item: Sprint) => void;
    onView?: (item: Sprint) => void;
}

export function CardSprint({ item, onOpenOpcoes, onView }: CardSprintProps) {
    const handleClick = () => (onOpenOpcoes ? onOpenOpcoes(item) : onView?.(item));
    const vel = item.velocidade_real ?? item.velocidade_planejada;
    return (
        <Card
            hoverable
            className="module-card bordered-left"
            style={{ borderLeft: '6px solid #1ab394', marginBottom: 16, cursor: 'pointer' }}
            styles={{ body: { padding: '16px 20px' } }}
            onClick={handleClick}
        >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ fontWeight: 700, color: '#2c3e50' }}>
                    <Rocket size={ICON_SIZE_MD} style={{ marginRight: 8, color: '#1ab394' }} aria-hidden />
                    {item.nome}
                </div>
                {item.projeto?.nome && <div style={{ fontSize: 12, color: '#7f8c8d' }}>{item.projeto.nome}</div>}
                <Tag color={getStatusColor(item.status)}>{getStatusLabel(item.status)}</Tag>
                <div style={{ fontSize: 12, color: '#95a5a6' }}>
                    {formatDate(item.data_inicio)} – {formatDate(item.data_fim)}
                </div>
                {vel != null && <div style={{ fontSize: 12, color: '#7f8c8d' }}>{vel} pontos</div>}
            </div>
        </Card>
    );
}