import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import type { BackupRun } from "../types/backups";

interface Props {
	runs: BackupRun[];
}

function formatBytes(bytes: number | null): string {
	if (bytes === null || bytes === undefined) return "—";
	if (bytes < 1024) return `${bytes} B`;
	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
	if (bytes < 1024 * 1024 * 1024)
		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}

function formatDuration(ms: number | null): string {
	if (ms === null || ms === undefined) return "—";
	if (ms < 1000) return `${ms}ms`;
	if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
	if (ms < 3600_000) return `${(ms / 60_000).toFixed(1)}m`;
	return `${(ms / 3600_000).toFixed(1)}h`;
}

function formatTimestamp(ts: number): string {
	return new Date(ts * 1000).toLocaleString();
}

type StatusVariant = "success" | "destructive" | "warning";

/**
 * Map a run status onto a Badge variant per design §2.3:
 * `success` → success (chart-2); `failure` → destructive (chart-4);
 * `in_progress` → warning (chart-3).
 */
function statusVariant(status: string): StatusVariant {
	if (status === "success") return "success";
	if (status === "failure") return "destructive";
	return "warning";
}

export default function BackupRunsTable({ runs }: Props) {
	const [statusFilter, setStatusFilter] = useState<string>("all");

	const filteredRuns =
		statusFilter === "all"
			? runs
			: runs.filter((r) => r.status === statusFilter);

	return (
		<div className="space-y-3">
			<Select value={statusFilter} onValueChange={setStatusFilter}>
				<SelectTrigger className="w-[160px]" aria-label="Status filter">
					<SelectValue placeholder="Status" />
				</SelectTrigger>
				<SelectContent>
					<SelectItem value="all">All</SelectItem>
					<SelectItem value="success">Success</SelectItem>
					<SelectItem value="failure">Failure</SelectItem>
					<SelectItem value="in_progress">In Progress</SelectItem>
				</SelectContent>
			</Select>

			<div className="overflow-hidden rounded-lg border border-border">
				<Table aria-label="Backup runs">
					<TableHeader>
						<TableRow className="bg-card hover:bg-card">
							<TableHead>Job</TableHead>
							<TableHead>Status</TableHead>
							<TableHead>Duration</TableHead>
							<TableHead>Size</TableHead>
							<TableHead>Started</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{filteredRuns.map((run) => (
							<TableRow key={run.id}>
								<TableCell>{run.job_id}</TableCell>
								<TableCell>
									<Badge variant={statusVariant(run.status)}>
										{run.status}
									</Badge>
								</TableCell>
								<TableCell>{formatDuration(run.duration_ms)}</TableCell>
								<TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
								<TableCell>{formatTimestamp(run.started_at)}</TableCell>
							</TableRow>
						))}
					</TableBody>
				</Table>
			</div>
		</div>
	);
}