import {
	Calendar,
	Clock,
	ExternalLink,
	Globe,
	MonitorSmartphone,
	Shield,
} from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface UserAccountInfoProps {
	user: {
		accountCreated: number;
		lastLogin: number | null;
		ipRegister: string;
		ipCurrent: string;
		twoFactorConfirmed: number;
		machine_id: string;
		mail: string;
		gender: string;
	};
}

export function UserAccountInfo({ user }: UserAccountInfoProps) {
	return (
		<Card>
			<CardHeader>
				<CardTitle>Account Details</CardTitle>
			</CardHeader>
			<CardContent>
				<div className="grid gap-4 sm:grid-cols-2">
					<div className="space-y-3">
						<div className="flex items-center gap-3 text-sm">
							<Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
							<span className="text-muted-foreground">Registered</span>
							<span className="ml-auto font-medium">
								{new Date(user.accountCreated * 1000).toLocaleDateString(
									"it-IT",
									{
										day: "2-digit",
										month: "short",
										year: "numeric",
									},
								)}
							</span>
						</div>
						<div className="flex items-center gap-3 text-sm">
							<Clock className="h-4 w-4 text-muted-foreground shrink-0" />
							<span className="text-muted-foreground">Last Login</span>
							<span className="ml-auto font-medium">
								{user.lastLogin
									? new Date(user.lastLogin * 1000).toLocaleDateString(
											"it-IT",
											{
												day: "2-digit",
												month: "short",
												year: "numeric",
												hour: "2-digit",
												minute: "2-digit",
											},
										)
									: "Never"}
							</span>
						</div>
						<div className="flex items-center gap-3 text-sm">
							<Globe className="h-4 w-4 text-muted-foreground shrink-0" />
							<span className="text-muted-foreground">IP Register</span>
							<span className="ml-auto flex items-center gap-1.5">
								<code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
									{user.ipRegister}
								</code>
								<Link
									href={`/admin/users?search=${user.ipRegister}`}
									title="Find other users with this IP"
								>
									<ExternalLink className="h-3 w-3 text-primary" />
								</Link>
							</span>
						</div>
						<div className="flex items-center gap-3 text-sm">
							<Globe className="h-4 w-4 text-muted-foreground shrink-0" />
							<span className="text-muted-foreground">IP Current</span>
							<span className="ml-auto flex items-center gap-1.5">
								<code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
									{user.ipCurrent}
								</code>
								<Link
									href={`/admin/users?search=${user.ipCurrent}`}
									title="Find other users with this IP"
								>
									<ExternalLink className="h-3 w-3 text-primary" />
								</Link>
							</span>
						</div>
					</div>
					<div className="space-y-3">
						<div className="flex items-center gap-3 text-sm">
							<Shield className="h-4 w-4 text-muted-foreground shrink-0" />
							<span className="text-muted-foreground">2FA</span>
							<Badge
								variant={user.twoFactorConfirmed ? "default" : "outline"}
								className="ml-auto"
							>
								{user.twoFactorConfirmed ? "Enabled" : "Disabled"}
							</Badge>
						</div>
						<div className="flex items-center gap-3 text-sm">
							<MonitorSmartphone className="h-4 w-4 text-muted-foreground shrink-0" />
							<span className="text-muted-foreground">Machine ID</span>
							<code className="ml-auto text-xs font-mono bg-muted px-2 py-0.5 rounded truncate max-w-[180px]">
								{user.machine_id || "N/A"}
							</code>
						</div>
						<div className="flex items-center gap-3 text-sm">
							<span className="text-muted-foreground">Email</span>
							<span className="ml-auto font-medium">{user.mail}</span>
						</div>
						<div className="flex items-center gap-3 text-sm">
							<span className="text-muted-foreground">Gender</span>
							<Badge variant="outline" className="ml-auto">
								{user.gender}
							</Badge>
						</div>
					</div>
				</div>
			</CardContent>
		</Card>
	);
}