'use client';

import React from 'react';
import { Card, Progress, Tag, Space, Typography } from 'antd';
import Link from 'next/link';

const { Text, Title } = Typography;

interface Epico {
    id: number;
    codigo: string;
    nome: string;
    descricao?: string;
    cor?: string;
    status?: string;
    progresso: number;
    projeto_id: number;
    data_inicio?: string;
    data_fim_prevista?: string;
    responsavel?: {
        id: number;
        nome: string;
    };
}

interface EpicoCardProps {
    epico: Epico;
    onClick?: () => void;
    showProgress?: boolean;
    showDetails?: boolean;
}

export function EpicoCard({
    epico,
    onClick,
    showProgress = true,
    showDetails = false,
}: EpicoCardProps) {
    const getStatusColor = (status?: string) => {
        switch (status?.toLowerCase()) {
            case 'concluido':
            case 'concluída':
                return 'success';
            case 'em_andamento':
            case 'em andamento':
                return 'processing';
            case 'planejamento':
                return 'default';
            case 'pausado':
                return 'warning';
            case 'cancelado':
                return 'error';
            default:
                return 'default';
        }
    };

    return (
        <Card
            hoverable={!!onClick}
            onClick={onClick}
            style={{
                marginBottom: 16,
                cursor: onClick ? 'pointer' : 'default',
            }}
            styles={{ body: { padding: 16 } }}
        >
            <Space direction="vertical" size="small" style={{ width: '100%' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <Space>
                        {epico.cor && (
                            <div
                                style={{
                                    width: 16,
                                    height: 16,
                                    borderRadius: 4,
                                    backgroundColor: epico.cor,
                                }}
                            />
                        )}
                        <Link href={`/epicos/${epico.id}`}>
                            <Tag color={epico.cor || 'default'}>{epico.codigo}</Tag>
                        </Link>
                        <Title level={5} style={{ margin: 0 }}>
                            {epico.nome}
                        </Title>
                    </Space>
                    {epico.status && (
                        <Tag color={getStatusColor(epico.status)}>{epico.status}</Tag>
                    )}
                </div>

                {epico.descricao && showDetails && (
                    <Text type="secondary" style={{ fontSize: 12 }}>
                        {epico.descricao}
                    </Text>
                )}

                {showProgress && (
                    <div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                            <Text type="secondary" style={{ fontSize: 12 }}>
                                Progresso
                            </Text>
                            <Text strong style={{ fontSize: 12 }}>
                                {epico.progresso.toFixed(0)}%
                            </Text>
                        </div>
                        <Progress
                            percent={epico.progresso}
                            strokeColor={epico.cor}
                            size="small"
                            showInfo={false}
                        />
                    </div>
                )}

                {showDetails && (
                    <Space split>
                        {epico.data_inicio && (
                            <Text type="secondary" style={{ fontSize: 11 }}>
                                Início: {new Date(epico.data_inicio).toLocaleDateString('pt-BR')}
                            </Text>
                        )}
                        {epico.data_fim_prevista && (
                            <Text type="secondary" style={{ fontSize: 11 }}>
                                Fim previsto:{' '}
                                {new Date(epico.data_fim_prevista).toLocaleDateString('pt-BR')}
                            </Text>
                        )}
                        {epico.responsavel && (
                            <Text type="secondary" style={{ fontSize: 11 }}>
                                Responsável: {epico.responsavel.nome}
                            </Text>
                        )}
                    </Space>
                )}
            </Space>
        </Card>
    );
}