import {
	ArrowLeftRight,
	Eye,
	LockKeyhole,
	Plane,
	RedoDot,
	Shield,
	ShieldAlert,
	User,
	UserCheck,
	Workflow,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useRef } from "react";

export default function AdminPanel() {
	const path = usePathname();
	const modalRef = useRef<HTMLDialogElement>(null);

	return (
		<div>
			<button
				className="btn btn-soft btn-primary btn-sm flex items-center gap-2"
				onSubmit={() => false}
				onClick={() => {
					modalRef.current?.showModal();
				}}
			>
				<Shield size={18} /> Admin Panel
			</button>
			<dialog ref={modalRef} className="modal">
				<div className="modal-box w-11/12 max-w-7xl">
					<form method="dialog">
						<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
					</form>
					<h3 className="font-bold text-lg flex items-center gap-2">
						<Shield size={22} /> Admin Panel
					</h3>
					<div className="flex gap-2 mt-4 w-full">
						<div className="card bg-base-300 shadow-md w-full h-96 overflow-y-auto">
							<div className="card-body">
								<div className="card-title flex items-center gap-2">
									<UserCheck size={20} /> Verbundene Clients
								</div>
								<table className="table w-full">
									<thead>
										<tr>
											<th>VAR #</th>
											<th>Name</th>
											<th>Station</th>
											<th>Voice</th>
											<th>Dispatch</th>
											<th>Actions</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>VAR0124</td>
											<td>Max Mustermann</td>
											<td>Christoph 31</td>
											<td className="text-error">
												<span>Nicht verbunden</span>
											</td>
											<td className="text-success">
												<span>Verbunden</span>
											</td>
											<td className="flex gap-2">
												<button
													className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
													data-tip="Kick"
												>
													<RedoDot size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
													data-tip="Ban"
												>
													<LockKeyhole size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
													data-tip="Profil"
												>
													<User size={15} />
												</button>
											</td>
										</tr>
										<tr>
											<td>VAR0124</td>
											<td>Max Mustermann</td>
											<td>Christoph 31</td>
											<td className="text-error">
												<span>Nicht verbunden</span>
											</td>
											<td className="text-success">
												<span>Verbunden</span>
											</td>
											<td className="flex gap-2">
												<button
													className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
													data-tip="Kick"
												>
													<RedoDot size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
													data-tip="Ban"
												>
													<LockKeyhole size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
													data-tip="Profil"
												>
													<User size={15} />
												</button>
											</td>
										</tr>
										<tr>
											<td>VAR0124</td>
											<td>Max Mustermann</td>
											<td>Christoph 31</td>
											<td className="text-error">
												<span>Nicht verbunden</span>
											</td>
											<td className="text-success">
												<span>Verbunden</span>
											</td>
											<td className="flex gap-2">
												<button
													className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
													data-tip="Kick"
												>
													<RedoDot size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
													data-tip="Ban"
												>
													<LockKeyhole size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
													data-tip="Profil"
												>
													<User size={15} />
												</button>
											</td>
										</tr>
										<tr>
											<td>VAR0124</td>
											<td>Max Mustermann</td>
											<td>Christoph 31</td>
											<td className="text-error">
												<span>Nicht verbunden</span>
											</td>
											<td className="text-success">
												<span>Verbunden</span>
											</td>
											<td className="flex gap-2">
												<button
													className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
													data-tip="Kick"
												>
													<RedoDot size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
													data-tip="Ban"
												>
													<LockKeyhole size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
													data-tip="Profil"
												>
													<User size={15} />
												</button>
											</td>
										</tr>
										<tr>
											<td>VAR0124</td>
											<td>Max Mustermann</td>
											<td>Christoph 31</td>
											<td className="text-error">
												<span>Nicht verbunden</span>
											</td>
											<td className="text-success">
												<span>Verbunden</span>
											</td>
											<td className="flex gap-2">
												<button
													className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
													data-tip="Kick"
												>
													<RedoDot size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
													data-tip="Ban"
												>
													<LockKeyhole size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
													data-tip="Profil"
												>
													<User size={15} />
												</button>
											</td>
										</tr>
										<tr>
											<td>VAR0124</td>
											<td>Max Mustermann</td>
											<td>Christoph 31</td>
											<td className="text-error">
												<span>Nicht verbunden</span>
											</td>
											<td className="text-success">
												<span>Verbunden</span>
											</td>
											<td className="flex gap-2">
												<button
													className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
													data-tip="Kick"
												>
													<RedoDot size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
													data-tip="Ban"
												>
													<LockKeyhole size={15} />
												</button>
												<button
													className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
													data-tip="Profil"
												>
													<User size={15} />
												</button>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div className="card bg-base-300 shadow-md w-full mt-4 max-h-48 overflow-y-auto">
						<div className="card-body">
							<div className="card-title flex items-center gap-2">
								<ShieldAlert size={20} /> Allgemeine Befehle
							</div>
							<div className="flex items-center justify-between gap-2">
								<div className="flex items-center justify-left gap-2">
									<button className="btn btn-soft btn-error mt-2">Kick Everybody</button>
									<button className="btn btn-soft btn-warning mt-2">
										Wartungsmodus einschalten
									</button>
									<button className="btn btn-soft btn-info mt-2">Delete All Missions</button>
								</div>

								<button className="btn btn-outline btn-info mt-2 flex items-center gap-2">
									<Eye size={22} />
									Als Observer verbinden
								</button>
							</div>
						</div>
					</div>
				</div>
				<form method="dialog" className="modal-backdrop">
					<button>close</button>
				</form>
			</dialog>
		</div>
	);
}