"use client";

import { useState } from "react";
import type { SystemRoleKey, UserRoleAssignment } from "@/types/rolesAccess";

export function ViewAsUserSection({ role, users }: { role: SystemRoleKey; users: UserRoleAssignment[] }) {
  const [activeUser, setActiveUser] = useState<UserRoleAssignment | null>(null);
  if (role !== "org_admin") return <div className="liquid-glass rounded-[22px] p-6">شما به این بخش دسترسی ندارید.</div>;
  return (
    <section className="space-y-4">
      {activeUser ? <div className="rounded-2xl bg-amber-400/25 p-4 font-bold">شما در حال مشاهده سامانه به‌عنوان {activeUser.nameFa} هستید. <button onClick={() => setActiveUser(null)} className="mr-3 rounded-xl bg-white/20 px-3 py-1">خروج از حالت مشاهده</button></div> : null}
      <h2 className="text-xl font-black">مشاهده به‌عنوان کاربر</h2>
      <div className="grid gap-3 md:grid-cols-2">{users.map((user) => <div key={user.userId} className="liquid-glass rounded-[20px] p-4"><h3 className="font-black">{user.nameFa}</h3><p className="mt-2 text-sm opacity-70">{user.roleFa} • {user.unitFa}</p><button onClick={() => setActiveUser(user)} className="mt-3 rounded-2xl bg-emerald-500 px-4 py-2 text-white">شروع مشاهده به‌عنوان این کاربر</button></div>)}</div>
    </section>
  );
}