import {Line} from 'react-chartjs-2';
import {
	Chart as ChartJS,
	CategoryScale,
	LinearScale,
	PointElement,
	LineElement,
	Title,
	Tooltip,
	Legend
} from 'chart.js';
import {__} from '@wordpress/i18n';
import {dateI18n} from '@wordpress/date';
import { useMemo } from 'react';

ChartJS.register(
	CategoryScale,
	LinearScale,
	PointElement,
	LineElement,
	Title,
	Tooltip,
	Legend
);

const rgba = ( hex, a = 1 ) =>
	`rgba(${parseInt( hex.slice( 1 ), 16 ) >> 16 & 255},
        ${parseInt( hex.slice( 1 ), 16 ) >> 8 & 255},
        ${parseInt( hex.slice( 1 ), 16 ) & 255},
        ${a})`;

const METRIC_STYLES = {
	impressions:    {
		label:           __( 'Impressions', 'adpresso' ),
		borderColor:     rgba( '#3B82B6' ),
		backgroundColor: rgba( '#3B82B6', 0.5 ),
		yAxisID:         'yLeft' // Standard: linke Achse
	},
	clicks:         {
		label:           __( 'Clicks', 'adpresso' ),
		borderColor:     rgba( '#A78C2D' ),
		backgroundColor: rgba( '#A78C2D', 0.5 ),
		yAxisID:         'yLeft'
	},
	ctr:            {
		label:           __( 'CTR (%)', 'adpresso' ),
		borderColor:     rgba( '#34875C' ),
		backgroundColor: rgba( '#34875C', 0.5 ),
		yAxisID:         'yRight' // Rate-Metriken auf die rechte Achse
	},
	viewability:    {
		label:           __( 'Active View Rate (%)', 'adpresso' ),
		borderColor:     rgba( '#62499C' ),
		backgroundColor: rgba( '#62499C', 0.5 ),
		yAxisID:         'yRight',
		premium:         true
	},
	impressions_av: {
		label:           __( 'Active View Impressions', 'adpresso' ),
		borderColor:     rgba( '#9E3B32' ),
		backgroundColor: rgba( '#9E3B32', 0.5 ),
		yAxisID:         'yLeft',
		premium:         true
	}
};

const {dateFormat} = window.adpressoAnalyticsData || {dateFormat: 'F j, Y'};

const ChartRenderer = ( {chartData, visibleMetrics, compareData = null} ) => {
	const datasets = [];
	const labels = chartData.map( item => {
		if ( !item.date ) {
			return '-';
		}

		try {
			return dateI18n( dateFormat, `${item.date}T12:00:00` );
		} catch ( e ) {
			return item.date;
		}
	} );

	visibleMetrics.forEach( key => {
		if ( !METRIC_STYLES[key] ) {
			return;
		}

		datasets.push( {
			...METRIC_STYLES[key],
			metricKey: key,
			data: chartData.map( item => item[key] )
		} );

		if ( compareData ) {
			datasets.push( {
				...METRIC_STYLES[key],
				metricKey: key,
				label: `${METRIC_STYLES[key].label} (${__( 'Previous', 'adpresso' )})`,
				data:            compareData.map( item => item[key] ),
				borderColor:     METRIC_STYLES[key].backgroundColor,
				backgroundColor: 'transparent',
				borderDash:      [5, 5],
				pointRadius:     2
			} );
		}
	} );

	const scales = {
		x:      {
			ticks: {
				autoSkip: true,          // Überspringt automatisch Labels, wenn es zu eng wird
				maxTicksLimit: 25,       // Zeigt maximal 15 Datumswerte an (der Rest wird ausgeblendet, Linie bleibt aber präzise)
				maxRotation: 45,         // Erzwingt einen schönen 45-Grad-Winkel (verhindert wildes Hin- und Herspringen)
				minRotation: 45,
				padding: 10              // Gibt den Labels etwas Luft nach oben zur X-Achse
			},
			grid: {
				display: false           // Optional: Blendet die vertikalen Gitterlinien aus, macht den Chart viel ruhiger
			}
		},
		yLeft:  {
			type:     'linear',
			display:  true,
			position: 'left',
			title:    {display: true, text: __( 'Count', 'adpresso' )}
		},
		yRight: {
			type:     'linear',
			display:  false,
			position: 'right',
			title:    {display: true, text: __( 'Rate (%)', 'adpresso' )},
			grid:     {drawOnChartArea: false}
		}
	};

	// 1. Prüfen, welche Arten von Metriken aktuell ausgewählt sind
	const hasCountMetric = visibleMetrics.some( key => METRIC_STYLES[key]?.yAxisID === 'yLeft' );
	const hasRateMetric  = visibleMetrics.some( key => METRIC_STYLES[key]?.yAxisID === 'yRight' );

	// 2. Skalen streng nach METRIC_STYLES ein- oder ausblenden
	scales.yLeft.display  = hasCountMetric;
	scales.yRight.display = hasRateMetric;

	// 3. UX-Verbesserung: Wenn NUR Prozentwerte gewählt sind,
	// schieben wir die rechte Achse optisch nach links, damit der Chart dort nicht "leer" ist.
	if ( !hasCountMetric && hasRateMetric ) {
		scales.yRight.position = 'left';
	} else {
		scales.yRight.position = 'right';
	}

	const data = useMemo(() => ({
		labels: labels,
		datasets: datasets
	}), [labels, datasets]);

	const options = useMemo(() => ({
		responsive: true,
		maintainAspectRatio: false,
		interaction: {mode: 'index', intersect: false},
		plugins:     {
			legend: false,
			title:  {display: false, text: __( 'Performance Overview', 'adpresso' )}
		},
		scales:      scales
	}), [visibleMetrics]);

	return <Line options={options} data={data}/>;
};

export default ChartRenderer;