// ============================================================ // UI primitives - buttons, cards, toasts, skeletons, icons, confetti // ============================================================ const { motion, AnimatePresence } = window.Motion || window.framerMotion || window.FramerMotion || {}; // framer-motion UMD exposes on window.Motion? Actually UMD name is "Motion" but may vary. Fallback: const MotionLib = window.Motion || window.FramerMotion || window.framerMotion || {}; const M = MotionLib.motion || {}; const AP = MotionLib.AnimatePresence || (({children}) => children); // ---------- ICONS (inline svg, currentColor) ---------- const Icon = { Book: (p)=>, Play: (p)=>, Pause: (p)=>, Check: (p)=>, X: (p)=>, User: (p)=>, Users: (p)=>, Home: (p)=>, Calendar: (p)=>, CreditCard:(p)=>, Chart: (p)=>, Settings: (p)=>, Upload: (p)=>, LogOut: (p)=>, Award: (p)=>, Sparkle: (p)=>, Clock: (p)=>, ArrowLeft: (p)=>, ArrowRight:(p)=>, Menu: (p)=>, Copy: (p)=>, Pen: (p)=>, Trash: (p)=>, Eye: (p)=>, Search: (p)=>, Video: (p)=>, File: (p)=>, Star: (p)=>, Trophy: (p)=>, Flame: (p)=>, }; // ---------- Logo ---------- function Logo({ light=false, size="md" }) { const sizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl", xl: "text-4xl" }; return (

مستر يوسف عصام

اللغة العربية · الأزهر

); } // ---------- Buttons ---------- function Button({ children, variant="primary", size="md", className="", ...p }) { const sizes = { sm: "px-4 py-2 text-sm", md: "px-6 py-3 text-base", lg: "px-8 py-4 text-lg" }; const variants = { primary: "btn-primary rounded-2xl", dark: "bg-azhar-800 hover:bg-azhar-900 text-white rounded-2xl shadow-soft transition-all hover:-translate-y-0.5", outline: "border-2 border-azhar-800 text-azhar-800 hover:bg-azhar-800 hover:text-white rounded-2xl transition-all", ghost: "btn-ghost rounded-2xl", light: "bg-white text-azhar-800 hover:bg-cream rounded-2xl shadow-soft transition-all hover:-translate-y-0.5 font-bold", danger: "bg-red-500 hover:bg-red-600 text-white rounded-2xl transition", success: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-2xl transition", }; return ; } // ---------- Card ---------- function Card({ children, className="", hover=false, ...p }) { return

{children}

; } // ---------- Input ---------- function Input({ label, error, className="", type="text", ...p }) { return ( {label &&

{label}

} {error &&

{error}

} ); } function Textarea({ label, error, className="", ...p }) { return ( {label &&

{label}

}

{error && <div className="text-xs text-red-600 mt-1">{error}</div>}
    </label>
  );
}
function Select({ label, options=[], className="", ...p }) {
  return (
    <label className="block">
      {label && <div className="text-sm font-bold text-azhar-800 mb-1.5">{label}</div>}
      <select className={`w-full px-4 py-3 rounded-xl border-2 border-black/10 focus:border-azhar-600 bg-white transition ${className}`} {...p}>
        {options.map(o => <option key={o.value ?? o} value={o.value ?? o}>{o.label ?? o}</option>)}
      </select>
    </label>
  );
}

// ---------- Skeleton ----------
function Skeleton({ className="h-4 w-full" }) {
  return <div className={`skeleton ${className}`} />;
}

// ---------- Toast system ----------
const ToastContext = React.createContext({ push: () => {} });
function ToastProvider({ children }) {
  const [toasts, setToasts] = React.useState([]);
  const push = React.useCallback((msg, opts = {}) => {
    const id = Math.random().toString(36).slice(2);
    const t = { id, msg, type: opts.type || "info", ttl: opts.ttl ?? 3500 };
    setToasts(s => [...s, t]);
    setTimeout(() => setToasts(s => s.filter(x => x.id !== id)), t.ttl);
  }, []);
  return (
    <ToastContext.Provider value={{ push }}>
      {children}
      <div className="fixed top-6 left-1/2 -translate-x-1/2 z-[1000] flex flex-col gap-2 pointer-events-none">
        {toasts.map(t => (
          <div key={t.id} className={`toast-in pointer-events-auto rounded-2xl px-5 py-3 shadow-lift font-bold text-sm flex items-center gap-2
            ${t.type==="success" ? "bg-emerald-600 text-white" :
              t.type==="error"   ? "bg-red-600 text-white" :
              t.type==="warning" ? "bg-amber-500 text-white" :
                                   "bg-azhar-800 text-white"}`}>
            {t.type==="success" && <Icon.Check className="w-4 h-4"/>}
            {t.type==="error"   && <Icon.X className="w-4 h-4"/>}
            <span>{t.msg}</span>
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}
const useToast = () => React.useContext(ToastContext);

// ---------- Modal ----------
function Modal({ open, onClose, children, wide=false }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = e => e.key === "Escape" && onClose?.();
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[500] flex items-center justify-center p-4" onClick={onClose}>
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
      <div className={`relative bg-white rounded-3xl shadow-lift w-full ${wide ? "max-w-4xl":"max-w-md"} max-h-[90vh] overflow-auto`} onClick={e=>e.stopPropagation()}>
        <button className="absolute top-3 left-3 w-9 h-9 rounded-full bg-black/5 hover:bg-black/10 flex items-center justify-center text-azhar-800" onClick={onClose}><Icon.X className="w-4 h-4"/></button>
        {children}
      </div>
    </div>
  );
}

// ---------- Confetti ----------
function fireConfetti(duration=2400) {
  const cv = document.getElementById("confetti-canvas");
  if (!cv) return;
  const ctx = cv.getContext("2d");
  cv.width = window.innerWidth; cv.height = window.innerHeight;
  const colors = ["#c9a227","#0f5132","#eec853","#194a35","#f8f5ee"];
  const parts = Array.from({length: 160}).map(() => ({
    x: cv.width/2 + (Math.random()-0.5)*200,
    y: cv.height/2 - 50,
    vx: (Math.random()-0.5)*10,
    vy: -Math.random()*10 - 6,
    g: 0.28,
    r: 4 + Math.random()*6,
    a: Math.random()*Math.PI,
    va: (Math.random()-0.5)*0.3,
    color: colors[Math.floor(Math.random()*colors.length)],
    life: 0,
  }));
  const start = performance.now();
  function frame(t) {
    const elapsed = t - start;
    ctx.clearRect(0,0,cv.width,cv.height);
    parts.forEach(p => {
      p.vy += p.g; p.x += p.vx; p.y += p.vy; p.a += p.va; p.life++;
      ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.a);
      ctx.fillStyle = p.color; ctx.fillRect(-p.r/2, -p.r/2, p.r, p.r*0.6);
      ctx.restore();
    });
    if (elapsed < duration) requestAnimationFrame(frame);
    else ctx.clearRect(0,0,cv.width,cv.height);
  }
  requestAnimationFrame(frame);
}

// ---------- Copy to clipboard ----------
async function copyToClipboard(text) {
  try { await navigator.clipboard.writeText(text); return true; } catch { return false; }
}

// ---------- Utils ----------
const fmt = {
  price: (n) => `${Number(n||0).toLocaleString("ar-EG")} ج.م`,
  int: (n) => Number(n||0).toLocaleString("ar-EG"),
  date: (d) => { try { return new Date(d).toLocaleDateString("ar-EG",{day:"numeric",month:"long",year:"numeric"}); } catch { return String(d||"—"); } },
  datetime: (d) => { try { return new Date(d).toLocaleString("ar-EG",{day:"numeric",month:"short",hour:"2-digit",minute:"2-digit"}); } catch { return String(d||"—"); } },
  time: (s) => {
    s = Math.max(0, Math.floor(Number(s)||0));
    const m = Math.floor(s/60), sec = s%60;
    return `${String(m).padStart(2,"0")}:${String(sec).padStart(2,"0")}`;
  },
};

// ---------- Auth guard ----------
function useAuth() {
  const [state, setState] = React.useState(() => ({ token: getToken(), role: getRole(), student: getStudent() }));
  React.useEffect(() => {
    const on = () => setState({ token: getToken(), role: getRole(), student: getStudent() });
    window.addEventListener("storage", on);
    window.addEventListener("auth-changed", on);
    return () => { window.removeEventListener("storage", on); window.removeEventListener("auth-changed", on); };
  }, []);
  return state;
}

// ---------- Motion wrappers (fallback if framer missing) ----------
const MDiv = M.div || (p => React.createElement("div", p));
const MButton = M.button || (p => React.createElement("button", p));
function FadeIn({ children, delay=0, y=12, className="", ...p }) {
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setShown(true), 20 + delay*1000); return () => clearTimeout(t); }, [delay]);
  return (
    <div {...p} className={className} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? "translateY(0)" : `translateY(${y}px)`,
      transition: "opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1)",
      ...(p.style||{})
    }}>{children}</div>
  );
}
// Intersection-observer based fallback that ALWAYS shows content even if framer-motion isn't loaded.
function Stagger({ children, gap=.08, className="" }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(true); // visible by default
  React.useEffect(() => {
    if (!ref.current) return;
    // Re-trigger animation when it enters viewport for the first time
    setVisible(false);
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); io.disconnect(); }
    }, { rootMargin: "-30px" });
    io.observe(ref.current);
    // Fallback: force visible after 400ms in case observer fails
    const t = setTimeout(() => setVisible(true), 400);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  return (
    <div ref={ref} className={className} data-stagger={visible ? "in" : "out"}>
      {children}
    </div>
  );
}
function StaggerItem({ children, className="", index=0 }) {
  // uses CSS animation triggered by parent [data-stagger=in]
  return <div className={`stagger-item ${className}`} style={{"--i": index}}>{children}</div>;
}

Object.assign(window, {
  MotionLib, M, AP, MDiv, MButton, FadeIn, Stagger, StaggerItem,
  Icon, Logo, Button, Card, Input, Textarea, Select, Skeleton,
  ToastProvider, useToast, Modal, fireConfetti, copyToClipboard, fmt, useAuth,
});