/* global React, Icon, Chip, Button, Avatar, Pagination, api */

const LIMIT = 20;

const STATUS_TABS = [
  { id: "all",         label: "All"         },
  { id: "in_progress", label: "In progress" },
  { id: "completed",   label: "Completed"   },
];

const ENG_STATUS = {
  in_progress: { label: "In progress", kind: "info"    },
  critical:    { label: "Critical",    kind: "danger"  },
  completed:   { label: "Completed",   kind: "success" },
};

function EngagementsPage({ onOpenEngagement }) {
  const [engagements,  setEngagements]  = React.useState([]);
  const [loading,      setLoading]      = React.useState(true);
  const [searchInput,  setSearchInput]  = React.useState("");
  const [search,       setSearch]       = React.useState("");
  const [statusFilter, setStatus]       = React.useState("all");
  const [agentFilter,  setAgent]        = React.useState("all");
  const [agents,       setAgents]       = React.useState([]);
  const [page,         setPage]         = React.useState(1);
  const [pages,        setPages]        = React.useState(1);
  const [total,        setTotal]        = React.useState(0);
  const [counts,       setCounts]       = React.useState({ in_progress: 0, completed: 0 });
  const [isSuperAdmin, setIsSuperAdmin] = React.useState(null);

  /* Fetch agents once on mount */
  React.useEffect(() => {
    api.get("/users?status=active")
      .then(res => setAgents(res.data || []))
      .catch(() => {});
  }, []);

  /* Debounce search — 400 ms */
  React.useEffect(() => {
    const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 400);
    return () => clearTimeout(t);
  }, [searchInput]);

  /* Fetch whenever filters / page change */
  React.useEffect(() => {
    setLoading(true);
    const params = new URLSearchParams({ page, limit: LIMIT });
    if (statusFilter !== "all") params.set("status", statusFilter);
    if (agentFilter  !== "all") params.set("agent",  agentFilter);
    if (search)                 params.set("q",      search);
    api.get("/engagements?" + params.toString())
      .then(res => {
        setEngagements((res.data || []).map(api.map.engagement));
        setTotal(res.total  || 0);
        setPages(res.pages  || 1);
        if (res.counts) setCounts(res.counts);
        if (res.isSuperAdmin !== undefined) setIsSuperAdmin(res.isSuperAdmin);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [statusFilter, agentFilter, search, page]);

  function handleStatusChange(val) { setStatus(val); setPage(1); }
  function handleAgentChange(val)  { setAgent(val);  setPage(1); }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Workflow</div>
          <h1 className="page-title">Engagements</h1>
          <div className="page-sub">
            {isSuperAdmin === false ? "Showing engagements assigned to you. " : ""}
            {total} total &nbsp;·&nbsp;
            {counts.in_progress} in progress &nbsp;·&nbsp;
            {counts.completed} completed
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="secondary" icon="download">Export</Button>
        </div>
      </div>

      {/* Filters row */}
      <div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>

        {/* Search */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 6, padding: "7px 12px", flex: 1, maxWidth: 340 }}>
          <Icon name="search" size={15} />
          <input
            placeholder="Search by customer, service, ref…"
            value={searchInput}
            onChange={e => setSearchInput(e.target.value)}
            style={{ border: 0, outline: "none", fontFamily: "inherit", fontSize: 13.5, flex: 1, background: "transparent", color: "var(--fg-1)" }}
          />
          {searchInput && (
            <button onClick={() => { setSearchInput(""); setSearch(""); setPage(1); }}
              style={{ border: 0, background: "transparent", cursor: "pointer", color: "var(--fg-3)", padding: 0, display: "flex" }}>
              <Icon name="x" size={14} />
            </button>
          )}
        </div>

        {/* Status tabs */}
        <div style={{ display: "flex", gap: 4 }}>
          {STATUS_TABS.map(({ id, label }) => (
            <button key={id} onClick={() => handleStatusChange(id)} style={{
              padding: "7px 13px", borderRadius: 6, border: "1px solid", cursor: "pointer",
              fontSize: 13, fontFamily: "inherit", fontWeight: 500,
              background:  statusFilter === id ? "var(--brand-burgundy)" : "#fff",
              color:       statusFilter === id ? "#fff" : "var(--fg-2)",
              borderColor: statusFilter === id ? "var(--brand-burgundy)" : "var(--border-strong)",
            }}>
              {label}
              {id !== "all" && (
                <span style={{ marginLeft: 6, opacity: 0.8, fontSize: 11.5 }}>
                  {counts[id] || 0}
                </span>
              )}
            </button>
          ))}
        </div>

        {/* Agent filter — Super Admin only */}
        {isSuperAdmin && (
          <select value={agentFilter} onChange={e => handleAgentChange(e.target.value)}
            style={{ padding: "7px 12px", borderRadius: 6, border: "1px solid var(--border-strong)", fontSize: 13, fontFamily: "inherit", background: "#fff", color: "var(--fg-1)", cursor: "pointer", outline: "none" }}>
            <option value="all">All agents</option>
            {agents.map(a => <option key={a._id} value={a._id}>{a.name}</option>)}
          </select>
        )}
      </div>

      <div className="card" style={{ padding: 0 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Engagement</th>
              <th>Customer</th>
              <th>Stage</th>
              <th>Agent</th>
              <th>Started</th>
              <th>Due</th>
              <th>Quoted</th>
              <th>Paid</th>
              <th>Status</th>
              <th style={{ textAlign: "right" }}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan="10" style={{ textAlign: "center", padding: "56px 0", color: "var(--fg-3)" }}>Loading…</td></tr>
            ) : engagements.length === 0 ? (
              <tr><td colSpan="10" style={{ textAlign: "center", padding: "56px 0", color: "var(--fg-3)" }}>
                {search ? "No engagements match your search." : "No engagements found."}
              </td></tr>
            ) : engagements.map(e => {
              const sm = ENG_STATUS[e.status] || ENG_STATUS.in_progress;
              return (
                <tr key={e.id} onClick={() => onOpenEngagement && onOpenEngagement(e)}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div style={{ width: 30, height: 30, borderRadius: 7, background: "var(--plum-50)", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                        <Icon name={e.serviceIcon || "briefcase"} size={15} />
                      </div>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 500, maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{e.service}</div>
                        <div style={{ fontSize: 11.5, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>{String(e.id).slice(-8).toUpperCase()}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div className="av-row">
                      <Avatar name={e.customer} />
                      <span style={{ fontSize: 13.5 }}>{e.customer}</span>
                    </div>
                  </td>
                  <td>
                    <div style={{ display: "flex", gap: 3 }}>
                      {Array.from({ length: Math.min(e.totalStages, 9) }).map((_, n) => (
                        <div key={n} style={{ width: 16, height: 4, borderRadius: 2, background: n < e.stage ? "var(--brand-burgundy)" : "var(--ink-200)" }} />
                      ))}
                    </div>
                    <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 3 }}>{e.stage} / {e.totalStages}</div>
                  </td>
                  <td style={{ fontSize: 13 }}>{e.agent}</td>
                  <td className="cell-mono cell-muted" style={{ fontSize: 12 }}>{e.started}</td>
                  <td className="cell-mono" style={{ fontSize: 12, color: e.status === "critical" ? "var(--danger-700)" : "var(--fg-2)", fontWeight: e.status === "critical" ? 600 : 400 }}>{e.due}</td>
                  <td className="cell-mono cell-muted" style={{ fontSize: 12 }}>{e.quoted}</td>
                  <td className="cell-mono" style={{ fontSize: 12, color: e.paid === "AED 0" ? "var(--fg-4)" : "var(--success-700)" }}>{e.paid}</td>
                  <td><Chip kind={sm.kind}>{sm.label}</Chip></td>
                  <td style={{ textAlign: "right" }}>
                    <button className="btn btn-ghost btn-sm" onClick={ev => { ev.stopPropagation(); onOpenEngagement && onOpenEngagement(e); }}>Open</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        <Pagination page={page} pages={pages} total={total} limit={LIMIT} onPage={setPage} />
      </div>
    </div>
  );
}

Object.assign(window, { EngagementsPage });