/* global window, React */

window.Team = function Team({ ctx }) {
  const Icon = window.Icon;

  return (
    <window.Screen
      title="Tim Saya"
      back={true}
      onBack={() => ctx.go("profile")}
      right={<button className="icon-btn" onClick={() => ctx.notify("Cari rep")}><Icon.Search size={18} /></button>}
    >
      {/* Director card */}
      <window.MSection title="Direktur Sales">
        <div className="m-card" style={{ padding: 16, textAlign: "center" }}>
          <window.Avatar tone={window.ORG_CHART.director.tone} initials={window.ORG_CHART.director.initials} size={56} />
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, marginTop: 8 }}>
            {window.ORG_CHART.director.name}
          </div>
          <div style={{ fontSize: 12, color: "var(--muted)" }}>{window.ORG_CHART.director.role}</div>
          <div style={{ fontSize: 11, color: "var(--primary)", marginTop: 4, fontWeight: 600 }}>
            Mengelola 6 region · {window.SALES_REPS.length} sales rep
          </div>
        </div>
      </window.MSection>

      {/* Regional Managers */}
      <window.MSection title="Regional Managers" sub="6 region">
        <div className="team-grid">
          {window.ORG_CHART.managers.map((m, i) => (
            <div key={i} className="team-card" onClick={() => ctx.notify(`Detail ${m.name}`)}>
              <window.Avatar tone={m.tone} initials={m.initials} size={52} />
              <div className="tn">{m.name}</div>
              <div className="tr">{m.role}</div>
              <div className="ts">{m.reports} sales</div>
            </div>
          ))}
        </div>
      </window.MSection>

      {/* Peers */}
      <window.MSection title="Sales Rep" sub={`${window.SALES_REPS.length} anggota`}>
        <div className="team-grid">
          {window.SALES_REPS.map(r => (
            <div key={r.id} className="team-card" onClick={() => ctx.notify(`Profil ${r.name}`)}>
              <window.Avatar tone={r.tone} initials={r.name.split(" ").map(w => w[0]).slice(0, 2).join("")} size={48} />
              <div className="tn">{r.name}</div>
              <div className="tr">{r.region}</div>
              <div className="ts">{window.fmtShort(r.actual)}</div>
            </div>
          ))}
        </div>
      </window.MSection>
    </window.Screen>
  );
};