إدارة المستخدم والجلسة

"use client";

import { useUser, useAuth, useSessionList } from "@clerk/nextjs";
import { UserProfile } from "@clerk/nextjs";

export default function ProfilePage() {
  const { user, isLoaded } = useUser();
  const { has, signOut } = useAuth();
  const { sessions } = useSessionList();

  if (!isLoaded) {
    return <div>جاري التحميل...</div>;
  }

  return (
    <div dir="rtl" className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4">
        <h1 className="text-2xl font-bold mb-6">الملف الشخصي</h1>

        {/* معلومات المستخدم */}
        <div className="bg-white p-6 rounded-lg shadow mb-6">
          <div className="flex items-center gap-4">
            <img
              src={user?.imageUrl}
              alt={user?.fullName}
              className="w-16 h-16 rounded-full"
            />
            <div>
              <h2 className="text-xl font-bold">{user?.fullName}</h2>
              <p className="text-gray-500">
                {user?.primaryEmailAddress?.emailAddress}
              </p>
            </div>
          </div>
        </div>

        {/* الصلاحيات */}
        <div className="bg-white p-6 rounded-lg shadow mb-6">
          <h3 className="font-bold mb-3">الصلاحيات</h3>
          <div className="flex gap-2">
            {has({ role: "org:admin" }) && (
              <span className="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">
                مدير
              </span>
            )}
            {has({ role: "org:teacher" }) && (
              <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
                معلم
              </span>
            )}
            {has({ role: "org:student" }) && (
              <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
                طالب
              </span>
            )}
          </div>
        </div>

        {/* الجلسات */}
        <div className="bg-white p-6 rounded-lg shadow mb-6">
          <h3 className="font-bold mb-3">الجلسات النشطة</h3>
          <div className="space-y-2">
            {sessions?.map((session) => (
              <div
                key={session.id}
                className="flex justify-between items-center p-3 bg-gray-50 rounded-lg"
              >
                <div>
                  <p className="font-medium">
                    {session.user?.fullName}
                  </p>
                  <p className="text-sm text-gray-500">
                    آخر نشاط: {session.lastActiveAt?.toLocaleDateString("ar-SA")}
                  </p>
                </div>
                {session.current && (
                  <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
                    حالية
                  </span>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* زر تسجيل الخروج */}
        <button
          onClick={() => signOut()}
          className="w-full bg-red-600 text-white py-3 rounded-lg hover:bg-red-700"
        >
          تسجيل الخروج
        </button>
      </div>
    </div>
  );
}