/**
 * @fileoverview Componente HistoriaUsuarioCard - Card de História de Usuário
 *
 * @description
 * Componente que exibe um card de história de usuário com informações resumidas,
 * incluindo código, título, story points, prioridade e progresso.
 *
 * @module tarefas
 * @author Sistema de Gestão
 * @since 1.0.0
 */

'use client';

import { User } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { Card, Progress, Tag, Space, Typography, Avatar, Tooltip } from 'antd';
import Link from 'next/link';
import { HistoriaUsuario } from '@/types/projeto';

const { Text, Title } = Typography;

interface HistoriaUsuarioCardProps {
    historia: HistoriaUsuario;
    onClick?: () => void;
    showProgress?: boolean;
    showDetails?: boolean;
}

export function HistoriaUsuarioCard({
    historia,
    onClick,
    showProgress = true,
    showDetails = false,
}: HistoriaUsuarioCardProps) {
    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';
        }
    };

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

    const progresso = calcularProgresso();

    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>
                        <Link href={`/historias-usuario/${historia.id}`}>
                            <Tag color="purple">{historia.codigo}</Tag>
                        </Link>
                        <Title level={5} style={{ margin: 0 }}>
                            {historia.titulo}
                        </Title>
                    </Space>
                    {historia.status && (
                        <Tag color={getStatusColor(historia.status)}>
                            {historia.status}
                        </Tag>
                    )}
                </div>

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

                {/* Formato: Como [persona], quero [objetivo], para [benefício] */}
                {(historia.como || historia.quero || historia.para) && showDetails && (
                    <div style={{ fontSize: 12, color: '#666' }}>
                        {historia.como && (
                            <div>
                                <strong>Como</strong> {historia.como}
                            </div>
                        )}
                        {historia.quero && (
                            <div>
                                <strong>Quero</strong> {historia.quero}
                            </div>
                        )}
                        {historia.para && (
                            <div>
                                <strong>Para</strong> {historia.para}
                            </div>
                        )}
                    </div>
                )}

                <Space size="small" wrap>
                    {historia.story_points !== undefined && historia.story_points !== null && (
                        <Tag color="orange">{historia.story_points} SP</Tag>
                    )}
                    {historia.prioridade && (
                        <Tag color={getPrioridadeColor(historia.prioridade)}>
                            {historia.prioridade}
                        </Tag>
                    )}
                    {historia.epico && historia.epico.id && (
                        <Link href={`/epicos/${historia.epico.id}`}>
                            <Tag color={historia.epico.cor || 'default'}>
                                {historia.epico.codigo}
                            </Tag>
                        </Link>
                    )}
                    {historia.tarefas && historia.tarefas.length > 0 && (
                        <Tag>{historia.tarefas.length} tarefas</Tag>
                    )}
                </Space>

                {showProgress && historia.tarefas && historia.tarefas.length > 0 && (
                    <div>
                        <div
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                marginBottom: 4,
                            }}
                        >
                            <Text type="secondary" style={{ fontSize: 12 }}>
                                Progresso
                            </Text>
                            <Text type="secondary" style={{ fontSize: 12 }}>
                                {progresso}%
                            </Text>
                        </div>
                        <Progress percent={progresso} size="small" />
                    </div>
                )}

                {historia.responsavel && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Tooltip title={historia.responsavel.nome}>
                            <Avatar
                                size="small"
                                src={historia.responsavel.avatar}
                                icon={<User />}
                            >
                                {historia.responsavel.nome?.charAt(0).toUpperCase()}
                            </Avatar>
                        </Tooltip>
                        <Text type="secondary" style={{ fontSize: 12 }}>
                            {historia.responsavel.nome}
                        </Text>
                    </div>
                )}
            </Space>
        </Card>
    );
}