"use client";
import { useSyncExternalStore } from "react";
import getToken, { TOKEN_EVENT } from "@/utils/get-token";

/**
 * نفس getToken() الأصلي لكن آمن للتصيير على الخادم:
 * أثناء الـ Hydration يعيد null (مثل HTML الخادم) ثم القيمة الحقيقية فوراً،
 * فلا يحدث عدم تطابق بين HTML الخادم والمتصفح للمستخدم المسجّل.
 */
const subscribe = (cb: () => void) => {
    window.addEventListener("storage", cb); // تبويبات أخرى
    window.addEventListener(TOKEN_EVENT, cb); // نفس التبويب (setToken / clearToken)
    return () => {
        window.removeEventListener("storage", cb);
        window.removeEventListener(TOKEN_EVENT, cb);
    };
};

export function useToken(): string | null {
    return useSyncExternalStore(subscribe, getToken, () => null);
}