'use client';

import { AlertCircle, CheckCircle2, TrendingDown, TrendingUp, TriangleAlert } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { Card, Typography, Space, Tooltip } from 'antd';

const { Text, Title } = Typography;

export interface FinancialCardProps {
    title: string;
    value: number | string;
    subtitle?: string;
    icon?: React.ReactNode;
    status?: 'ok' | 'atencao' | 'alerta' | 'excedido';
    trend?: 'up' | 'down' | 'neutral';
    trendValue?: number | string;
    tooltip?: string;
    prefix?: string;
    suffix?: string;
    color?: string;
    size?: 'small' | 'default' | 'large';
}

export function FinancialCard({
    title,
    value,
    subtitle,
    icon,
    status,
    trend,
    trendValue,
    tooltip,
    prefix = 'R$',
    suffix = '',
    color,
    size = 'default',
}: FinancialCardProps) {
    const getStatusColor = () => {
        if (color) return color;
        switch (status) {
            case 'ok':
                return '#52c41a';
            case 'atencao':
                return '#faad14';
            case 'alerta':
                return '#fa8c16';
            case 'excedido':
                return '#ff4d4f';
            default:
                return '#1890ff';
        }
    };

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

    const getTrendIcon = () => {
        switch (trend) {
            case 'up':
                return <TrendingUp style={{ color: '#52c41a' }} />;
            case 'down':
                return <TrendingDown style={{ color: '#ff4d4f' }} />;
            default:
                return null;
        }
    };

    const formatValue = (val: number | string): string => {
        if (typeof val === 'string') return val;
        if (val === 0) return '0,00';
        if (val < 0) return `-${prefix} ${Math.abs(val).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}${suffix}`;
        return `${prefix} ${val.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}${suffix}`;
    };

    const cardContent = (
        <div>
            <Space direction="vertical" size="small" style={{ width: '100%' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <Text type="secondary" style={{ fontSize: size === 'small' ? 12 : 14 }}>
                        {title}
                    </Text>
                    {icon || getStatusIcon()}
                </div>
                <div>
                    <Title
                        level={size === 'small' ? 5 : size === 'large' ? 2 : 4}
                        style={{
                            margin: 0,
                            color: getStatusColor(),
                            fontWeight: 'bold',
                        }}
                    >
                        {formatValue(value)}
                    </Title>
                </div>
                {subtitle && (
                    <Text type="secondary" style={{ fontSize: 12 }}>
                        {subtitle}
                    </Text>
                )}
                {(trend || trendValue) && (
                    <Space size="small">
                        {getTrendIcon()}
                        {trendValue && (
                            <Text
                                type={trend === 'up' ? 'success' : trend === 'down' ? 'danger' : 'secondary'}
                                style={{ fontSize: 12 }}
                            >
                                {typeof trendValue === 'number'
                                    ? `${trendValue > 0 ? '+' : ''}${trendValue.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%`
                                    : trendValue}
                            </Text>
                        )}
                    </Space>
                )}
            </Space>
        </div>
    );

    if (tooltip) {
        return (
            <Tooltip title={tooltip}>
                <Card
                    hoverable
                    style={{
                        borderRadius: 8,
                        border: `1px solid ${getStatusColor()}20`,
                        background: status ? `${getStatusColor()}08` : '#fff',
                    }}
                >
                    {cardContent}
                </Card>
            </Tooltip>
        );
    }

    return (
        <Card
            hoverable
            style={{
                borderRadius: 8,
                border: `1px solid ${getStatusColor()}20`,
                background: status ? `${getStatusColor()}08` : '#fff',
            }}
        >
            {cardContent}
        </Card>
    );
}