'use client';

import React, { useMemo } from 'react';
import dynamic from 'next/dynamic';
import { Empty, Typography } from 'antd';
import dayjs from 'dayjs';
import ContentCard from '@/components/layouts/ContentCard/ContentCard';
import type { LogsSummarySeriesPoint } from '../types';
import styles from './SuporteLogsOcorrenciasChart.module.scss';

const LazyLineChart = dynamic(
    () => import('@/components/lazy').then((m) => m.LazyLineChart),
    { ssr: false },
);

export type SuporteLogsOcorrenciasChartProps = {
    series: LogsSummarySeriesPoint[];
    isLoading?: boolean;
};

/**
 * Ocorrências por dia — abaixo da listagem de logs.
 */
export function SuporteLogsOcorrenciasChart({ series, isLoading = false }: SuporteLogsOcorrenciasChartProps) {
    const chartData = useMemo(
        () =>
            series.map((p) => ({
                ...p,
                label: dayjs(p.date).format('DD/MM'),
            })),
        [series],
    );

    const hasAny = chartData.some((p) => p.total > 0);
    const fromLabel = series[0]?.date ? dayjs(series[0].date).format('DD/MM/YYYY') : '';
    const toLabel = series.length
        ? dayjs(series[series.length - 1].date).format('DD/MM/YYYY')
        : '';

    return (
        <section
            className={styles.section}
            aria-labelledby="suporte-logs-ocorrencias-heading"
            data-testid="suporte-logs-ocorrencias-chart"
        >
            <ContentCard
                className={styles.card}
                title={
                    <Typography.Title level={5} id="suporte-logs-ocorrencias-heading" style={{ margin: 0 }}>
                        Ocorrências por dia
                    </Typography.Title>
                }
                headerActions={
                    fromLabel && toLabel ? (
                        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                            {fromLabel} — {toLabel}
                        </Typography.Text>
                    ) : null
                }
            >
                {isLoading && !series.length ? (
                    <div className={styles.placeholder} aria-busy>
                        Carregando série…
                    </div>
                ) : !hasAny ? (
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description="Sem ocorrências neste período"
                    />
                ) : (
                    <div className={styles.chartWrap}>
                        <LazyLineChart
                            data={chartData}
                            dataKey="label"
                            lines={[
                                { key: 'total', name: 'Total', color: '#1c84c6', strokeWidth: 2 },
                                { key: 'pending', name: 'Pendentes', color: '#ed5565', strokeWidth: 2 },
                                { key: 'resolved', name: 'Resolvidos', color: '#1ab394', strokeWidth: 2 },
                            ]}
                            height={280}
                            showLegend
                            xAxisInterval="preserveStartEnd"
                            tickFontSize={11}
                            yAxisDomain={[0, 'auto']}
                            yAxisTickFormatter={(value) =>
                                new Intl.NumberFormat('pt-BR', { notation: 'compact' }).format(value)
                            }
                        />
                    </div>
                )}
            </ContentCard>
        </section>
    );
}