/* global window, React */

window.Dashboard = function Dashboard({ ctx }) {
  const Icon = window.Icon;
  const me = window.ME;
  const pct = (me.actual / me.target) * 100;
  const meKpi = [
    { label: "Kunjungan", value: me.visits, delta: "+4 today", tone: "primary", icon: "MapPin" },
    { label: "Order Hari Ini", value: 8, delta: "+2", tone: "emerald", icon: "FileText" },
    { label: "Deal Aktif", value: me.deals, delta: "3 closing soon", tone: "indigo", icon: "Pipeline", trend: "flat" },
    { label: "Ranking Tim", value: "#" + window.ME_RANK, delta: "Top performer", tone: "warning", icon: "Trophy" },
  ];

  return (
    <window.Screen
      title="Beranda"
      right={
        <>
          <button className="icon-btn" onClick={() => ctx.notify("Cari outlet/deal")}><Icon.Search size={18} /></button>
          <button className="icon-btn" onClick={() => ctx.notify("3 notifikasi baru")}>
            <Icon.Bell size={18} />
            <span className="dot"></span>
          </button>
        </>
      }
    >
      {/* Hero greeting */}
      <div className="hero">
        <div className="greet">Selamat pagi,</div>
        <div className="name">{me.name.split(" ")[0]} 👋</div>
        <div className="role">{me.role} · {me.region}</div>
        <div className="hero-stat-row">
          <div className="hero-stat">
            <div className="l">Pencapaian</div>
            <div className="v">{pct.toFixed(0)}%</div>
            <div className="d">{window.fmtShort(me.actual)}</div>
          </div>
          <div className="hero-stat">
            <div className="l">Target MTD</div>
            <div className="v">{window.fmtShort(me.target)}</div>
            <div className="d">Gap {window.fmtShort(Math.max(me.target - me.actual, 0))}</div>
          </div>
        </div>
      </div>

      {/* KPI Mini grid */}
      <div className="mstat-grid">
        {meKpi.map((k, i) => <window.MStat key={i} {...k} />)}
      </div>

      {/* Revenue chart */}
      <window.MSection title="Trend Personal" sub="Revenue 12 bulan" action="Detail" onAction={() => ctx.go("revenue")}>
        <div className="m-card">
          <window.LineChart data={window.REVENUE_MONTHLY} valueKey="actual" targetKey="target" />
        </div>
      </window.MSection>

      {/* Alerts */}
      <window.MSection title="Perlu Perhatian" sub="3 item">
        {window.ALERTS.slice(0, 3).map((a, i) => {
          const Ic = window.Icon[a.icon];
          return (
            <div key={i} className={`insight ${a.tone === "danger" ? "danger" : a.tone === "warning" ? "warn" : ""}`}>
              <div className="insight-icon"><Ic size={16} /></div>
              <div>
                <div className="ti">{a.title}</div>
                <div className="tx">{a.text}</div>
              </div>
            </div>
          );
        })}
      </window.MSection>

      {/* Quick shortcuts */}
      <window.MSection title="Pintasan">
        <div className="m-list">
          <button className="m-list-item primary" onClick={() => ctx.go("pipeline")}>
            <div className="li-icon"><Icon.Pipeline size={18} /></div>
            <div className="li-body">
              <div className="li-title">Pipeline saya</div>
              <div className="li-sub">{me.deals} deal aktif · 3 closing</div>
            </div>
            <Icon.ChevronRight size={16} />
          </button>
          <button className="m-list-item emerald" onClick={() => ctx.go("approvals")}>
            <div className="li-icon"><Icon.Approval size={18} /></div>
            <div className="li-body">
              <div className="li-title">Approval saya</div>
              <div className="li-sub">1 menunggu Director, 1 overdue</div>
            </div>
            <Icon.ChevronRight size={16} />
          </button>
          <button className="m-list-item warning" onClick={() => ctx.go("leaderboard")}>
            <div className="li-icon"><Icon.Trophy size={18} /></div>
            <div className="li-body">
              <div className="li-title">Posisi di Leaderboard</div>
              <div className="li-sub">#{window.ME_RANK} dari {window.SALES_REPS.length} sales</div>
            </div>
            <Icon.ChevronRight size={16} />
          </button>
        </div>
      </window.MSection>
    </window.Screen>
  );
};