import { UsageLimits } from "../../../types/account-dashboard-types";
import {
	formatResetDate,
	isUsageBreakdownItemNotAvailable,
	filterAvailableUsageBreakdowns,
	shouldShowWelcomeBonus,
} from "../../../utils/subscription-utils";
import { UsageBreakdownItem } from "./usage-breakdown-item";
import { WelcomeBonus } from "./welcome-bonus";

interface UsageSummaryProps {
	isEnterpriseUser?: boolean;
	usageLimits: UsageLimits | null;
}

function EmptyData(): React.JSX.Element {
	return <p className="kiro-usage-summary-no-data">No usage data available</p>;
}

export function UsageSummary({
	isEnterpriseUser,
	usageLimits,
}: UsageSummaryProps): React.JSX.Element {
	if (!usageLimits) {
		return <EmptyData />;
	}

	const { billingCycle, subscriptionInfo, usageBreakdowns } = usageLimits;
	const { overageCapable, subscriptionName, upgradeCapable } = subscriptionInfo;
	const availableBreakdowns = filterAvailableUsageBreakdowns(usageBreakdowns);
	const badgeClass = `kiro-subscription-badge--${
		upgradeCapable && !overageCapable ? "basic" : "premium"
	}`;
	const showWelcomeBonus =
		!isEnterpriseUser && shouldShowWelcomeBonus(usageBreakdowns);

	return (
		<div className="kiro-account-dashboard-section">
			{showWelcomeBonus && <WelcomeBonus usageBreakdowns={usageBreakdowns} />}
			<div className="kiro-account-dashboard-row">
				<div className="kiro-usage-summary-estimated-usage">
					<span className="kiro-account-dashboard-label">Estimated Usage</span>
					resets on {formatResetDate(new Date(billingCycle.resetDate))}
				</div>
				<div className={`kiro-subscription-badge ${badgeClass}`}>
					{subscriptionName}
				</div>
			</div>
			{!availableBreakdowns.length ? (
				<EmptyData />
			) : (
				availableBreakdowns.map((item, index) => (
					<UsageBreakdownItem
						key={`${item.type ?? "usage"}-breakdown-item-${index}`}
						item={item}
						isDisabled={isUsageBreakdownItemNotAvailable(item)}
						shouldExcludeProgressBars={isEnterpriseUser}
					/>
				))
			)}
		</div>
	);
}
