'use client';

import { Box } 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 { EntregaType } from './types';

const statusColors: Record<string, string> = {
    planejada: 'default',
    em_preparacao: 'processing',
    entregue: 'warning',
    aceita: 'success',
    rejeitada: 'error'};
const prioridadeColors: Record<string, string> = {
    baixa: 'default',
    media: 'processing',
    alta: 'warning',
    critica: 'error'};

export interface CardEntregaProps {
    item: EntregaType & { data_planejada?: string };
    onOpenOpcoes?: (item: EntregaType) => void;
    onView?: (item: EntregaType) => void;
}

export function CardEntrega({ item, onOpenOpcoes, onView }: CardEntregaProps) {
    const handleClick = () => (onOpenOpcoes ? onOpenOpcoes(item) : onView?.(item));
    return (
        <Card
            hoverable
            className="module-card bordered-left"
            style={{ borderLeft: '6px solid #13c2c2', 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',
                        display: 'flex',
                        alignItems: 'center',
                        gap: 8,
                        flexWrap: 'wrap'}}
                >
                    <Box size={ICON_SIZE_MD} style={{ color: '#13c2c2' }} aria-hidden />
                    {item.titulo}
                    {item.codigo && <Tag>{item.codigo}</Tag>}
                </div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    <Tag color={statusColors[item.status] || 'default'}>{item.status}</Tag>
                    {item.prioridade && (
                        <Tag color={prioridadeColors[item.prioridade] || 'default'}>
                            {item.prioridade}
                        </Tag>
                    )}
                </div>
                {item.projeto?.nome && (
                    <div style={{ fontSize: 12, color: '#7f8c8d' }}>{item.projeto.nome}</div>
                )}
                {item.data_planejada && (
                    <div style={{ fontSize: 12, color: '#95a5a6' }}>
                        {formatDate(item.data_planejada)}
                    </div>
                )}
            </div>
        </Card>
    );
}