import { useOverageSettings } from "../../../hooks/useOverageSettings";
import { UsageLimits } from "../../../types/account-dashboard-types";
import { OverageTable } from "./overage-table";

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

export function OverageSettings({
	isEnterpriseUser,
	usageLimits,
}: OverageSettingsProps): React.JSX.Element | null {
	const {
		overageEnabled,
		updating,
		handleOverageToggle,
		resourceToOverageMap,
		shouldShowOverageTable,
		formatCurrency,
		generateOverageText,
	} = useOverageSettings({
		usageLimits,
	});

	const isDisabled = updating || isEnterpriseUser;
	const overageEnabledLabel = overageEnabled ? "Enabled" : "Disabled";
	const showOverageTable = shouldShowOverageTable && !isEnterpriseUser;

	return (
		<div className="kiro-account-dashboard-section">
			<div className="kiro-overage-label">
				<div className="kiro-account-dashboard-row">
					<span className="kiro-account-dashboard-label">Overages</span>
					<div className="kiro-overage-status">
						<span>{overageEnabledLabel}</span>
						<label
							className={`kiro-overage-toggle ${
								isDisabled ? "kiro-overage-toggle--disabled" : ""
							}`}
						>
							<input
								className="kiro-overage-toggle-input"
								type="checkbox"
								checked={overageEnabled}
								onChange={(e) => handleOverageToggle(e.target.checked)}
								disabled={isDisabled}
							/>
							<div
								className={`kiro-overage-toggle-track kiro-overage-toggle-track--${
									overageEnabled ? "on" : "off"
								}`}
							>
								<div
									className={`kiro-overage-toggle-thumb kiro-overage-toggle-thumb--${
										overageEnabled ? "on" : "off"
									}`}
								/>
							</div>
						</label>
					</div>
				</div>
				{isEnterpriseUser && "Managed by your organization"}
			</div>

			{isEnterpriseUser ? (
				<span className="kiro-overage-enterprise-contact">
					<i className="codicon codicon-question" />
					Contact your organization administrator for support
				</span>
			) : (
				<div className="kiro-overage-description">
					<span>Turn on overages to keep using Kiro past these limits</span>
					<span>{generateOverageText()}.</span>
				</div>
			)}

			{/* Only show for non-enterprise users if there are overages */}
			{showOverageTable && (
				<OverageTable
					formatCurrency={formatCurrency}
					resourceToOverageMap={resourceToOverageMap}
				/>
			)}
		</div>
	);
}
