// Agents page
const { Card: AgCard, Pill: AgPill, Btn: AgBtn, Avatar: AgAvatar, Topbar: AgTopbar } = window.UI;

function Agents() {
  const [filter, setFilter] = React.useState("all");
  const filtered = window.Mock.agents.filter(a => filter === "all" || a.status === filter);

  return (
    <div className="flex-1 flex flex-col h-full overflow-hidden">
      <AgTopbar
        title="Agents"
        subtitle={`${window.Mock.agents.length} CSRs · ${window.Mock.agents.filter(a => a.status === "online").length} online right now`}
        right={<AgBtn variant="primary"><Icon.Plus size={14}/> Invite agent</AgBtn>}
      />
      <div className="flex-1 overflow-y-auto px-7 py-6">
        <div className="flex items-center gap-2 mb-5">
          {[
            { v: "all", l: `All · ${window.Mock.agents.length}` },
            { v: "online", l: `Online · ${window.Mock.agents.filter(a => a.status === "online").length}` },
            { v: "away", l: `Away · ${window.Mock.agents.filter(a => a.status === "away").length}` },
            { v: "offline", l: `Offline · ${window.Mock.agents.filter(a => a.status === "offline").length}` },
          ].map(t => (
            <button key={t.v} onClick={() => setFilter(t.v)} className={`h-8 px-3 rounded-lg text-[12.5px] ${filter === t.v ? "bg-white/[0.08] text-white border border-white/[0.1]" : "text-white/55 hover:text-white"}`}>{t.l}</button>
          ))}
        </div>

        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
          {filtered.map(a => (
            <AgCard key={a.id} className="relative overflow-hidden">
              <div className="absolute top-0 left-0 right-0 h-px" style={{ background: `linear-gradient(90deg, transparent, ${a.color}, transparent)` }}/>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <AgAvatar name={a.name} color={a.color} size={48} status={a.status}/>
                  <div>
                    <div className="text-[15px] font-semibold text-white/95">{a.name}</div>
                    <div className="text-[11.5px] text-white/45">{a.email}</div>
                    <div className="text-[11.5px] text-white/65 mt-0.5">{a.role}</div>
                  </div>
                </div>
                <button className="text-white/40 hover:text-white p-1"><Icon.More size={16}/></button>
              </div>

              <div className="grid grid-cols-3 gap-3 mt-5 pt-4 border-t border-white/[0.05]">
                <div>
                  <div className="text-[10.5px] uppercase tracking-wider text-white/40">Chats</div>
                  <div className="text-[18px] font-semibold text-white mt-0.5 tabular-nums">{a.chats}</div>
                </div>
                <div>
                  <div className="text-[10.5px] uppercase tracking-wider text-white/40">CSAT</div>
                  <div className="text-[18px] font-semibold text-lime mt-0.5 flex items-baseline gap-1 tabular-nums">{a.csat}<span className="text-[10px] text-white/40">/5</span></div>
                </div>
                <div>
                  <div className="text-[10.5px] uppercase tracking-wider text-white/40">Avg reply</div>
                  <div className="text-[18px] font-semibold text-white mt-0.5 tabular-nums">{a.avg}</div>
                </div>
              </div>

              <div className="mt-4">
                <div className="text-[10.5px] uppercase tracking-wider text-white/40 mb-2">Assigned websites</div>
                <div className="flex flex-wrap gap-1.5">
                  {a.websites.map(wid => {
                    const w = window.Mock.websites.find(x => x.id === wid);
                    return (
                      <span key={wid} className="flex items-center gap-1.5 text-[11px] px-2 py-1 rounded-md bg-white/[0.04] border border-white/[0.06] text-white/80">
                        <span className="w-1.5 h-1.5 rounded-full" style={{ background: w.color }}/>
                        {w.name}
                      </span>
                    );
                  })}
                </div>
              </div>

              <div className="grid grid-cols-2 gap-2 mt-5">
                <AgBtn size="sm" variant="ghost"><Icon.Mail size={13}/> Message</AgBtn>
                <AgBtn size="sm" variant="ghost"><Icon.Settings size={13}/> Permissions</AgBtn>
              </div>
            </AgCard>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Agents = Agents;