import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";

interface Props {
	used: number;
	available: number;
	size: number;
	usedPct: string;
}

function formatBytes(bytes: number): string {
	if (!bytes || bytes === 0) return "0 B";
	const units = ["B", "KB", "MB", "GB", "TB"];
	let value = bytes;
	let unitIdx = 0;
	while (value >= 1000 && unitIdx < units.length - 1) {
		value /= 1000;
		unitIdx++;
	}
	return `${value.toFixed(1)} ${units[unitIdx]}`;
}

/**
 * Progress-bar class (full static strings so Tailwind's scanner emits them).
 * `chart-2`=success, `chart-3`=warning, `destructive`=error, per design §2.3.
 */
function progressBarClass(pct: number): string {
	if (pct < 70) {
		return "h-3 [&_[data-slot=progress-indicator]]:bg-chart-2";
	}
	if (pct < 90) {
		return "h-3 [&_[data-slot=progress-indicator]]:bg-chart-3";
	}
	return "h-3 [&_[data-slot=progress-indicator]]:bg-destructive";
}

/**
 * Dashboard card that summarizes the configured media disk.
 *
 * Keeps the progress bar inside the card so the capacity signal, raw byte
 * values, and free-space breakdown stay visually grouped. The used / free /
 * total / percent breakdown is preserved verbatim from the MUI version.
 */
export function DiskSpaceCard({ used, available, size, usedPct }: Props) {
	const pct = Math.max(0, Math.min(100, Number.parseFloat(usedPct) || 0));
	const cells = [
		{ label: "Used", value: formatBytes(used) },
		{ label: "Free", value: formatBytes(available) },
		{ label: "Total", value: formatBytes(size) },
	];

	return (
		<Card className="h-full">
			<CardContent className="flex flex-col gap-4">
				<div className="flex flex-col gap-1">
					<span className="text-sm uppercase tracking-wide text-muted-foreground">
						Disk space
					</span>
					<span className="text-lg font-semibold">{usedPct} used</span>
				</div>
				<Progress value={pct} className={progressBarClass(pct)} />
				<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
					{cells.map((cell) => (
						<div
							key={cell.label}
							className="flex h-full flex-col items-center justify-center gap-1 rounded-lg bg-muted/50 p-3 text-center"
						>
							<span className="text-xs text-muted-foreground">
								{cell.label}
							</span>
							<span className="text-sm font-semibold">{cell.value}</span>
						</div>
					))}
				</div>
			</CardContent>
		</Card>
	);
}