/**
 * @fileoverview Componente EpicoProgresso - Progresso Detalhado do Épico
 *
 * @description
 * Componente que exibe o progresso detalhado de um épico, incluindo
 * informações sobre tarefas e histórias de usuário.
 *
 * @module tarefas
 * @author Sistema de Gestão
 * @since 1.0.0
 */

'use client';

import { Clock, CheckCircle2, FileText } from 'lucide-react';
import {
    Card,
    Col,
    List,
    Progress,
    Row,
    Space,
    Statistic,
    Tag,
    Typography,
} from 'antd';

import { ICON_SIZE_MD } from '@/components/icons';
import { Epico, HistoriaUsuario } from '@/types/projeto';

const { Text } = Typography;

interface EpicoProgressoProps {
    epico: Epico;
    progressoDetalhado?: {
        epico_id: number;
        epico_codigo: string;
        epico_nome: string;
        progresso: number;
        total_tarefas: number;
        tarefas_concluidas: number;
        tarefas_em_andamento: number;
        tarefas_pendentes: number;
        total_historias_usuario?: number;
        historias_completas?: number;
        total_tarefas_historias?: number;
        tarefas_historias_concluidas?: number;
    };
    historiasUsuario?: HistoriaUsuario[];
}

export function EpicoProgresso({
    epico,
    progressoDetalhado,
    historiasUsuario = epico.historias_usuario || [],
}: EpicoProgressoProps) {
    const progresso = progressoDetalhado?.progresso || epico.progresso || 0;
    const totalTarefas = progressoDetalhado?.total_tarefas || 0;
    const tarefasConcluidas = progressoDetalhado?.tarefas_concluidas || 0;
    const tarefasEmAndamento = progressoDetalhado?.tarefas_em_andamento || 0;
    const tarefasPendentes = progressoDetalhado?.tarefas_pendentes || 0;
    const totalHistorias = progressoDetalhado?.total_historias_usuario || historiasUsuario.length;
    const historiasCompletas =
        progressoDetalhado?.historias_completas ||
        historiasUsuario.filter((h) => {
            const tarefas = h.tarefas || [];
            return (
                tarefas.length > 0 &&
                tarefas.every((t) => t.status === 'done' || t.status === 'concluida')
            );
        }).length;

    return (
        <Card title="Progresso do Épico">
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
                <div>
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            marginBottom: 8,
                        }}
                    >
                        <Text strong>Progresso Geral</Text>
                        <Text strong>{progresso.toFixed(1)}%</Text>
                    </div>
                    <Progress percent={progresso} status="active" />
                </div>

                <Row gutter={16}>
                    <Col span={6}>
                        <Statistic
                            title="Tarefas Concluídas"
                            value={tarefasConcluidas}
                            suffix={`/ ${totalTarefas}`}
                            prefix={<CheckCircle2 style={{ color: '#52c41a' }} />}
                            valueStyle={{ color: '#52c41a' }}
                        />
                    </Col>
                    <Col span={6}>
                        <Statistic
                            title="Em Andamento"
                            value={tarefasEmAndamento}
                            prefix={<Clock style={{ color: '#1890ff' }} />}
                            valueStyle={{ color: '#1890ff' }}
                        />
                    </Col>
                    <Col span={6}>
                        <Statistic
                            title="Pendentes"
                            value={tarefasPendentes}
                            valueStyle={{ color: '#faad14' }}
                        />
                    </Col>
                    <Col span={6}>
                        <Statistic
                            title="Histórias Completas"
                            value={historiasCompletas}
                            suffix={`/ ${totalHistorias}`}
                            prefix={<FileText style={{ color: '#722ed1' }} />}
                            valueStyle={{ color: '#722ed1' }}
                        />
                    </Col>
                </Row>

                {historiasUsuario.length > 0 && (
                    <Card size="small" title="Histórias de Usuário">
                        <List
                            dataSource={historiasUsuario}
                            renderItem={(historia) => {
                                const tarefas = historia.tarefas || [];
                                const totalTarefasHistoria = tarefas.length;
                                const tarefasConcluidasHistoria = tarefas.filter(
                                    (t) => t.status === 'done' || t.status === 'concluida'
                                ).length;
                                const progressoHistoria =
                                    totalTarefasHistoria > 0
                                        ? Math.round(
                                              (tarefasConcluidasHistoria / totalTarefasHistoria) *
                                                  100
                                          )
                                        : 0;

                                return (
                                    <List.Item>
                                        <Space
                                            direction="vertical"
                                            size="small"
                                            style={{ width: '100%' }}
                                        >
                                            <Space>
                                                <Tag color="purple">{historia.codigo}</Tag>
                                                <Text strong>{historia.titulo}</Text>
                                            </Space>
                                            {totalTarefasHistoria > 0 && (
                                                <div>
                                                    <div
                                                        style={{
                                                            display: 'flex',
                                                            justifyContent: 'space-between',
                                                            marginBottom: 4,
                                                        }}
                                                    >
                                                        <Text type="secondary" style={{ fontSize: 12 }}>
                                                            {tarefasConcluidasHistoria} de{' '}
                                                            {totalTarefasHistoria} tarefas
                                                        </Text>
                                                        <Text type="secondary" style={{ fontSize: 12 }}>
                                                            {progressoHistoria}%
                                                        </Text>
                                                    </div>
                                                    <Progress
                                                        percent={progressoHistoria}
                                                        size="small"
                                                    />
                                                </div>
                                            )}
                                        </Space>
                                    </List.Item>
                                );
                            }}
                        />
                    </Card>
                )}
            </Space>
        </Card>
    );
}