/* global window, React */

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

  return (
    <window.Screen
      title="Target Sales"
      right={<button className="icon-btn" onClick={() => ctx.notify("Filter periode")}><Icon.Filter size={18} /></button>}
    >
      {/* Personal target hero */}
      <div className="m-card" style={{ marginBottom: 14, padding: 18, textAlign: "center" }}>
        <div className="label-tiny">Target personal MTD</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 700, marginTop: 6, color: "var(--text)" }}>
          {window.fmtIDR(me.actual)}
        </div>
        <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 14 }}>
          dari {window.fmtIDR(me.target)} · {remainingDays} hari tersisa
        </div>
        <div className="progress" style={{ height: 10 }}>
          <div className={`progress-fill ${pct >= 100 ? "success" : pct >= 80 ? "" : "warn"}`} style={{ width: `${Math.min(pct, 100)}%` }}></div>
        </div>
        <div className="between" style={{ marginTop: 8, fontSize: 12 }}>
          <span style={{ color: "var(--muted)" }}>0</span>
          <strong style={{ color: pct >= 100 ? "var(--emerald)" : "var(--text)" }}>{pct.toFixed(1)}%</strong>
          <span style={{ color: "var(--muted)" }}>{window.fmtShort(me.target)}</span>
        </div>
      </div>

      {/* Mini KPI */}
      <div className="mini-kpi-row">
        <div className="mini-kpi">
          <div className="l">Daily Avg</div>
          <div className="v">{window.fmtShort(me.actual / 22)}</div>
          <div className="d">vs target</div>
        </div>
        <div className="mini-kpi">
          <div className="l">Need/day</div>
          <div className="v">{window.fmtShort((me.target - me.actual) / remainingDays)}</div>
          <div className="d">{remainingDays} hari</div>
        </div>
        <div className="mini-kpi">
          <div className="l">Streak</div>
          <div className="v">5x</div>
          <div className="d">hit target</div>
        </div>
      </div>

      {/* Performance regions */}
      <window.MSection title="Target per Region" sub="Tim sales nasional">
        {window.REGIONS.map((r) => {
          const rp = (r.actual / r.target) * 100;
          const variant = rp >= 100 ? "success" : rp >= 80 ? "warn" : "danger";
          return (
            <div key={r.id} className="region-row" onClick={() => ctx.notify(`Detail ${r.name}`)}>
              <div className="rh">
                <div>
                  <div className="rn">{r.name}</div>
                  <div className="rmgr">RM {r.manager}</div>
                </div>
                <window.Avatar tone={r.color} initials={r.manager.split(" ").map(w => w[0]).slice(0, 2).join("")} />
              </div>
              <div className="rv">{window.fmtShort(r.actual)}</div>
              <div className={`rp ${rp >= 100 ? "up" : "down"}`}>{rp.toFixed(1)}% target · {r.outlets} outlet</div>
              <div className="progress">
                <div className={`progress-fill ${variant}`} style={{ width: `${Math.min(rp, 100)}%` }}></div>
              </div>
            </div>
          );
        })}
      </window.MSection>
    </window.Screen>
  );
};