// T2 Falcon Admin — Topbar

const { useState: useStateTB, useRef: useRefTB, useEffect: useEffectTB } = React;

const UserMenu = ({ lang, setLang, mood, setMood, onClose, t }) => {
  return (
    <div className="user-menu" onClick={(e) => e.stopPropagation()}>
      <div className="user-menu-head">
        <div className="avatar">
          <img
            src="admin/assets/profile-user.png"
            alt="Profile"
            width={40}
            height={40}
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '50%' }}
            onError={(e) => {
              const el = e.currentTarget;
              el.style.display = 'none';
              if (el.nextElementSibling) el.nextElementSibling.style.display = 'block';
            }}
          />
          <svg viewBox="0 0 40 40" width="40" height="40" style={{ display: 'none' }}>
            <rect width="40" height="40" fill="#cfd8dc"/>
            <circle cx="20" cy="16" r="7" fill="#8a9ea7"/>
            <path d="M7 37c0-7 6-11 13-11s13 4 13 11" fill="#8a9ea7"/>
          </svg>
        </div>
        <div>
          <div className="user-name">{t.userName}</div>
          <div className="user-job">{t.jobTitle}</div>
        </div>
      </div>

      <button className="user-menu-item" onClick={() => setLang(lang === 'en' ? 'ar' : 'en')}>
        <IcGlobe size={18} stroke={1.6} />
        <span className="label">
          <div>{t.language}</div>
          <span className="sub">{lang === 'en' ? t.english : t.arabic}</span>
        </span>
      </button>
      <button className="user-menu-item">
        <IcUserCircle size={18} stroke={1.6} />
        <span className="label">{t.profile}</span>
      </button>
      <button className="user-menu-item">
        <IcKey size={18} stroke={1.6} />
        <span className="label">{t.changePassword}</span>
      </button>

      <div className="user-menu-item" style={{ cursor: 'default' }}>
        <IcSun size={18} stroke={1.6} />
        <span className="label">{t.mood}</span>
        <div className="mood-toggle" onClick={(e) => e.stopPropagation()}>
          <button className={mood === 'dark' ? 'active' : ''} onClick={() => setMood('dark')}>
            <IcMoon size={12} stroke={2} />
          </button>
          <button className={mood === 'light' ? 'active' : ''} onClick={() => setMood('light')}>
            <IcSun size={12} stroke={2} />
          </button>
        </div>
      </div>

      <div className="user-menu-sep"></div>

      <button className="user-menu-item danger" onClick={() => { window.location.href = 'T2 Falcon Login - Enhanced.html'; }}>
        <IcLogout size={18} stroke={1.6} />
        <span className="label">{t.logout}</span>
      </button>
    </div>
  );
};

const Topbar = ({ pageTitle, breadcrumb, lang, setLang, mood, setMood, t }) => {
  const [menuOpen, setMenuOpen] = useStateTB(false);
  const ref = useRefTB(null);

  useEffectTB(() => {
    if (!menuOpen) return;
    const onDoc = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setMenuOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [menuOpen]);

  return (
    <header className="topbar">
      <div className="topbar-titles">
        <div className="topbar-title">{pageTitle}</div>
        <div className="breadcrumb">
          <IcHome size={13} stroke={1.8} />
          <span className="crumb">{t.home}</span>
          {breadcrumb.map((c, i) => (
            <React.Fragment key={i}>
              <IcChevronRight size={11} stroke={2} className="sep flip-rtl" />
              <span className={`crumb ${i === breadcrumb.length - 1 ? 'current' : ''}`}>{c}</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="topbar-actions">
        <button className="icon-btn ask-ai-btn" aria-label={t.askAI || 'Ask AI'} title={t.askAI || 'Ask AI'} onClick={() => window.falconAskAI && window.falconAskAI.open()}>
          <span className="ask-ai-spark">
            <svg width="21" height="21" viewBox="0 0 24 24">
              <defs>
                <linearGradient id="askAiGrad" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="#0d3f44" />
                  <stop offset=".5" stopColor="#2e8b80" />
                  <stop offset="1" stopColor="#2dd4d9" />
                </linearGradient>
              </defs>
              <path d="M12 2C12.5 6.9 15.1 9.5 20 10C15.1 10.5 12.5 13.1 12 18C11.5 13.1 8.9 10.5 4 10C8.9 9.5 11.5 6.9 12 2Z" fill="url(#askAiGrad)" />
              <path d="M18.6 14.4C18.75 16.3 19.7 17.25 21.6 17.4C19.7 17.55 18.75 18.5 18.6 20.4C18.45 18.5 17.5 17.55 15.6 17.4C17.5 17.25 18.45 16.3 18.6 14.4Z" fill="url(#askAiGrad)" />
            </svg>
          </span>
        </button>
        <button className="icon-btn" aria-label="Search"><IcSearch size={18} stroke={1.8} /></button>
        <button className="icon-btn" aria-label="Notifications">
          <IcBell size={18} stroke={1.8} />
          <span className="badge-dot"></span>
        </button>
        <div className="topbar-divider"></div>
        <div ref={ref} style={{ position: 'relative' }}>
          <button className="user-chip" onClick={() => setMenuOpen(!menuOpen)}>
            <div className="avatar">
              <svg viewBox="0 0 40 40" width="40" height="40">
                <rect width="40" height="40" fill="#cfd8dc"/>
                <circle cx="20" cy="16" r="7" fill="#8a9ea7"/>
                <path d="M7 37c0-7 6-11 13-11s13 4 13 11" fill="#8a9ea7"/>
              </svg>
            </div>
            <div>
              <div className="user-name">{t.userName}</div>
              <div className="user-job">{t.jobTitle}</div>
            </div>
            <IcChevronDown size={14} stroke={2} className="user-chevron" />
          </button>
          {menuOpen && <UserMenu lang={lang} setLang={setLang} mood={mood} setMood={setMood} onClose={() => setMenuOpen(false)} t={t} />}
        </div>
      </div>
    </header>
  );
};

window.Topbar = Topbar;
window.UserMenu = UserMenu;