import { __ } from "@wordpress/i18n";
import type { UsageInfo } from "../data/types";
import styles from "./UsageCard.module.css";

interface Props {
	usage: UsageInfo;
}

function formatPlanName(plan: string): string {
	if (!plan) return "";
	return plan.charAt(0).toUpperCase() + plan.slice(1);
}

export default function UsageCard({ usage }: Props) {
	const percentage = Math.min((usage.used / usage.limit) * 100, 100);
	const isNearLimit = usage.used / usage.limit >= 0.8;

	const renewsDate = new Date(usage.renewsAt);
	const formattedDate = renewsDate.toLocaleDateString(undefined, {
		month: "short",
		day: "numeric",
		year: "numeric",
	});

	const barColor = isNearLimit
		? "linear-gradient(90deg, #d63638, #a11d2b)"
		: "linear-gradient(90deg, #2271b1, #3582d4)";

	return (
		<div className={styles.card}>
			<div className={styles.cardHeader}>
				<span className={styles.cardTitle}>
					{__("Message usage", "flexible-chat")}
				</span>
				<span className={styles.planBadge}>
					{formatPlanName(usage.plan)}
				</span>
			</div>
			<div className={styles.barBg}>
				<div
					className={styles.barFill}
					style={{ width: `${percentage}%`, background: barColor }}
				/>
			</div>
			<div className={styles.stats}>
				<span>
					<strong>{usage.used}</strong> / {usage.limit}{" "}
					{__("messages", "flexible-chat")}
				</span>
			</div>
			<div className={styles.stats} style={{ marginTop: 4 }}>
				<span>
					{__("Resets", "flexible-chat")} {formattedDate}
				</span>
				<a href={flexibleChatHistory.upgradeUrl} className={styles.upgrade}>
					{__("Upgrade plan", "flexible-chat")}
				</a>
			</div>
		</div>
	);
}