'use client';

import { AlertCircle, CheckCircle2, CircleDollarSign, Clock, TriangleAlert } from 'lucide-react';
import {
    Alert,
    Card,
    Col,
    Empty,
    Progress,
    Row,
    Space,
    Tag,
    Typography,
} from 'antd';

import { ICON_SIZE_MD } from '@/components/icons';
import { FinancialCard } from '../FinancialCard';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { LoadingState } from '@/components/ui/LoadingState';

const { Title, Text } = Typography;

export interface BudgetComparisonProps {
    projetoId: number | string;
}

export interface ComparisonData {
    projeto_id: number;
    orcamento: {
        planejado: number;
        utilizado: number;
        saldo: number;
        percentual_utilizado: number;
        percentual_saldo: number;
    };
    custos: {
        real: number;
        planejado: number;
        variacao: number;
        variacao_percentual: number;
    };
    horas: {
        real: number;
        planejado: number;
        variacao: number;
        variacao_percentual: number;
    };
    status: 'ok' | 'atencao' | 'alerta' | 'excedido';
    alertas: Array<{
        tipo: string;
        severidade: string;
        titulo: string;
        mensagem: string;
        acao: string;
    }>;
}

export function BudgetComparison({ projetoId }: BudgetComparisonProps) {
    const { data: comparisonData, isLoading } = useQueryCache<ComparisonData>({
        queryKey: queryKeys.projetos.atualVsPlanned(projetoId),
        endpoint: API_ENDPOINTS.projetos.actualVsPlanned(projetoId),
        enabled: !!projetoId,
        staleTime: 2 * 60 * 1000, // 2 minutos
        gcTime: 10 * 60 * 1000,
    });

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

    if (!comparisonData) {
        return <Empty description="Nenhum dado de comparação disponível" />;
    }

    const { orcamento, custos, horas, status, alertas } = comparisonData;

    const getStatusColor = () => {
        switch (status) {
            case 'ok':
                return 'green';
            case 'atencao':
                return 'orange';
            case 'alerta':
                return 'orange';
            case 'excedido':
                return 'red';
            default:
                return 'default';
        }
    };

    const getStatusIcon = () => {
        switch (status) {
            case 'ok':
                return <CheckCircle2 style={{ color: '#52c41a' }} />;
            case 'atencao':
                return <TriangleAlert style={{ color: '#faad14' }} />;
            case 'alerta':
                return <AlertCircle style={{ color: '#fa8c16' }} />;
            case 'excedido':
                return <AlertCircle style={{ color: '#ff4d4f' }} />;
            default:
                return null;
        }
    };

    return (
        <div>
            <Title level={5} style={{ marginBottom: 24 }}>
                <CircleDollarSign style={{ marginRight: 8 }} />
                Comparação: Real vs Planejado
            </Title>

            {/* Alertas */}
            {alertas && alertas.length > 0 && (
                <Space direction="vertical" style={{ width: '100%', marginBottom: 24 }}>
                    {alertas.map((alerta, index) => (
                        <Alert
                            key={index}
                            message={alerta.titulo}
                            description={alerta.mensagem}
                            type={alerta.tipo as 'success' | 'info' | 'warning' | 'error'}
                            showIcon
                            closable
                        />
                    ))}
                </Space>
            )}

            {/* Status Geral */}
            <Card style={{ marginBottom: 24 }}>
                <Space>
                    {getStatusIcon()}
                    <Text strong>Status do Orçamento: </Text>
                    <Tag color={getStatusColor()}>{status.toUpperCase()}</Tag>
                </Space>
            </Card>

            {/* Orçamento */}
            <Card title="Orçamento" style={{ marginBottom: 24 }}>
                <Row gutter={[16, 16]}>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Orçamento Planejado"
                            value={orcamento.planejado}
                            size="small"
                        />
                    </Col>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Orçamento Utilizado"
                            value={orcamento.utilizado}
                            subtitle={`${orcamento.percentual_utilizado.toFixed(1)}%`}
                            size="small"
                            status={status}
                        />
                    </Col>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Saldo Disponível"
                            value={orcamento.saldo}
                            subtitle={`${orcamento.percentual_saldo.toFixed(1)}%`}
                            size="small"
                            status={orcamento.saldo < 0 ? 'excedido' : orcamento.percentual_saldo < 10 ? 'alerta' : 'ok'}
                        />
                    </Col>
                </Row>
                <div style={{ marginTop: 16 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                        <Text>Utilização do Orçamento</Text>
                        <Text strong>{orcamento.percentual_utilizado.toFixed(1)}%</Text>
                    </div>
                    <Progress
                        percent={Math.min(orcamento.percentual_utilizado, 100)}
                        status={status === 'excedido' ? 'exception' : status === 'alerta' ? 'active' : 'normal'}
                        strokeColor={
                            status === 'ok'
                                ? '#52c41a'
                                : status === 'atencao'
                                ? '#faad14'
                                : status === 'alerta'
                                ? '#fa8c16'
                                : '#ff4d4f'
                        }
                    />
                </div>
            </Card>

            {/* Custos */}
            <Card title="Custos" style={{ marginBottom: 24 }}>
                <Row gutter={[16, 16]}>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Custo Real"
                            value={custos.real}
                            size="small"
                            icon={<CircleDollarSign />}
                        />
                    </Col>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Custo Planejado"
                            value={custos.planejado}
                            size="small"
                            icon={<CircleDollarSign />}
                        />
                    </Col>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Variação"
                            value={custos.variacao}
                            subtitle={`${custos.variacao_percentual > 0 ? '+' : ''}${custos.variacao_percentual.toFixed(1)}%`}
                            size="small"
                            status={custos.variacao > 0 ? 'alerta' : 'ok'}
                            trend={custos.variacao > 0 ? 'up' : 'down'}
                            trendValue={custos.variacao_percentual}
                        />
                    </Col>
                </Row>
            </Card>

            {/* Horas */}
            <Card title="Horas">
                <Row gutter={[16, 16]}>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Horas Reais"
                            value={horas.real}
                            prefix=""
                            suffix="h"
                            size="small"
                            icon={<Clock />}
                        />
                    </Col>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Horas Planejadas"
                            value={horas.planejado}
                            prefix=""
                            suffix="h"
                            size="small"
                            icon={<Clock />}
                        />
                    </Col>
                    <Col xs={24} sm={8}>
                        <FinancialCard
                            title="Variação"
                            value={horas.variacao}
                            prefix=""
                            suffix="h"
                            subtitle={`${horas.variacao_percentual > 0 ? '+' : ''}${horas.variacao_percentual.toFixed(1)}%`}
                            size="small"
                            status={horas.variacao > 0 ? 'alerta' : 'ok'}
                            trend={horas.variacao > 0 ? 'up' : 'down'}
                            trendValue={horas.variacao_percentual}
                        />
                    </Col>
                </Row>
            </Card>
        </div>
    );
}