"use client";

import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import { Input } from "@/components/ui/Input";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";
import { LoadingState } from "@/components/ui/States";
import { formatDate } from "@/lib/utils";
import { useTranslation } from "@/lib/i18n";

export default function UserManagementPage() {
	const { t } = useTranslation();
	const [users, setUsers] = useState([]);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState("");
	const [showCreateForm, setShowCreateForm] = useState(false);
	const { data: session, status } = useSession();
	const router = useRouter();

	// Check if user is admin
	useEffect(() => {
		if (status === "loading") return;
		if (!session || session.user.role !== "admin") {
			router.push("/");
			return;
		}
	}, [session, status, router]);

	// Fetch users
	useEffect(() => {
		if (session?.user?.role === "admin") {
			fetchUsers();
		}
	}, [session]);

	const fetchUsers = async () => {
		try {
			setLoading(true);
			const response = await fetch("/api/admin/users");
			if (!response.ok) {
				throw new Error("Failed to fetch users");
			}
			const data = await response.json();
			setUsers(data);
		} catch (err) {
			setError(err.message);
		} finally {
			setLoading(false);
		}
	};

	const handleDeleteUser = async (userId) => {
		if (!confirm(t('admin.deleteUser') + "?")) return;

		try {
			const response = await fetch(`/api/admin/users/${userId}`, {
				method: "DELETE",
			});

			if (!response.ok) {
				throw new Error("Failed to delete user");
			}

			setUsers(users.filter(user => user.id !== userId));
		} catch (err) {
			setError(err.message);
		}
	};

	const handleToggleUser = async (userId, isActive) => {
		try {
			const response = await fetch(`/api/admin/users/${userId}`, {
				method: "PUT",
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify({ is_active: !isActive }),
			});

			if (!response.ok) {
				throw new Error("Failed to update user");
			}

			setUsers(users.map(user => 
				user.id === userId 
					? { ...user, is_active: !isActive }
					: user
			));
		} catch (err) {
			setError(err.message);
		}
	};

	const handleToggleAssignable = async (userId, canBeAssigned) => {
		try {
			const response = await fetch(`/api/admin/users/${userId}`, {
				method: "PUT",
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify({ can_be_assigned: !canBeAssigned }),
			});

			if (!response.ok) {
				throw new Error("Failed to update user");
			}

			setUsers(users.map(user => 
				user.id === userId 
					? { ...user, can_be_assigned: !canBeAssigned }
					: user
			));
		} catch (err) {
			setError(err.message);
		}
	};

	const getRoleColor = (role) => {
		switch (role) {
			case "admin":
				return "red";
			case "team_lead":
				return "purple";
			case "project_manager":
				return "blue";
			case "user":
				return "green";
			case "read_only":
				return "gray";
			default:
				return "gray";
		}
	};

	const getRoleDisplay = (role) => {
		switch (role) {
			case "project_manager":
				return "Project Manager";
			case "team_lead":
				return "Team Lead";
			case "read_only":
				return "Read Only";
			default:
				return role.charAt(0).toUpperCase() + role.slice(1);
		}
	};

	if (status === "loading" || !session) {
		return <LoadingState />;
	}

	if (session.user.role !== "admin") {
		return (
			<PageContainer>
				<div className="text-center py-12">
					<h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
					<p className="text-gray-600 mb-6">You need admin privileges to access this page.</p>
					<Link href="/">
						<Button>Go Home</Button>
					</Link>
				</div>
			</PageContainer>
		);
	}

	return (
		<PageContainer>
			<PageHeader title={t('admin.userManagement')} description={t('admin.subtitle')}>
				<Button 
					variant="primary" 
					onClick={() => setShowCreateForm(true)}
				>
					<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
					</svg>
					{t('admin.newUser')}
				</Button>
			</PageHeader>

			{error && (
				<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
					<p className="text-red-600">{error}</p>
				</div>
			)}

			{loading ? (
				<LoadingState />
			) : (
				<div className="space-y-6">
					{/* Users List */}
					<div className="grid gap-6">
						{users.length === 0 ? (
							<Card>
								<CardContent>
									<div className="text-center py-12">
										<svg className="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
										</svg>
										<h3 className="text-lg font-medium text-gray-900 mb-2">No Users Found</h3>
										<p className="text-gray-500">Start by creating your first user.</p>
									</div>
								</CardContent>
							</Card>
						) : (
							users.map((user) => (
								<Card key={user.id}>
									<CardHeader>
										<div className="flex items-center justify-between">
											<div className="flex items-center space-x-4">
												<div className="flex-shrink-0">
													<div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
														<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
															<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
														</svg>
													</div>
												</div>
												<div>
													<h3 className="text-lg font-semibold text-gray-900">{user.name}</h3>
													<p className="text-sm text-gray-500">{user.username}</p>
													{user.initial && (
														<p className="text-xs text-blue-600 font-medium mt-1">Initial: {user.initial}</p>
													)}
												</div>
											</div>
											<div className="flex items-center space-x-2">
												<Badge color={getRoleColor(user.role)}>
													{getRoleDisplay(user.role)}
												</Badge>
												<Badge color={user.is_active ? "green" : "red"}>
													{user.is_active ? "Active" : "Inactive"}
												</Badge>
												<Badge color={user.can_be_assigned ? "blue" : "gray"}>
													{user.can_be_assigned ? "Assignable" : "Not Assignable"}
												</Badge>
											</div>
										</div>
									</CardHeader>
									<CardContent>
										<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
											<div>
												<p className="text-sm font-medium text-gray-500">Created</p>
												<p className="text-sm text-gray-900">{formatDate(user.created_at)}</p>
											</div>
											<div>
												<p className="text-sm font-medium text-gray-500">Last Login</p>
												<p className="text-sm text-gray-900">
													{user.last_login ? formatDate(user.last_login) : "Never"}
												</p>
											</div>
											<div>
												<p className="text-sm font-medium text-gray-500">Failed Attempts</p>
												<p className="text-sm text-gray-900">{user.failed_login_attempts || 0}</p>
											</div>
										</div>

										{user.locked_until && new Date(user.locked_until) > new Date() && (
											<div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
												<p className="text-sm text-yellow-800">
													Account locked until {formatDate(user.locked_until)}
												</p>
											</div>
										)}

										<div className="flex items-center justify-between">
											<div className="flex items-center space-x-4">
												<div className="flex items-center space-x-2">
													<input
														type="checkbox"
														id={`assignable-${user.id}`}
														checked={user.can_be_assigned || false}
														onChange={() => handleToggleAssignable(user.id, user.can_be_assigned)}
														className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
													/>
													<label htmlFor={`assignable-${user.id}`} className="text-sm text-gray-700">
														Can be assigned to projects/tasks
													</label>
												</div>
											</div>
											<div className="flex space-x-2">
												<Button
													variant="outline"
													size="sm"
													onClick={() => handleToggleUser(user.id, user.is_active)}
												>
													{user.is_active ? "Deactivate" : "Activate"}
												</Button>
												<Link href={`/admin/users/${user.id}/edit`}>
													<Button variant="outline" size="sm">
														Edit
													</Button>
												</Link>
											</div>
											<Button
												variant="outline"
												size="sm"
												onClick={() => handleDeleteUser(user.id)}
												disabled={user.id === session?.user?.id}
												className="text-red-600 hover:text-red-700 hover:bg-red-50"
											>
												Delete
											</Button>
										</div>
									</CardContent>
								</Card>
							))
						)}
					</div>
				</div>
			)}

			{/* Create User Modal/Form */}
			{showCreateForm && (
				<CreateUserModal 
					onClose={() => setShowCreateForm(false)}
					onUserCreated={(newUser) => {
						setUsers([...users, newUser]);
						setShowCreateForm(false);
					}}
				/>
			)}
		</PageContainer>
	);
}

// Create User Modal Component
function CreateUserModal({ onClose, onUserCreated }) {
	const [formData, setFormData] = useState({
		name: "",
		username: "",
		password: "",
		role: "user",
		is_active: true,
		can_be_assigned: true
	});
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState("");

	const handleSubmit = async (e) => {
		e.preventDefault();
		setLoading(true);
		setError("");

		try {
			const response = await fetch("/api/admin/users", {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify(formData),
			});

			if (!response.ok) {
				const errorData = await response.json();
				throw new Error(errorData.error || "Failed to create user");
			}

			const newUser = await response.json();
			onUserCreated(newUser);
		} catch (err) {
			setError(err.message);
		} finally {
			setLoading(false);
		}
	};

	return (
		<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
			<div className="bg-white rounded-lg max-w-md w-full p-6">
				<div className="flex items-center justify-between mb-4">
					<h3 className="text-lg font-semibold">Create New User</h3>
					<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
						<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
						</svg>
					</button>
				</div>

				{error && (
					<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
						<p className="text-red-600 text-sm">{error}</p>
					</div>
				)}

				<form onSubmit={handleSubmit} className="space-y-4">
					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Name
						</label>
						<Input
							type="text"
							value={formData.name}
							onChange={(e) => setFormData({ ...formData, name: e.target.value })}
							required
						/>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Username
						</label>
						<Input
							type="text"
							value={formData.username}
							onChange={(e) => setFormData({ ...formData, username: e.target.value })}
							required
						/>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Password
						</label>
						<Input
							type="password"
							value={formData.password}
							onChange={(e) => setFormData({ ...formData, password: e.target.value })}
							required
							minLength={6}
						/>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Role
						</label>
						<select
							value={formData.role}
							onChange={(e) => setFormData({ ...formData, role: e.target.value })}
							className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
						>
							<option value="read_only">Read Only</option>
							<option value="user">User</option>
							<option value="project_manager">Project Manager</option>
							<option value="team_lead">Team Lead</option>
							<option value="admin">Admin</option>
						</select>
					</div>

					<div className="flex items-center">
						<input
							type="checkbox"
							id="is_active"
							checked={formData.is_active}
							onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
							className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
						/>
						<label htmlFor="is_active" className="ml-2 block text-sm text-gray-900">
							Active User
						</label>
					</div>

					<div className="flex items-center">
						<input
							type="checkbox"
							id="can_be_assigned"
							checked={formData.can_be_assigned}
							onChange={(e) => setFormData({ ...formData, can_be_assigned: e.target.checked })}
							className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
						/>
						<label htmlFor="can_be_assigned" className="ml-2 block text-sm text-gray-900">
							Can be assigned to projects/tasks
						</label>
					</div>

					<div className="flex space-x-3 pt-4">
						<Button type="submit" disabled={loading} className="flex-1">
							{loading ? "Creating..." : "Create User"}
						</Button>
						<Button type="button" variant="outline" onClick={onClose} className="flex-1">
							Cancel
						</Button>
					</div>
				</form>
			</div>
		</div>
	);
}