import { useState, useEffect } from 'react';
import { check, Update } from '@tauri-apps/plugin-updater';
import { relaunch } from '@tauri-apps/plugin-process';
import {
Button,
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from '@mcpmux/ui';
import { Download, Loader2, CheckCircle, AlertCircle, RefreshCw, RotateCcw } from 'lucide-react';
import { invoke } from '@tauri-apps/api/core';
interface DownloadEvent {
event: 'Started' | 'Progress' | 'Finished';
data?: {
contentLength?: number;
chunkLength?: number;
};
}
export function UpdateChecker() {
const [checking, setChecking] = useState(false);
const [downloading, setDownloading] = useState(false);
const [updateInfo, setUpdateInfo] = useState<Update | null>(null);
const [downloadProgress, setDownloadProgress] = useState({ downloaded: 0, total: 0 });
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
const [currentVersion, setCurrentVersion] = useState<string>('');
const [bundleVersionMismatch, setBundleVersionMismatch] = useState<string | null>(null);
// Load current version on mount
useState(() => {
invoke<string>('get_version')
.then(setCurrentVersion)
.catch((err) => console.error('Failed to get version:', err));
});
// Check if the on-disk bundle version differs from the running version (Homebrew Cask upgrades)
useEffect(() => {
if (!currentVersion) return;
invoke<string | null>('get_bundle_version')
.then((bundleVersion) => {
if (bundleVersion && bundleVersion !== currentVersion) {
console.log(
`[Updater] Bundle version mismatch: running=${currentVersion}, on-disk=${bundleVersion}`
);
setBundleVersionMismatch(bundleVersion);
}
})
.catch(() => {
// Expected to return null on non-macOS platforms
});
}, [currentVersion]);
const checkForUpdates = async () => {
setChecking(true);
setMessage(null);
setUpdateInfo(null);
try {
console.log('[Updater] Checking for updates...');
const update = await check();
if (update) {
console.log(
`[Updater] Update available: ${update.version} from ${update.date || 'N/A'}`
);
setUpdateInfo(update);
setMessage({
type: 'success',
text: `Version ${update.version} is available!`,
});
} else {
console.log('[Updater] No updates available');
setMessage({
type: 'success',
text: "You're running the latest version!",
});
}
} catch (error) {
console.error('[Updater] Check failed:', error);
setMessage({
type: 'error',
text: `Failed to check for updates: ${error}`,
});
} finally {
setChecking(false);
}
};
const installUpdate = async () => {
if (!updateInfo) return;
setDownloading(true);
setDownloadProgress({ downloaded: 0, total: 0 });
setMessage(null);
try {
console.log('[Updater] Starting download and install...');
await updateInfo.downloadAndInstall((event: DownloadEvent) => {
switch (event.event) {
case 'Started':
console.log(`[Updater] Downloading ${event.data?.contentLength || 0} bytes`);
setDownloadProgress({
downloaded: 0,
total: event.data?.contentLength || 0,
});
break;
case 'Progress':
setDownloadProgress((prev) => ({
...prev,
downloaded: prev.downloaded + (event.data?.chunkLength || 0),
}));
break;
case 'Finished':
console.log('[Updater] Download finished, installing...');
break;
}
});
console.log('[Updater] Update installed successfully, relaunching app...');
// Note: On Windows, the app will exit automatically before this point
await relaunch();
} catch (error) {
console.error('[Updater] Installation failed:', error);
setMessage({
type: 'error',
text: `Failed to install update: ${error}`,
});
setDownloading(false);
}
};
const formatBytes = (bytes: number): string => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
};
const progressPercent =
downloadProgress.total > 0
? Math.round((downloadProgress.downloaded / downloadProgress.total) * 100)
: 0;
return (
<Card data-testid="update-checker">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<RefreshCw className="h-5 w-5" />
Software Updates
</CardTitle>
<CardDescription>
Keep your application up to date with the latest features and fixes.
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* Current Version */}
<div>
<label className="text-sm font-medium">Current Version</label>
<p className="text-sm text-[rgb(var(--muted))] mt-1" data-testid="current-version">
v{currentVersion || '0.0.5'}
</p>
</div>
{/* Bundle version mismatch (e.g., after brew upgrade) */}
{bundleVersionMismatch && (
<div
className="border rounded-lg p-4 space-y-3 bg-surface-secondary"
data-testid="restart-required"
>
<div>
<p className="font-medium text-lg">Restart Required</p>
<p className="text-sm text-[rgb(var(--muted))] mt-1">
Version v{bundleVersionMismatch} has been installed on disk, but you are still
running v{currentVersion}. Restart to apply the update.
</p>
</div>
<Button
onClick={() => relaunch()}
variant="primary"
data-testid="restart-now-btn"
>
<RotateCcw className="h-4 w-4 mr-2" />
Restart Now
</Button>
</div>
)}
{/* Check Button */}
{!updateInfo && !bundleVersionMismatch && (
<Button
onClick={checkForUpdates}
disabled={checking || downloading}
variant="secondary"
data-testid="check-updates-btn"
>
{checking ? (
<>
<Loader2 className="h-4 w-4 animate-spin mr-2" />
Checking for Updates...
</>
) : (
<>
<RefreshCw className="h-4 w-4 mr-2" />
Check for Updates
</>
)}
</Button>
)}
{/* Status Message */}
{message && !updateInfo && (
<div
className={`flex items-start gap-2 p-3 rounded-lg text-sm ${
message.type === 'success'
? 'bg-green-500/10 text-green-600 dark:text-green-400'
: 'bg-red-500/10 text-red-600 dark:text-red-400'
}`}
data-testid="update-message"
>
{message.type === 'success' ? (
<CheckCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
) : (
<AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
)}
<span>{message.text}</span>
</div>
)}
{/* Update Available Card */}
{updateInfo && (
<div className="border rounded-lg p-4 space-y-3 bg-surface-secondary" data-testid="update-available">
<div>
<p className="font-medium text-lg">
Update Available: v{updateInfo.version}
</p>
{updateInfo.date && (
<p className="text-xs text-[rgb(var(--muted))]">
Released: {new Date(updateInfo.date).toLocaleDateString()}
</p>
)}
</div>
{/* Release Notes */}
{updateInfo.body && (
<div className="text-sm">
<p className="font-medium mb-1">What's New:</p>
<div className="text-[rgb(var(--muted))] whitespace-pre-wrap max-h-32 overflow-y-auto">
{updateInfo.body}
</div>
</div>
)}
{/* Download Progress */}
{downloading && downloadProgress.total > 0 && (
<div className="space-y-2">
<div className="flex justify-between text-xs text-[rgb(var(--muted))]">
<span>Downloading...</span>
<span>
{formatBytes(downloadProgress.downloaded)} / {formatBytes(downloadProgress.total)} ({progressPercent}%)
</span>
</div>
<div className="w-full bg-surface-secondary rounded-full h-2 overflow-hidden">
<div
className="bg-primary-500 h-full transition-all duration-300"
style={{ width: `${progressPercent}%` }}
/>
</div>
</div>
)}
{/* Install Button */}
<div className="flex gap-2">
<Button
onClick={installUpdate}
disabled={downloading}
variant="primary"
data-testid="install-update-btn"
>
{downloading ? (
<>
<Loader2 className="h-4 w-4 animate-spin mr-2" />
{downloadProgress.total > 0 ? 'Downloading...' : 'Installing...'}
</>
) : (
<>
<Download className="h-4 w-4 mr-2" />
Download and Install
</>
)}
</Button>
{!downloading && (
<Button
onClick={() => {
setUpdateInfo(null);
setMessage(null);
}}
variant="secondary"
data-testid="dismiss-update-btn"
>
Remind Me Later
</Button>
)}
</div>
{downloading && (
<p className="text-xs text-[rgb(var(--muted))]">
<strong>Note:</strong> On Windows, the app will close automatically to install the update.
</p>
)}
</div>
)}
{/* Error Message for Update Available State */}
{message && updateInfo && message.type === 'error' && (
<div
className="flex items-start gap-2 p-3 rounded-lg text-sm bg-red-500/10 text-red-600 dark:text-red-400"
data-testid="update-error"
>
<AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
<span>{message.text}</span>
</div>
)}
</div>
</CardContent>
</Card>
);
}
