/**
 * @fileoverview Componente HistoriaUsuarioView - Visualização de História de Usuário
 *
 * @description
 * Componente que exibe os detalhes completos de uma história de usuário,
 * incluindo formato "Como/Quero/Para", critérios de aceitação e tarefas associadas.
 *
 * @module tarefas
 * @author Sistema de Gestão
 * @since 1.0.0
 */

'use client';

import { CheckCircle2, User } from 'lucide-react';
import {
    Avatar,
    Card,
    Descriptions,
    List,
    Progress,
    Space,
    Tag,
    Typography,
} from 'antd';

import { ICON_SIZE_MD } from '@/components/icons';
import Link from 'next/link';
import { HistoriaUsuario, Tarefa } from '@/types/projeto';
import { minhasTarefasTarefaDetalhePath } from '@/lib/routes/desenvolvimentoTarefasNav';

const { Title, Text, Paragraph } = Typography;

interface HistoriaUsuarioViewProps {
    historia: HistoriaUsuario;
    tarefas?: Tarefa[];
}

export function HistoriaUsuarioView({
    historia,
    tarefas = historia.tarefas || [],
}: HistoriaUsuarioViewProps) {
    const getStatusColor = (status?: string) => {
        switch (status?.toLowerCase()) {
            case 'concluida':
            case 'concluída':
                return 'success';
            case 'em_andamento':
            case 'em andamento':
                return 'processing';
            case 'planejamento':
                return 'default';
            case 'pausada':
                return 'warning';
            case 'cancelada':
                return 'error';
            default:
                return 'default';
        }
    };

    const getPrioridadeColor = (prioridade?: string) => {
        switch (prioridade?.toLowerCase()) {
            case 'urgente':
                return 'red';
            case 'alta':
                return 'orange';
            case 'media':
                return 'blue';
            case 'baixa':
                return 'green';
            default:
                return 'default';
        }
    };

    const calcularProgresso = () => {
        if (tarefas.length === 0) {
            return 0;
        }
        const totalTarefas = tarefas.length;
        const tarefasConcluidas = tarefas.filter(
            (t) => t.status === 'done' || t.status === 'concluida'
        ).length;
        return Math.round((tarefasConcluidas / totalTarefas) * 100);
    };

    const progresso = calcularProgresso();
    const tarefasConcluidas = tarefas.filter(
        (t) => t.status === 'done' || t.status === 'concluida'
    ).length;

    return (
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <Card>
                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                    <div
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                        }}
                    >
                        <Space>
                            <Tag color="purple" style={{ fontSize: 14 }}>
                                {historia.codigo}
                            </Tag>
                            <Title level={3} style={{ margin: 0 }}>
                                {historia.titulo}
                            </Title>
                        </Space>
                        {historia.status && (
                            <Tag color={getStatusColor(historia.status)}>
                                {historia.status}
                            </Tag>
                        )}
                    </div>

                    {historia.descricao && (
                        <Paragraph>{historia.descricao}</Paragraph>
                    )}

                    {(historia.como || historia.quero || historia.para) && (
                        <Card size="small" title="História de Usuário">
                            <Space direction="vertical" size="small" style={{ width: '100%' }}>
                                {historia.como && (
                                    <div>
                                        <Text strong>Como</Text> {historia.como}
                                    </div>
                                )}
                                {historia.quero && (
                                    <div>
                                        <Text strong>Quero</Text> {historia.quero}
                                    </div>
                                )}
                                {historia.para && (
                                    <div>
                                        <Text strong>Para</Text> {historia.para}
                                    </div>
                                )}
                            </Space>
                        </Card>
                    )}

                    <Descriptions column={2} size="small">
                        {historia.story_points !== undefined &&
                            historia.story_points !== null && (
                                <Descriptions.Item label="Story Points">
                                    <Tag color="orange">{historia.story_points} SP</Tag>
                                </Descriptions.Item>
                            )}
                        {historia.prioridade && (
                            <Descriptions.Item label="Prioridade">
                                <Tag color={getPrioridadeColor(historia.prioridade)}>
                                    {historia.prioridade}
                                </Tag>
                            </Descriptions.Item>
                        )}
                        {historia.epico && historia.epico.id && (
                            <Descriptions.Item label="Épico">
                                <Link href={`/epicos/${historia.epico.id}`}>
                                    <Tag color={historia.epico.cor || 'default'}>
                                        {historia.epico.codigo} - {historia.epico.nome}
                                    </Tag>
                                </Link>
                            </Descriptions.Item>
                        )}
                        {historia.responsavel && (
                            <Descriptions.Item label="Responsável">
                                <Space>
                                    <Avatar
                                        size="small"
                                        src={historia.responsavel.avatar}
                                        icon={<User />}
                                    >
                                        {historia.responsavel.nome?.charAt(0).toUpperCase()}
                                    </Avatar>
                                    <Text>{historia.responsavel.nome}</Text>
                                </Space>
                            </Descriptions.Item>
                        )}
                    </Descriptions>
                </Space>
            </Card>

            {historia.criterios_aceitacao &&
                historia.criterios_aceitacao.length > 0 && (
                    <Card title="Critérios de Aceitação">
                        <List
                            dataSource={historia.criterios_aceitacao}
                            renderItem={(criterio, _index) => (
                                <List.Item>
                                    <Space>
                                        <CheckCircle2 style={{ color: '#52c41a' }} />
                                        <Text>{criterio}</Text>
                                    </Space>
                                </List.Item>
                            )}
                        />
                    </Card>
                )}

            <Card
                title={
                    <Space>
                        <span>Tarefas</span>
                        <Tag>{tarefas.length} tarefas</Tag>
                    </Space>
                }
            >
                {tarefas.length > 0 ? (
                    <>
                        <div style={{ marginBottom: 16 }}>
                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    marginBottom: 8,
                                }}
                            >
                                <Text type="secondary">Progresso</Text>
                                <Text type="secondary">
                                    {tarefasConcluidas} de {tarefas.length} concluídas ({progresso}%)
                                </Text>
                            </div>
                            <Progress percent={progresso} />
                        </div>

                        <List
                            dataSource={tarefas}
                            renderItem={(tarefa) => (
                                <List.Item>
                                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
                                        <Space>
                                            <Link href={minhasTarefasTarefaDetalhePath(tarefa.id)}>
                                                <Text strong>
                                                    {tarefa.chave_tarefa || `#${tarefa.id}`}
                                                </Text>
                                            </Link>
                                            <Text>{tarefa.titulo}</Text>
                                        </Space>
                                        <Space size="small">
                                            {tarefa.status && (
                                                <Tag
                                                    color={
                                                        tarefa.status === 'done'
                                                            ? 'green'
                                                            : tarefa.status === 'in_progress'
                                                            ? 'blue'
                                                            : 'default'
                                                    }
                                                >
                                                    {tarefa.status}
                                                </Tag>
                                            )}
                                            {tarefa.estimativa && (
                                                <Tag color="orange">{tarefa.estimativa}pts</Tag>
                                            )}
                                        </Space>
                                    </Space>
                                </List.Item>
                            )}
                        />
                    </>
                ) : (
                    <Text type="secondary">Nenhuma tarefa associada</Text>
                )}
            </Card>
        </Space>
    );
}