'use client';

import React, { useMemo } from 'react';
import { AlertTriangle, Info, ScrollText, TriangleAlert } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import type { LogsSummary } from '../types';

const ERROR_LEVEL_KEYS = ['error', 'critical', 'emergency', 'alert'] as const;
const INFO_LEVEL_KEYS = ['info', 'notice', 'debug'] as const;

function sumLevels(counts: Record<string, number>, keys: readonly string[]): number {
    return keys.reduce((acc, key) => acc + (counts[key] ?? 0), 0);
}

export type SuporteLogsMetricsProps = {
    summary: LogsSummary;
    isLoading: boolean;
    isError: boolean;
};

export function SuporteLogsMetrics({ summary, isLoading, isError }: SuporteLogsMetricsProps) {
    const counts = summary.counts_by_level ?? {};

    const errorTotal = useMemo(() => sumLevels(counts, ERROR_LEVEL_KEYS), [counts]);
    const infoTotal = useMemo(() => sumLevels(counts, INFO_LEVEL_KEYS), [counts]);
    const warningTotal = counts.warning ?? 0;

    if (isError) {
        return null;
    }

    return (
        <MetricsGrid columns={4}>
            <MetricCard
                icon={<ScrollText size={ICON_SIZE_MD} aria-hidden />}
                label="Total (filtros aplicados)"
                value={summary.total}
                variant="projetos"
                loading={isLoading}
            />
            <MetricCard
                icon={<AlertTriangle size={ICON_SIZE_MD} aria-hidden />}
                label="Erros e críticos"
                value={errorTotal}
                variant="bugs"
                loading={isLoading}
            />
            <MetricCard
                icon={<TriangleAlert size={ICON_SIZE_MD} aria-hidden />}
                label="Avisos"
                value={warningTotal}
                variant="planejamento"
                loading={isLoading}
            />
            <MetricCard
                icon={<Info size={ICON_SIZE_MD} aria-hidden />}
                label="Informativos"
                value={infoTotal}
                variant="concluidos"
                loading={isLoading}
            />
        </MetricsGrid>
    );
}