"use client"; import { useEffect, useState } from "react"; import { Spinner } from "../UI"; import { getStoredToken } from "../../lib/auth"; import { userService } from "../../services/user.service"; import type { UserDetail } from "../../types/user"; interface UserDetailModalProps { userId: string; onClose: () => void; } // ── small helper components ─────────────────────────────────────────────────── function DetailRow({ label, value }: { label: string; value?: string | null }) { return (

{label} {value || "—"}

); } function StatusBadge({ active }: { active: boolean }) { return ( {active ? "نشط" : "معطل"} ); } function Avatar({ name }: { name: string }) { const initials = name.trim().split(" ").slice(0, 2).map(w => w[0]).join("").toUpperCase(); return (

{initials}

); } // ── main component ──────────────────────────────────────────────────────────── export function UserDetailModal({ userId, onClose }: UserDetailModalProps) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // close on Escape useEffect(() => { const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [onClose]); // fetch user details on mount useEffect(() => { let cancelled = false; (async () => { try { const token = getStoredToken(); const res = await userService.getById(userId, token); if (!cancelled) setUser(res.data); } catch { if (!cancelled) setError("تعذّر تحميل بيانات المستخدم. يرجى المحاولة لاحقاً."); } finally { if (!cancelled) setLoading(false); } })(); return () => { cancelled = true; }; }, [userId]); // ── helpers ─────────────────────────────────────────────────────────────── const fmt = (iso?: string | null) => iso ? new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric" }) : null; // ── render ──────────────────────────────────────────────────────────────── return ( ); }