/* global window, React */

window.Profile = function Profile({ ctx }) {
  const Icon = window.Icon;
  const me = window.ME;
  const pct = (me.actual / me.target) * 100;

  const menu = [
    { key: "leaderboard", icon: "Trophy",   tone: "warning", title: "Leaderboard",   sub: `Posisi #${window.ME_RANK} bulan ini` },
    { key: "team",        icon: "Team",     tone: "indigo",  title: "Tim Saya",      sub: `${window.SALES_REPS.length} sales rep, 6 region` },
    { key: "approvals",   icon: "Approval", tone: "primary", title: "Approval",      sub: "1 menunggu, 1 overdue" },
    { key: "revenue",     icon: "Trending", tone: "emerald", title: "Omzet & Trend", sub: "Personal & tim, 12 bulan" },
    { key: "forecast",    icon: "Forecast", tone: "violet",  title: "Forecast",      sub: "Q2 base case Rp 64,2M" },
    { key: "products",    icon: "Package",  tone: "orange",  title: "Katalog Produk", sub: "SKU performance & margin" },
    { key: "reports",     icon: "Report",   tone: "info",    title: "Laporan",       sub: "Daily, weekly, regional" },
  ];

  return (
    <window.Screen
      title="Profil"
      right={<button className="icon-btn" onClick={() => ctx.notify("Settings")}><Icon.Settings size={18} /></button>}
    >
      {/* Profile hero */}
      <div className="prof-hero">
        <div className="pa">{window.ME_INITIALS}</div>
        <div className="pn">{me.name}</div>
        <div className="pr">{me.role} · {me.region}</div>
        <div className="pstat">
          <div>
            <div className="l">Achievement</div>
            <div className="v">{pct.toFixed(0)}%</div>
          </div>
          <div>
            <div className="l">Ranking</div>
            <div className="v">#{window.ME_RANK}</div>
          </div>
          <div>
            <div className="l">Deal</div>
            <div className="v">{me.deals}</div>
          </div>
        </div>
      </div>

      {/* Menu list */}
      <window.MSection title="Menu lainnya">
        <div className="m-list">
          {menu.map(m => {
            const Ic = Icon[m.icon];
            return (
              <button key={m.key} className={`m-list-item ${m.tone}`} onClick={() => ctx.go(m.key)}>
                <div className="li-icon"><Ic size={18} /></div>
                <div className="li-body">
                  <div className="li-title">{m.title}</div>
                  <div className="li-sub">{m.sub}</div>
                </div>
                <Icon.ChevronRight size={16} />
              </button>
            );
          })}
        </div>
      </window.MSection>

      <window.MSection title="Akun">
        <div className="m-list">
          <button className="m-list-item" onClick={() => ctx.notify("Edit profil")}>
            <div className="li-icon"><Icon.User size={18} /></div>
            <div className="li-body">
              <div className="li-title">Edit Profil</div>
              <div className="li-sub">Foto, kontak, target</div>
            </div>
            <Icon.ChevronRight size={16} />
          </button>
          <button className="m-list-item info" onClick={() => ctx.notify("Notifikasi")}>
            <div className="li-icon"><Icon.Bell size={18} /></div>
            <div className="li-body">
              <div className="li-title">Notifikasi</div>
              <div className="li-sub">Push, email, SMS</div>
            </div>
            <Icon.ChevronRight size={16} />
          </button>
          <button className="m-list-item danger" onClick={() => ctx.notify("Logout")}>
            <div className="li-icon"><Icon.LogOut size={18} /></div>
            <div className="li-body">
              <div className="li-title">Keluar</div>
              <div className="li-sub">Sign out dari aplikasi</div>
            </div>
            <Icon.ChevronRight size={16} />
          </button>
        </div>
      </window.MSection>

      <div className="empty">SalesPulse v1.4.2 · build 246</div>
    </window.Screen>
  );
};