'use client';

import { Banknote, BarChart3, CircleDollarSign, Clock, FileText } from 'lucide-react';
import {
    Col,
    Empty,
    Progress,
    Row,
    Space,
    Tag,
    Typography,
    Button,
} from 'antd';
import Link from 'next/link';

import { ICON_SIZE_MD } from '@/components/icons';
import { PermissionGuard } from '@/components/permissions';
import { FinancialCard } from '../FinancialCard';
import { BudgetForecast } from '../BudgetForecast';
import { BudgetComparison } from '../BudgetComparison';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useTenantCurrency } from '@/hooks/useTenantCurrency';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import {
    CPI_SPI_GLOSSARIO_COPY,
    FORMULA_CPI_SPI_VERSION,
} from '@/features/projetos/projeto-produto-releases/utils/cpiSpiGlossario';
import { queryKeys } from '@/lib/cache/queryKeys';
import { LoadingState } from '@/components/ui/LoadingState';

const { Title, Text } = Typography;

export interface FinancialSummaryProps {
    projetoId: number | string;
    showDetails?: boolean;
    /** TASK-PSC-055 — desligar fetch fora da tab Financeiro. */
    enabled?: boolean;
}

export interface ResumoFinanceiro {
    projeto_id: number;
    orcamento: number;
    valor_realizado: number;
    custo_total: number;
    custo_tarefas: number;
    custo_direto: number;
    custo_fixo: number;
    custo_variavel: number;
    horas_total: number;
    custo_por_status: Record<string, { total: number; horas: number; quantidade: number }>;
    movimentos_financeiros: {
        receitas: number;
        despesas: number;
        receitas_pagas: number;
        despesas_pagas: number;
        saldo: number;
    };
    indicadores: {
        cpi: number | null;
        variacao_orcamento_percentual: number | null;
        roi_percentual: number | null;
        margem_lucro_percentual: number | null;
    };
    status_orcamento: 'ok' | 'atencao' | 'alerta' | 'excedido';
    percentual_orcamento_utilizado: number | null;
}

export function FinancialSummary({
    projetoId,
    showDetails = true,
    enabled = true,
}: FinancialSummaryProps) {
    const { formatCurrency } = useTenantCurrency();
    const { data: resumoData, isLoading } = useQueryCache<ResumoFinanceiro>({
        queryKey: queryKeys.projetos.resumoFinanceiro(projetoId),
        endpoint: API_ENDPOINTS.projetos.resumoFinanceiro(projetoId),
        enabled: !!projetoId && enabled,
        staleTime: 2 * 60 * 1000, // 2 minutos
        gcTime: 10 * 60 * 1000,
    });

    if (!enabled) {
        return null;
    }

    if (isLoading) {
        return (
            <div style={{ textAlign: 'center', padding: '40px' }}>
                <LoadingState size="large" label="Carregando resumo financeiro..." />
            </div>
        );
    }

    if (!resumoData) {
        return <Empty description="Nenhum dado financeiro disponível" />;
    }

    const {
        orcamento,
        valor_realizado,
        custo_total,
        custo_tarefas,
        custo_direto,
        horas_total,
        movimentos_financeiros,
        indicadores,
        status_orcamento,
        percentual_orcamento_utilizado,
    } = resumoData;

    const saldoOrcamento = orcamento - valor_realizado;
    const percentualUtilizado = percentual_orcamento_utilizado ?? 0;

    return (
        <div>
            <Title level={4} style={{ marginBottom: 16 }}>
                <BarChart3 style={{ marginRight: 8 }} />
                Resumo Financeiro
            </Title>

            <Space wrap style={{ marginBottom: 24 }}>
                <PermissionGuard permission="financeiro.visualizar">
                    <Link href={`/financeiro/movimentos?pr=${encodeURIComponent(String(projetoId))}`}>
                        <Button icon={<Banknote size={ICON_SIZE_MD} />}>
                            Ver movimentos do projeto
                        </Button>
                    </Link>
                </PermissionGuard>
                <PermissionGuard permission="financeiro.notas-fiscais.visualizar">
                    <Link href="/financeiro/notas-fiscais">
                        <Button icon={<FileText size={ICON_SIZE_MD} />}>
                            Notas fiscais
                        </Button>
                    </Link>
                </PermissionGuard>
            </Space>

            <Row gutter={[16, 16]}>
                {/* Orçamento */}
                <Col xs={24} sm={12} md={8} lg={6}>
                    <FinancialCard
                        title="Orçamento"
                        value={orcamento}
                        status={status_orcamento}
                        icon={<CircleDollarSign />}
                        tooltip="Orçamento total do projeto"
                    />
                </Col>

                {/* Valor Realizado */}
                <Col xs={24} sm={12} md={8} lg={6}>
                    <FinancialCard
                        title="Valor Realizado"
                        value={valor_realizado}
                        status={status_orcamento}
                        subtitle={`${percentualUtilizado.toFixed(1)}% do orçamento`}
                        icon={<CircleDollarSign />}
                        tooltip="Valor total já gasto no projeto"
                    />
                </Col>

                {/* Saldo do Orçamento */}
                <Col xs={24} sm={12} md={8} lg={6}>
                    <FinancialCard
                        title="Saldo Disponível"
                        value={saldoOrcamento}
                        status={saldoOrcamento < 0 ? 'excedido' : saldoOrcamento < orcamento * 0.1 ? 'alerta' : 'ok'}
                        trend={saldoOrcamento < 0 ? 'down' : 'neutral'}
                        icon={<CircleDollarSign />}
                        tooltip="Orçamento restante disponível"
                    />
                </Col>

                {/* Custo Total */}
                <Col xs={24} sm={12} md={8} lg={6}>
                    <FinancialCard
                        title="Custo Total"
                        value={custo_total}
                        subtitle={`${horas_total.toFixed(1)} horas trabalhadas`}
                        icon={<Clock />}
                        tooltip="Custo total do projeto (tarefas + custos diretos)"
                    />
                </Col>

                {/* ROI */}
                {indicadores.roi_percentual !== null && (
                    <Col xs={24} sm={12} md={8} lg={6}>
                        <FinancialCard
                            title="ROI"
                            value={indicadores.roi_percentual}
                            suffix="%"
                            prefix=""
                            status={indicadores.roi_percentual > 0 ? 'ok' : 'alerta'}
                            trend={indicadores.roi_percentual > 0 ? 'up' : 'down'}
                            icon={<BarChart3 />}
                            tooltip="Retorno sobre Investimento"
                        />
                    </Col>
                )}

                {/* Margem de Lucro */}
                {indicadores.margem_lucro_percentual !== null && (
                    <Col xs={24} sm={12} md={8} lg={6}>
                        <FinancialCard
                            title="Margem de Lucro"
                            value={indicadores.margem_lucro_percentual}
                            suffix="%"
                            prefix=""
                            status={indicadores.margem_lucro_percentual > 20 ? 'ok' : indicadores.margem_lucro_percentual > 10 ? 'atencao' : 'alerta'}
                            icon={<BarChart3 />}
                            tooltip="Margem de lucro do projeto"
                        />
                    </Col>
                )}

                {/* CPI — tipológico Waygest (TASK-PPS-037); não altera o cálculo da API */}
                {indicadores.cpi !== null && (
                    <Col xs={24} sm={12} md={8} lg={6}>
                        <FinancialCard
                            title="CPI"
                            value={indicadores.cpi}
                            prefix=""
                            suffix=""
                            status={indicadores.cpi >= 1 ? 'ok' : indicadores.cpi >= 0.9 ? 'atencao' : 'alerta'}
                            subtitle={`${CPI_SPI_GLOSSARIO_COPY.aviso} · ${FORMULA_CPI_SPI_VERSION}`}
                            icon={<BarChart3 />}
                            tooltip={`${CPI_SPI_GLOSSARIO_COPY.cpi} Fórmula: ${FORMULA_CPI_SPI_VERSION}.`}
                        />
                    </Col>
                )}

                {/* Saldo Financeiro */}
                {movimentos_financeiros && (
                    <Col xs={24} sm={12} md={8} lg={6}>
                        <FinancialCard
                            title="Saldo Financeiro"
                            value={movimentos_financeiros.saldo}
                            status={movimentos_financeiros.saldo > 0 ? 'ok' : 'alerta'}
                            subtitle={`Receitas: ${formatCurrency(movimentos_financeiros.receitas_pagas)}`}
                            icon={<CircleDollarSign />}
                            tooltip="Saldo líquido (receitas - despesas pagas)"
                        />
                    </Col>
                )}
            </Row>

            {showDetails && (
                <>
                    {/* Progresso do Orçamento */}
                    <div style={{ marginTop: 24 }}>
                        <Space direction="vertical" style={{ width: '100%' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <Text strong>Utilização do Orçamento</Text>
                                <Tag color={status_orcamento === 'ok' ? 'green' : status_orcamento === 'atencao' ? 'orange' : status_orcamento === 'alerta' ? 'orange' : 'red'}>
                                    {percentualUtilizado.toFixed(1)}%
                                </Tag>
                            </div>
                            <Progress
                                percent={Math.min(percentualUtilizado, 100)}
                                status={status_orcamento === 'excedido' ? 'exception' : status_orcamento === 'alerta' ? 'active' : 'normal'}
                                strokeColor={
                                    status_orcamento === 'ok'
                                        ? '#52c41a'
                                        : status_orcamento === 'atencao'
                                        ? '#faad14'
                                        : status_orcamento === 'alerta'
                                        ? '#fa8c16'
                                        : '#ff4d4f'
                                }
                            />
                        </Space>
                    </div>

                    {/* Detalhamento de Custos */}
                    <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
                        <Col xs={24} sm={12} md={8}>
                            <FinancialCard
                                title="Custo das Tarefas"
                                value={custo_tarefas}
                                subtitle={`${horas_total.toFixed(1)} horas`}
                                size="small"
                            />
                        </Col>
                        <Col xs={24} sm={12} md={8}>
                            <FinancialCard
                                title="Custos Diretos"
                                value={custo_direto}
                                size="small"
                            />
                        </Col>
                        {resumoData.custo_por_status && Object.keys(resumoData.custo_por_status).length > 0 && (
                            <Col xs={24} sm={12} md={8}>
                                <div style={{ padding: 16, background: '#f5f5f5', borderRadius: 8 }}>
                                    <Text strong style={{ display: 'block', marginBottom: 8 }}>
                                        Custo por Status
                                    </Text>
                                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
                                        {Object.entries(resumoData.custo_por_status).map(([status, dados]) => (
                                            <div key={status} style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                <Tag>{status}</Tag>
                                                <Text>
                                                    {formatCurrency(dados.total)}
                                                    {' '}({dados.quantidade} tarefas)
                                                </Text>
                                            </div>
                                        ))}
                                    </Space>
                                </div>
                            </Col>
                        )}
                    </Row>
                </>
            )}

            {/* Forecast e Comparação */}
            <div style={{ marginTop: 48 }}>
                <BudgetForecast projetoId={projetoId} />
            </div>

            <div style={{ marginTop: 48 }}>
                <BudgetComparison projetoId={projetoId} />
            </div>
        </div>
    );
}