import CustomerHeader from '@/components/customers/CustomerHeader';
import CustomerMetrics from '@/components/customers/CustomerMetrics';
import CustomerNotFound from '@/components/customers/CustomerNotFound';
import CustomerOrdersTable from '@/components/customers/CustomerOrdersTable';
import { useGetCustomerQuery } from '@/features/customers/customersApi';
import { selectDateRangeParams } from '@/features/dateRange/dateRangeSlice';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router';

const CustomerDetails = () => {
	const { customerId } = useParams();
	const dateParams = useSelector(selectDateRangeParams);
	const { data, isLoading } = useGetCustomerQuery({
		id: customerId,
		...dateParams,
	});

	const customer = data?.data ?? null;

	if (!isLoading && !customer) {
		return <CustomerNotFound />;
	}

	return (
		<div className="disco:min-h-screen disco:bg-[#f9fafb] disco:px-6 disco:py-2 disco:space-y-3">
			{isLoading ? (
				<div className="disco:space-y-3">
					<div className="disco:h-16 disco:animate-pulse disco:rounded-xl disco:bg-white disco:border disco:border-[#e5e7eb]" />
					<div className="disco:flex disco:gap-3">
						{Array.from({ length: 4 }).map((_, i) => (
							<div
								key={i}
								className="disco:flex-1 disco:h-20 disco:animate-pulse disco:rounded-xl disco:bg-white disco:border disco:border-[#e5e7eb]"
							/>
						))}
					</div>
				</div>
			) : customer ? (
				<>
					<CustomerHeader customer={customer} />
					<CustomerMetrics
						totalSpent={customer.total_spent}
						orders={customer.orders}
						campaignsCount={(customer.campaigns ?? []).length}
					/>
				</>
			) : null}

			<CustomerOrdersTable customerId={customerId} />
		</div>
	);
};

export default CustomerDetails;