import { Reveal } from '../../components/Reveal';
import { useLatestRelease } from '../../hooks/useLatestRelease';

function formatSize(bytes: number) {
	return `${Math.round(bytes / 1024 / 1024)} MB`;
}

function DesktopDownloads() {
	const { release } = useLatestRelease();

	return (
		<Reveal delay={80}>
			<div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-otto-border rounded-lg overflow-hidden">
				<div className="bg-otto-bg p-6 sm:p-8">
					<div className="flex items-center gap-3 mb-4">
						<svg
							className="w-6 h-6 text-otto-text"
							viewBox="0 0 24 24"
							fill="currentColor"
						>
							<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
						</svg>
						<div>
							<h3 className="text-lg font-semibold text-otto-text">macOS</h3>
							<p className="text-xs text-otto-dim">v{release.version}</p>
						</div>
					</div>
					<div className="space-y-2">
						{release.macosArm && (
							<a
								href={release.macosArm.url}
								className="flex items-center justify-between px-4 py-3 bg-otto-surface border border-otto-border rounded-sm hover:bg-otto-text hover:text-otto-bg hover:border-otto-text transition-all group"
								data-s-event="Download desktop app"
								data-s-event-props="platform=macos;arch=arm64;format=dmg"
							>
								<div className="flex items-center gap-3">
									<svg
										className="w-4 h-4 text-otto-dim group-hover:text-otto-bg transition-colors"
										viewBox="0 0 24 24"
										fill="none"
										stroke="currentColor"
										strokeWidth="2"
										strokeLinecap="round"
										strokeLinejoin="round"
									>
										<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
										<polyline points="7 10 12 15 17 10" />
										<line x1="12" x2="12" y1="15" y2="3" />
									</svg>
									<div>
										<span className="text-sm text-otto-text group-hover:text-otto-bg font-medium">
											Apple Silicon
										</span>
										<span className="text-xs text-otto-dim group-hover:text-otto-bg ml-2">
											.dmg
										</span>
									</div>
								</div>
								<span className="text-xs text-otto-dim group-hover:text-otto-bg">
									{formatSize(release.macosArm.size)}
								</span>
							</a>
						)}
						{release.macosIntel && (
							<a
								href={release.macosIntel.url}
								className="flex items-center justify-between px-4 py-3 bg-otto-surface border border-otto-border rounded-sm hover:bg-otto-text hover:text-otto-bg hover:border-otto-text transition-all group"
								data-s-event="Download desktop app"
								data-s-event-props="platform=macos;arch=x64;format=dmg"
							>
								<div className="flex items-center gap-3">
									<svg
										className="w-4 h-4 text-otto-dim group-hover:text-otto-bg transition-colors"
										viewBox="0 0 24 24"
										fill="none"
										stroke="currentColor"
										strokeWidth="2"
										strokeLinecap="round"
										strokeLinejoin="round"
									>
										<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
										<polyline points="7 10 12 15 17 10" />
										<line x1="12" x2="12" y1="15" y2="3" />
									</svg>
									<div>
										<span className="text-sm text-otto-text group-hover:text-otto-bg font-medium">
											Intel
										</span>
										<span className="text-xs text-otto-dim group-hover:text-otto-bg ml-2">
											.dmg
										</span>
									</div>
								</div>
								<span className="text-xs text-otto-dim group-hover:text-otto-bg">
									{formatSize(release.macosIntel.size)}
								</span>
							</a>
						)}
					</div>
				</div>

				<div className="bg-otto-bg p-6 sm:p-8">
					<div className="flex items-center gap-3 mb-4">
						<svg
							className="w-6 h-6 text-otto-text"
							viewBox="0 0 24 24"
							fill="currentColor"
						>
							<path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 0 0-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.368 1.884 1.368.39 0 .739-.134 1.107-.534.117.109.272.186.398.186.553 0 1.109-1.107 1.171-2.174.066-1.146-.142-2.074-.142-2.074s.476-.528.945-1.251c.453-.697.838-1.544.838-2.449 0-.543-.16-.723-.16-1.063 0-.34.199-.795.199-1.458 0-1.076-.535-1.746-1.292-2.478-.8-.8-1.851-1.293-2.334-2.259-.37-.72-.533-1.905-.672-3.019C16.031 1.995 15.068 0 12.504 0z" />
						</svg>
						<div>
							<h3 className="text-lg font-semibold text-otto-text">Linux</h3>
							<p className="text-xs text-otto-dim">v{release.version}</p>
						</div>
					</div>
					<div className="space-y-2">
						{release.linuxDeb && (
							<a
								href={release.linuxDeb.url}
								className="flex items-center justify-between px-4 py-3 bg-otto-surface border border-otto-border rounded-sm hover:bg-otto-text hover:text-otto-bg hover:border-otto-text transition-all group"
								data-s-event="Download desktop app"
								data-s-event-props="platform=linux;arch=x64;format=deb"
							>
								<div className="flex items-center gap-3">
									<svg
										className="w-4 h-4 text-otto-dim group-hover:text-otto-bg transition-colors"
										viewBox="0 0 24 24"
										fill="none"
										stroke="currentColor"
										strokeWidth="2"
										strokeLinecap="round"
										strokeLinejoin="round"
									>
										<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
										<polyline points="7 10 12 15 17 10" />
										<line x1="12" x2="12" y1="15" y2="3" />
									</svg>
									<div>
										<span className="text-sm text-otto-text group-hover:text-otto-bg font-medium">
											x86_64
										</span>
										<span className="text-xs text-otto-dim group-hover:text-otto-bg ml-2">
											.deb
										</span>
									</div>
								</div>
								<span className="text-xs text-otto-dim group-hover:text-otto-bg">
									{formatSize(release.linuxDeb.size)}
								</span>
							</a>
						)}
						{release.linuxDebArm && (
							<a
								href={release.linuxDebArm.url}
								className="flex items-center justify-between px-4 py-3 bg-otto-surface border border-otto-border rounded-sm hover:bg-otto-text hover:text-otto-bg hover:border-otto-text transition-all group"
								data-s-event="Download desktop app"
								data-s-event-props="platform=linux;arch=arm64;format=deb"
							>
								<div className="flex items-center gap-3">
									<svg
										className="w-4 h-4 text-otto-dim group-hover:text-otto-bg transition-colors"
										viewBox="0 0 24 24"
										fill="none"
										stroke="currentColor"
										strokeWidth="2"
										strokeLinecap="round"
										strokeLinejoin="round"
									>
										<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
										<polyline points="7 10 12 15 17 10" />
										<line x1="12" x2="12" y1="15" y2="3" />
									</svg>
									<div>
										<span className="text-sm text-otto-text group-hover:text-otto-bg font-medium">
											ARM64
										</span>
										<span className="text-xs text-otto-dim group-hover:text-otto-bg ml-2">
											.deb
										</span>
									</div>
								</div>
								<span className="text-xs text-otto-dim group-hover:text-otto-bg">
									{formatSize(release.linuxDebArm.size)}
								</span>
							</a>
						)}
					</div>
					<p className="text-[10px] text-otto-dim mt-3">
						Install with sudo dpkg -i otto_*.deb
					</p>
				</div>
			</div>

			<div className="flex items-center justify-between mt-4 px-1">
				<a
					href={`https://github.com/nitishxyz/otto/releases/tag/${release.tag}`}
					target="_blank"
					rel="noopener noreferrer"
					className="text-xs text-otto-dim hover:text-otto-muted transition-colors"
					data-s-event="Click release notes"
					data-s-event-props="source=desktop"
				>
					Release notes →
				</a>
				<a
					href="https://github.com/nitishxyz/otto/releases"
					target="_blank"
					rel="noopener noreferrer"
					className="text-xs text-otto-dim hover:text-otto-muted transition-colors"
					data-s-event="Click all releases"
					data-s-event-props="source=desktop"
				>
					All releases →
				</a>
			</div>
		</Reveal>
	);
}

export function DesktopSection() {
	return (
		<section
			id="desktop"
			className="py-28 sm:py-36 px-6 border-t border-otto-border"
		>
			<div className="max-w-[900px] mx-auto">
				<Reveal>
					<p className="text-otto-dim text-xs uppercase tracking-[0.2em] mb-4">
						Desktop App
					</p>
					<h2 className="text-2xl sm:text-3xl font-bold mb-3">
						Native experience
					</h2>
					<p className="text-otto-muted text-sm mb-12 max-w-lg">
						Full-featured desktop app built with Tauri v2. Native performance,
						system tray, global shortcuts. Available for macOS and Linux.
					</p>
				</Reveal>

				<DesktopDownloads />
			</div>
		</section>
	);
}
