import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import {
	MobileCardRow,
	type MobileCardField,
} from "@/components/ui/mobile-card";
import { useIsMobile } from "../hooks/useIsMobile";
import type { BackupAlert } from "../types/backups";

interface Props {
	alerts: BackupAlert[];
	onAcknowledge: (alertId: string) => void;
}

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

type SeverityVariant = "destructive" | "warning";

/**
 * Map an alert severity onto a Badge variant per design §2.3.
 * `critical` → destructive (chart-4); `warning` → warning (chart-3).
 */
function severityVariant(severity: string): SeverityVariant {
	return severity === "critical" ? "destructive" : "warning";
}

// Mobile card fields (spec R3.2): message is the primary identifier;
// severity/type/created give the at-a-glance info. See OpenSpec change
// `mobile-responsive-parity`, tasks slice 5.2.
const alertCardFields: MobileCardField<BackupAlert>[] = [
	{ key: "message", label: "Message", render: (a) => a.message, primary: true },
	{
		key: "severity",
		label: "Severity",
		render: (a) => (
			<Badge variant={severityVariant(a.severity)}>{a.severity}</Badge>
		),
	},
	{ key: "type", label: "Type", render: (a) => a.alert_type },
	{
		key: "created",
		label: "Created",
		render: (a) => formatTimestamp(a.created_at),
	},
];

export default function BackupAlertsTable({ alerts, onAcknowledge }: Props) {
	const isMobile = useIsMobile();

	if (isMobile) {
		return (
			<MobileCardRow
				rows={alerts}
				fields={alertCardFields}
				getRowId={(a) => a.id}
				actions={(a) =>
					!a.acknowledged ? (
						<Button
							size="sm"
							variant="outline"
							className="mobile-touch-target"
							onClick={() => onAcknowledge(a.id)}
						>
							Ack
						</Button>
					) : null
				}
			/>
		);
	}

	return (
		<div className="overflow-hidden rounded-lg border border-border">
			<Table aria-label="Backup alerts">
				<TableHeader>
					<TableRow className="bg-card hover:bg-card">
						<TableHead>Severity</TableHead>
						<TableHead>Type</TableHead>
						<TableHead>Message</TableHead>
						<TableHead>Created</TableHead>
						<TableHead>Actions</TableHead>
					</TableRow>
				</TableHeader>
				<TableBody>
					{alerts.map((alert) => (
						<TableRow key={alert.id}>
							<TableCell>
								<Badge variant={severityVariant(alert.severity)}>
									{alert.severity}
								</Badge>
							</TableCell>
							<TableCell>{alert.alert_type}</TableCell>
							<TableCell>{alert.message}</TableCell>
							<TableCell>{formatTimestamp(alert.created_at)}</TableCell>
							<TableCell>
								{!alert.acknowledged && (
									<Button
										size="sm"
										variant="outline"
										onClick={() => onAcknowledge(alert.id)}
									>
										Acknowledge
									</Button>
								)}
							</TableCell>
						</TableRow>
					))}
				</TableBody>
			</Table>
		</div>
	);
}