import { __ } from '@wordpress/i18n';
import React, { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import {
	Area,
	Bar,
	CartesianGrid,
	ComposedChart,
	Legend,
	ResponsiveContainer,
	Tooltip,
	XAxis,
	YAxis,
} from 'recharts';
import {
	Alert,
	Card,
	ChoiceGroup,
	Page,
	Spinner,
	StatCard,
} from './UI/index.jsx';
import { api } from '../api/index.js';
import { cn, decodeHtmlEntities } from '../lib/utils.js';

const currencySymbol = decodeHtmlEntities(
	window.arrayfunnelAdmin?.currency?.symbol || '$'
);
const DAY_OPTIONS = [
	{ value: 7, label: __( '7 Days', 'arrayfunnel' ) },
	{ value: 30, label: __( '30 Days', 'arrayfunnel' ) },
	{ value: 90, label: __( '90 Days', 'arrayfunnel' ) },
	{ value: 365, label: __( '1 Year', 'arrayfunnel' ) },
];

export default function Home() {
	const [ days, setDays ] = useState( 7 );
	const {
		data: overview,
		isLoading: loadingOverview,
		error: overviewError,
	} = useQuery( {
		queryKey: [ 'analytics', 'overview', days ],
		queryFn: () => api.getOverview( days ),
		staleTime: 2 * 60_000,
		gcTime: 15 * 60_000,
	} );
	const {
		data: chartData,
		isLoading: loadingChart,
		error: chartError,
	} = useQuery( {
		queryKey: [ 'analytics', 'revenue', days ],
		queryFn: () => api.getRevenue( days ),
		staleTime: 2 * 60_000,
		gcTime: 15 * 60_000,
	} );
	const stats = [
		{
			label: __( 'Total Revenue', 'arrayfunnel' ),
			value: formatMoney( overview?.revenue ),
			icon: 'revenue',
		},
		{
			label: __( 'Orders', 'arrayfunnel' ),
			value: overview?.orders || 0,
			icon: 'orders',
		},
		{
			label: __( 'Avg Order Value', 'arrayfunnel' ),
			value: formatMoney( overview?.aov ),
			icon: 'aov',
		},
		{
			label: __( 'Checkout Conversion', 'arrayfunnel' ),
			value: `${ overview?.conversion_rate || 0 }%`,
			icon: 'target',
		},
		{
			label: __( 'Bump Accept Rate', 'arrayfunnel' ),
			value: `${ overview?.bump_rate || 0 }%`,
			icon: 'gift',
		},
		{
			label: __( 'Recovered Revenue', 'arrayfunnel' ),
			value: formatMoney( overview?.recovered_revenue ),
			icon: 'recovery',
		},
	];

	return (
		<Page
			title={ __( 'Home', 'arrayfunnel' ) }
			subtitle={ __(
				'Revenue, checkout conversion, order bumps, and cart recovery in one place.',
				'arrayfunnel'
			) }
			action={
				<ChoiceGroup
					label={ __( 'Reporting period', 'arrayfunnel' ) }
					hideLabel
					compact
					value={ days }
					onChange={ setDays }
					options={ DAY_OPTIONS }
					columns={ 4 }
				/>
			}
		>
			{ overviewError && (
				<Alert type="error">
					{ overviewError.message ||
						__(
							'Could not load the performance summary.',
							'arrayfunnel'
						) }
				</Alert>
			) }
			{ loadingOverview ? (
				<div className="flex justify-center p-12">
					<Spinner />
				</div>
			) : overview ? (
				<section className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
					{ stats.map( ( stat ) => (
						<StatCard
							key={ stat.label }
							label={ stat.label }
							value={ stat.value }
							icon={ stat.icon }
						/>
					) ) }
				</section>
			) : null }

			<Card title={ __( 'Revenue & Orders', 'arrayfunnel' ) }>
				{ chartError ? (
					<Alert type="error">
						{ chartError.message ||
							__(
								'Could not load the revenue trend.',
								'arrayfunnel'
							) }
					</Alert>
				) : loadingChart ? (
					<div className="flex justify-center p-10">
						<Spinner />
					</div>
				) : chartData?.length ? (
					<ResponsiveContainer width="100%" height={ 280 }>
						<ComposedChart
							accessibilityLayer
							data={ chartData }
							margin={ { top: 8, right: 8, left: 0, bottom: 4 } }
						>
							<defs>
								<linearGradient
									id="arrayfunnel-home-revenue"
									x1="0"
									y1="0"
									x2="0"
									y2="1"
								>
									<stop
										offset="5%"
										stopColor="var(--arrayfunnel-primary)"
										stopOpacity={ 0.2 }
									/>
									<stop
										offset="95%"
										stopColor="var(--arrayfunnel-primary)"
										stopOpacity={ 0 }
									/>
								</linearGradient>
							</defs>
							<CartesianGrid
								strokeDasharray="2 4"
								stroke="#ddd"
							/>
							<XAxis
								dataKey="label"
								tick={ { fontSize: 12, fill: '#646970' } }
								axisLine={ false }
								tickLine={ false }
							/>
							<YAxis
								yAxisId="revenue"
								tick={ { fontSize: 12, fill: '#646970' } }
								axisLine={ false }
								tickLine={ false }
								width={ 66 }
								tickFormatter={ ( value ) =>
									`${ currencySymbol }${ value }`
								}
							/>
							<YAxis
								yAxisId="orders"
								orientation="right"
								allowDecimals={ false }
								tick={ { fontSize: 12, fill: '#646970' } }
								axisLine={ false }
								tickLine={ false }
								width={ 36 }
							/>
							<Tooltip
								contentStyle={ {
									borderRadius: 4,
									borderColor: '#ddd',
									fontSize: 13,
								} }
								formatter={ ( value, name, entry ) => [
									entry.dataKey === 'revenue'
										? formatMoney( value )
										: value,
									name,
								] }
							/>
							<Legend wrapperStyle={ { fontSize: 12 } } />
							<Bar
								yAxisId="orders"
								dataKey="orders"
								name={ __( 'Orders', 'arrayfunnel' ) }
								fill="var(--arrayfunnel-primary)"
								fillOpacity={ 0.22 }
								maxBarSize={ 16 }
								radius={ [ 3, 3, 0, 0 ] }
							/>
							<Area
								yAxisId="revenue"
								type="monotone"
								dataKey="revenue"
								name={ __( 'Revenue', 'arrayfunnel' ) }
								stroke="var(--arrayfunnel-primary)"
								strokeWidth={ 2 }
								fill="url(#arrayfunnel-home-revenue)"
							/>
						</ComposedChart>
					</ResponsiveContainer>
				) : (
					<p className="py-8 text-center text-sm text-arrayfunnel-muted">
						{ __(
							'No activity recorded for this period.',
							'arrayfunnel'
						) }
					</p>
				) }
			</Card>

			{ ! loadingOverview && overview && (
				<section className="grid gap-4 lg:grid-cols-3">
					<Card title={ __( 'Checkout Funnel', 'arrayfunnel' ) }>
						<MetricRow
							label={ __( 'Checkout Views', 'arrayfunnel' ) }
							value={ overview.checkout_views || 0 }
						/>
						<MetricRow
							label={ __( 'Completed Orders', 'arrayfunnel' ) }
							value={ overview.orders || 0 }
						/>
						<MetricRow
							label={ __( 'Conversion Rate', 'arrayfunnel' ) }
							value={ `${ overview.conversion_rate || 0 }%` }
							accent
						/>
					</Card>
					<Card title={ __( 'Order Bumps', 'arrayfunnel' ) }>
						<MetricRow
							label={ __( 'Impressions', 'arrayfunnel' ) }
							value={ overview.bump_impressions || 0 }
						/>
						<MetricRow
							label={ __( 'Accepted', 'arrayfunnel' ) }
							value={ overview.bump_accepted || 0 }
						/>
						<MetricRow
							label={ __( 'Accept Rate', 'arrayfunnel' ) }
							value={ `${ overview.bump_rate || 0 }%` }
							accent
						/>
					</Card>
					<Card title={ __( 'Cart Recovery', 'arrayfunnel' ) }>
						<MetricRow
							label={ __( 'Abandoned', 'arrayfunnel' ) }
							value={ overview.abandoned_carts || 0 }
						/>
						<MetricRow
							label={ __( 'Recovered Carts', 'arrayfunnel' ) }
							value={ overview.recovered_carts || 0 }
						/>
						<MetricRow
							label={ __( 'Recovered Revenue', 'arrayfunnel' ) }
							value={ formatMoney( overview.recovered_revenue ) }
							accent
						/>
					</Card>
				</section>
			) }
		</Page>
	);
}

function MetricRow( { label, value, accent = false } ) {
	return (
		<div className="flex items-center justify-between gap-3 border-b border-arrayfunnel-border py-2.5 text-sm last:border-b-0">
			<span className="text-arrayfunnel-muted">{ label }</span>
			<span
				className={ cn(
					'font-semibold',
					accent
						? 'text-arrayfunnel-primary'
						: 'text-arrayfunnel-text'
				) }
			>
				{ value }
			</span>
		</div>
	);
}

function formatMoney( value ) {
	if ( value === null || value === undefined || value === '' ) {
		return '—';
	}
	const amount = Number( value );
	return Number.isFinite( amount )
		? `${ currencySymbol }${ amount.toFixed( 2 ) }`
		: '—';
}