/**
 * Precificação por tipo profissional (planejamento financeiro do projeto).
 * @route /projetos/[id]/planejamento/financeiro/precificacao
 */

'use client';

import { Calculator, CheckCircle2, ChevronLeft, CircleDollarSign, Clock } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Table, Button, Space, Spin, Alert, Tooltip } from 'antd';
import { message } from '@/lib/feedback/message';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { formatCurrency } from '@/lib/utils/export';
import type { ColumnsType } from 'antd/es/table';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import PageHeaderPagina from '@/components/layouts/PageHeaderPagina';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import ContentCard from '@/components/layouts/ContentCard';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { projetosProjetoPath } from './paths';
import type { ProjetoPrecificacaoItem, ProjetoPrecificacaoListResponse, ProjetoPrecificacaoResumo } from './types';
import { PrecificacaoDriversTipologicosCard } from '@/features/crm/fluxo-comercial';
import { useProjetoLayoutContextOptional } from '@/components/layouts/ProjetoLayout/ProjetoLayoutContext';

export function ProjetoPlanejamentoPrecificacaoScreen() {
    const params = useParams();
    const router = useRouter();
    const projetoId = params?.id as string;
    const layoutCtx = useProjetoLayoutContextOptional();
    const categoriaCodigo = layoutCtx?.projeto?.categoria_projeto?.codigo ?? null;

    const {
        data: precificacaoData,
        isLoading,
        error} = useQueryCache<ProjetoPrecificacaoListResponse>({
        queryKey: queryKeys.projetos.precificacao(projetoId),
        endpoint: API_ENDPOINTS.projetos.precificacao.index(projetoId),
        staleTime: 2 * 60 * 1000,
        gcTime: 10 * 60 * 1000,
        enabled: !!projetoId});

    const { data: resumo } = useQueryCache<ProjetoPrecificacaoResumo>({
        queryKey: queryKeys.projetos.precificacaoResumo(projetoId),
        endpoint: API_ENDPOINTS.projetos.precificacao.resumo(projetoId),
        staleTime: 2 * 60 * 1000,
        gcTime: 10 * 60 * 1000,
        enabled: !!projetoId});

    const calcularMutation = useMutationCache<Record<string, unknown>, Record<string, unknown>>({
        endpoint: API_ENDPOINTS.projetos.precificacao.calcular(projetoId),
        method: 'POST',
        invalidateQueries: [queryKeys.projetos.precificacao(projetoId)],
        onSuccess: () => {
            message.success('Precificação calculada com sucesso!');
        }});

    const itens = precificacaoData?.itens ?? [];
    const resumoData: Partial<ProjetoPrecificacaoResumo> = resumo ?? precificacaoData?.resumo ?? {};

    const columns: ColumnsType<ProjetoPrecificacaoItem> = useMemo(
        () => [
            {
                title: 'Tipo Profissional',
                key: 'tipo_profissional',
                sorter: (a, b) =>
                    String(a.tipo_profissional?.nome ?? '').localeCompare(
                        String(b.tipo_profissional?.nome ?? ''),
                        'pt'
                    ),
                render: (_: unknown, record: ProjetoPrecificacaoItem) => record.tipo_profissional?.nome || '-'},
            {
                title: 'Horas Estimadas',
                dataIndex: 'horas_estimadas',
                key: 'horas_estimadas',
                sorter: (a, b) => (a.horas_estimadas ?? 0) - (b.horas_estimadas ?? 0),
                render: (horas: number) => `${horas.toLocaleString('pt-BR')}h`,
                align: 'right'},
            {
                title: 'Horas Reais',
                dataIndex: 'horas_reais',
                key: 'horas_reais',
                sorter: (a, b) => (a.horas_reais ?? -1) - (b.horas_reais ?? -1),
                render: (horas?: number) =>
                    horas !== undefined ? `${horas.toLocaleString('pt-BR')}h` : '-',
                align: 'right'},
            {
                title: 'Valor/Hora',
                dataIndex: 'valor_hora',
                key: 'valor_hora',
                sorter: (a, b) => (a.valor_hora ?? 0) - (b.valor_hora ?? 0),
                render: (valor: number) => formatCurrency(valor),
                align: 'right'},
            {
                title: 'Custo Total',
                dataIndex: 'custo_total',
                key: 'custo_total',
                sorter: (a, b) => (a.custo_total ?? 0) - (b.custo_total ?? 0),
                render: (custo: number) => (
                    <span style={{ fontWeight: 500 }}>{formatCurrency(custo)}</span>
                ),
                align: 'right'},
        ],
        []
    );

    const handleCalcular = () => {
        calcularMutation.mutate({});
    };

    const voltarProjeto = () => router.push(projetosProjetoPath(projetoId));

    if (isLoading) {
        return (
            <ProjetoLayout
                projetoId={projetoId}
                pageTitle="Precificação"
                pageIcon="tag"
                titleSection="Precificação"
            >
                <div style={{ textAlign: 'center', padding: '50px' }}>
                    <Spin size="large" />
                </div>
            </ProjetoLayout>
        );
    }

    if (error) {
        return (
            <ProjetoLayout
                projetoId={projetoId}
                pageTitle="Erro"
                pageIcon="exclamation-triangle"
                titleSection="Precificação"
            >
                <Alert
                    message="Erro ao carregar precificação"
                    description={String((error as { message?: string })?.message || error)}
                    type="error"
                    showIcon
                    action={
                        <Button size="small" onClick={voltarProjeto}>
                            Voltar
                        </Button>
                    }
                />
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Precificação do Projeto"
            pageIcon="tag"
            titleSection="Precificação"
        >
            <PageHeaderPagina
                title="Precificação do Projeto"
                actions={
                    <Space wrap size={8} align="center">
                        <Tooltip title="Voltar ao projeto">
                            <span style={{ display: 'inline-block' }}>
                                <Button onClick={voltarProjeto}>
                                    <ChevronLeft size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />
                                    Voltar
                                </Button>
                            </span>
                        </Tooltip>
                        <Tooltip title="Recalcular custos e totais da precificação">
                            <span style={{ display: 'inline-block' }}>
                                <ButtonHeaderIcon
                                    icon={<Calculator size={ICON_SIZE_MD} aria-hidden />}
                                    title="Recalcular"
                                    onClick={handleCalcular}
                                />
                            </span>
                        </Tooltip>
                    </Space>
                }
            />

            <OperativeRouteHint
                type="info"
                message="Estratégia de precificação e margem"
                description="Compare horas estimadas vs reais e custo total por perfil antes de fixar preço ao cliente. Recalcule após mudanças de escopo ou composição de equipe; cruze com orçamento e viabilidade financeira."
            />

            <PrecificacaoDriversTipologicosCard categoriaCodigo={categoriaCodigo} />

            <MetricsGrid
                columns={resumoData.horas_reais !== undefined ? 3 : 2}
                style={{ marginBottom: 24 }}
            >
                <MetricCard
                    icon={<Clock size={ICON_SIZE_MD} aria-hidden />}
                    label="Total de Horas"
                    value={`${resumoData.total_horas ?? 0}h`}
                    variant="projetos"
                />
                <MetricCard
                    icon={<CircleDollarSign size={ICON_SIZE_MD} aria-hidden />}
                    label="Custo Total"
                    value={formatCurrency(resumoData.total_custo ?? 0)}
                    variant="emAndamento"
                />
                {resumoData.horas_reais !== undefined && (
                    <MetricCard
                        icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                        label="Horas Reais"
                        value={`${resumoData.horas_reais}h`}
                        variant="concluidos"
                    />
                )}
            </MetricsGrid>

            <ContentCard
                title="Itens de Precificação"
                headerActions={
                    <Button
                        type="primary"
                        icon={<Calculator size={ICON_SIZE_MD} aria-hidden />}
                        onClick={handleCalcular}
                        loading={calcularMutation.isPending}
                    >
                        Recalcular
                    </Button>
                }
            >
                <Table
                    columns={columns}
                    dataSource={itens}
                    loading={isLoading}
                    rowKey="tipo_profissional_id"
                    pagination={false}
                    summary={(pageData) => {
                        const totalHoras = pageData.reduce(
                            (sum, item) => sum + (item.horas_estimadas || 0),
                            0
                        );
                        const totalCusto = pageData.reduce(
                            (sum, item) => sum + (item.custo_total || 0),
                            0
                        );

                        return (
                            <Table.Summary fixed>
                                <Table.Summary.Row>
                                    <Table.Summary.Cell index={0}>
                                        <strong>Total</strong>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={1} align="right">
                                        <strong>{totalHoras.toLocaleString('pt-BR')}h</strong>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        -
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={3} align="right">
                                        -
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={4} align="right">
                                        <strong>{formatCurrency(totalCusto)}</strong>
                                    </Table.Summary.Cell>
                                </Table.Summary.Row>
                            </Table.Summary>
                        );
                    }}
                />
            </ContentCard>
        </ProjetoLayout>
    );
}