/* global window, React */

window.Activity = function Activity({ ctx }) {
  const Icon = window.Icon;
  const [filter, setFilter] = React.useState("all");
  const filters = [
    { v: "all", l: "Semua" },
    { v: "visit", l: "Visit" },
    { v: "call", l: "Call" },
    { v: "deal", l: "Deal" },
    { v: "demo", l: "Demo" },
  ];
  const list = filter === "all" ? window.ACTIVITIES : window.ACTIVITIES.filter(a => a.type === filter);

  return (
    <window.Screen
      title="Aktivitas"
      right={<button className="icon-btn" onClick={() => ctx.notify("Filter tanggal")}><Icon.Calendar size={18} /></button>}
    >
      {/* KPI mini */}
      <div className="mini-kpi-row">
        {window.ACTIVITY_KPI.slice(0, 3).map((k, i) => (
          <div key={i} className="mini-kpi">
            <div className="l">{k.label.split(" ").slice(0, 2).join(" ")}</div>
            <div className="v">{k.value}</div>
            <div className={`d ${k.delta?.startsWith("-") ? "down" : ""}`}>{k.delta || "today"}</div>
          </div>
        ))}
      </div>

      {/* Filter chips */}
      <div className="chip-row">
        {filters.map(f => (
          <window.Chip key={f.v} label={f.l} active={filter === f.v} onClick={() => setFilter(f.v)} />
        ))}
      </div>

      {/* Timeline */}
      <window.MSection title="Aktivitas hari ini" sub={`${list.length} entry`}>
        <div className="m-card" style={{ paddingTop: 16 }}>
          <div className="timeline">
            {list.map((a) => {
              const ic = a.type === "deal" ? "Trophy" : a.type === "call" ? "Phone" : a.type === "visit" ? "MapPin" : a.type === "demo" ? "Eye" : "Bell";
              const I = window.Icon[ic];
              return (
                <div key={a.id} className="tl-item">
                  <div className={`tl-icon ${a.tone}`}><I size={12} /></div>
                  <div className="tl-name">{a.rep}</div>
                  <div className="tl-text">{a.text}</div>
                  <div className="tl-time">{a.time}</div>
                </div>
              );
            })}
          </div>
        </div>
      </window.MSection>

      <window.FAB icon="Plus" onClick={() => ctx.notify("Log activity baru")} />
    </window.Screen>
  );
};