import React from "react";

import {
	ROLE_LABELS_DE,
	formatDateTimeDe,
} from "@/components/admin/users/usersUi";

import EditUserDialog from "@/components/admin/users/EditUserDialog";
import DeleteUserDialog from "@/components/admin/users/DeleteUserDialog";
import UserTemporaryPasswordField from "@/components/admin/users/UserTemporaryPasswordField";

import { Badge } from "@/components/ui/badge";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";

function UserTableRow({ user, disabled = false, onUserUpdated }) {
	const [temporaryPassword, setTemporaryPassword] = React.useState("");
	const [mustChangePasswordAfterReset, setMustChangePasswordAfterReset] =
		React.useState(false);
	const must = Boolean(user.mustChangePassword || mustChangePasswordAfterReset);

	return (
		<TableRow>
			<TableCell className="truncate font-medium" title={user.username}>
				{user.username}
			</TableCell>

			<TableCell className="min-w-0">
				<span className="block truncate" title={user.email}>
					{user.email}
				</span>
			</TableCell>

			<TableCell>
				<Badge variant="secondary">{ROLE_LABELS_DE[user.role] || user.role}</Badge>
			</TableCell>

			<TableCell>
				{user.branchId ? (
					<Badge variant="outline">{user.branchId}</Badge>
				) : (
					<span className="text-muted-foreground">—</span>
				)}
			</TableCell>

			<TableCell>
				{must ? (
					<Badge variant="destructive">Erforderlich</Badge>
				) : (
					<Badge variant="secondary">Nein</Badge>
				)}
			</TableCell>

			<TableCell>
				<UserTemporaryPasswordField
					user={user}
					temporaryPassword={temporaryPassword}
					onTemporaryPasswordChange={setTemporaryPassword}
					onPasswordReset={() => setMustChangePasswordAfterReset(true)}
					disabled={disabled}
					compact
				/>
			</TableCell>

			<TableCell className="text-xs text-muted-foreground">
				{formatDateTimeDe(user.updatedAt)}
			</TableCell>

			<TableCell className="sticky right-0 z-10 w-20 bg-card text-right">
				<div className="flex items-center justify-end gap-1">
					<EditUserDialog
						user={user}
						disabled={disabled}
						onUpdated={onUserUpdated}
						onPasswordReset={() => setMustChangePasswordAfterReset(true)}
						temporaryPassword={temporaryPassword}
						onTemporaryPasswordChange={setTemporaryPassword}
					/>
					<DeleteUserDialog
						user={user}
						disabled={disabled}
						onDeleted={onUserUpdated}
					/>
				</div>
			</TableCell>
		</TableRow>
	);
}

export default function UsersTable({ items, disabled = false, onUserUpdated }) {
	const list = Array.isArray(items) ? items : [];

	return (
		<Table className="min-w-[88rem] table-fixed">
			<TableHeader>
				<TableRow>
					<TableHead className="w-44">Benutzername</TableHead>
					<TableHead className="w-56">E-Mail</TableHead>
					<TableHead className="w-40">Rolle</TableHead>
					<TableHead className="w-16">NL</TableHead>
					<TableHead className="w-32">Passwortwechsel</TableHead>
					<TableHead className="w-56">Passwort</TableHead>
					<TableHead className="w-32">Aktualisiert</TableHead>
					<TableHead className="sticky right-0 z-20 w-20 bg-card text-right">
						Aktion
					</TableHead>
				</TableRow>
			</TableHeader>

			<TableBody>
				{list.map((user) => (
					<UserTableRow
						key={user.id}
						user={user}
						disabled={disabled}
						onUserUpdated={onUserUpdated}
					/>
				))}
			</TableBody>
		</Table>
	);
}