import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axiosInstance from "../api/axiosInstance";
import LoadingSpinner from "../components/LoadingSpinner";

interface User {
	username: string;
	fullName: string;
}

const AllUsers = () => {
	const [users, setUsers] = useState<User[]>([]);
	const [searchedUser, setSearchedUser] = useState<string>("");
	const [error, setError] = useState<string | null>(null);
	const navigate = useNavigate();

	useEffect(() => {
		const fetchUsers = async () => {
			const response = axiosInstance.get("/users/na/all");
			setUsers((await response).data);
		};
		fetchUsers();
	}, []);

	const handleUserClick = (username: string) => {
		navigate(`/users/${username}`);
	};

	const handleSearch = async (e: React.FormEvent) => {
		e.preventDefault();
		try {
			const response = await axiosInstance.get(`/users/na/search`, {
				params: { name: searchedUser },
			});
			setUsers(response.data);
		} catch (err: any) {
			const errorMessage = err.response?.data?.error || "Search failed";
			setError(errorMessage);
		}
	};

	if (users.length == 0) {
		return <LoadingSpinner />;
	}
	if (error) {
		return (
			<div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
				<h2 className="font-bold">Error</h2>
				<p>{error}</p>
			</div>
		);
	}

	return (
		<div className="container mx-auto p-6">
			<h1 className="text-3xl font-bold mb-6">All Users</h1>
			<form onSubmit={handleSearch} className="flex gap-2 mb-10">
				<input
					type="text"
					value={searchedUser}
					onChange={(e) => setSearchedUser(e.target.value)}
					className="border p-2 rounded w-full"
					placeholder="Search for a user..."
				/>
				<button
					type="submit"
					className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors"
				>
					Search
				</button>
			</form>

			<div className="grid gap-4">
				{users.map((u) => (
					<div
						key={u.username}
						onClick={() => handleUserClick(u.username)}
						className="bg-white shadow-md rounded-lg p-4 hover:shadow-lg hover:bg-gray-50 cursor-pointer transition-all"
					>
						<h2 className="text-xl font-semibold">{u.fullName}</h2>
						<p className="text-gray-600">@{u.username}</p>
					</div>
				))}
			</div>
		</div>
	);
};

export default AllUsers;