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

const LIMIT = 20;

const STAGE_TABS = [
  { id: "new",       label: "New"       },
  { id: "contacted", label: "Contacted" },
  { id: "qualified", label: "Qualified" },
  { id: "converted", label: "Converted" },
  { id: "lost",      label: "Lost"      },
];

/* ── Main page ───────────────────────────────────────── */
function LeadsPage({ onOpenLead, onLeadUpdated }) {
  const [tab,         setTab]         = React.useState("new");
  const [leads,       setLeads]       = React.useState([]);
  const [loading,     setLoading]     = React.useState(true);
  const [searchInput, setSearchInput] = React.useState("");
  const [search,      setSearch]      = 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({ new: 0, contacted: 0, qualified: 0, converted: 0, lost: 0 });
  const [showAddLead,   setShowAddLead]   = React.useState(false);
  const [refreshKey,    setRefreshKey]    = React.useState(0);
  const [isSuperAdmin,  setIsSuperAdmin]  = React.useState(null);

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

  /* Fetch page from server */
  React.useEffect(() => {
    setLoading(true);
    const params = new URLSearchParams({ status: tab, page, limit: LIMIT });
    if (search) params.set("q", search);
    api.get("/leads?" + params.toString())
      .then(res => {
        setLeads((res.data || []).map(api.map.lead));
        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));
  }, [tab, search, page, refreshKey]);

  function handleTabChange(newTab) {
    setTab(newTab);
    setPage(1);
  }

  function handleAddLead() {
    setShowAddLead(false);
    setTab("new");
    setPage(1);
    setSearchInput("");
    setSearch("");
    setRefreshKey(k => k + 1);
  }

  function handleLeadUpdated(rawLead) {
    const mapped = api.map.lead(rawLead);
    setLeads(prev => prev.map(l => l.id === mapped.id ? mapped : l));
    if (onLeadUpdated) onLeadUpdated(mapped);
  }

  function handleStageChange(lead, newStage) {
    /* Optimistic: remove from current tab, adjust counts */
    setLeads(prev => prev.filter(l => l.id !== lead.id));
    setTotal(prev => Math.max(0, prev - 1));
    setCounts(prev => ({
      ...prev,
      [tab]:     Math.max(0, (prev[tab]     || 0) - 1),
      [newStage]: (prev[newStage] || 0) + 1,
    }));
    api.put("/leads/" + lead._id, { status: newStage }).catch(() => {});
    if (onLeadUpdated) onLeadUpdated({ ...lead._raw, status: newStage });
  }

  return (
    <>
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Inbox</div>
          <h1 className="page-title">Leads</h1>
          <div className="page-sub">
            {isSuperAdmin === false
              ? "Showing leads assigned to you."
              : "Facebook & WhatsApp enquiries route here automatically. Convert qualified leads into engagements."}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="secondary" icon="filter">Filter</Button>
          <Button icon="plus" onClick={() => setShowAddLead(true)}>Add lead manually</Button>
        </div>
      </div>

      {/* Search */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 6, padding: "7px 12px", marginBottom: 12, maxWidth: 400 }}>
        <Icon name="search" size={15} />
        <input
          placeholder="Search by name, phone, service…"
          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>

      {/* Source pills */}
      <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
        <div style={{ display: "flex", gap: 8, padding: "6px 10px", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 6, fontSize: 12, alignItems: "center" }}>
          <Icon name="message-circle" size={14} /><b>WhatsApp Business</b><span style={{ color: "var(--success-700)" }}>● Live</span>
        </div>
        <div style={{ display: "flex", gap: 8, padding: "6px 10px", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 6, fontSize: 12, alignItems: "center" }}>
          <Icon name="facebook" size={14} /><b>Facebook Lead Ads</b><span style={{ color: "var(--success-700)" }}>● Live</span>
        </div>
        <div style={{ display: "flex", gap: 8, padding: "6px 10px", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 6, fontSize: 12, alignItems: "center" }}>
          <Icon name="globe" size={14} /><b>Website form</b><span style={{ color: "var(--fg-3)" }}>● Synced 8m ago</span>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-subtle)", marginBottom: 12 }}>
        {STAGE_TABS.map(t => (
          <button key={t.id} onClick={() => handleTabChange(t.id)}
            style={{
              background: "transparent", border: 0, padding: "10px 14px", cursor: "pointer",
              color:      tab === t.id ? "var(--brand-burgundy)" : "var(--fg-2)",
              fontWeight: tab === t.id ? 600 : 500,
              fontSize: 13.5,
              borderBottom: tab === t.id ? "2px solid var(--brand-burgundy)" : "2px solid transparent",
              marginBottom: -1, fontFamily: "inherit",
            }}>
            {t.label}{" "}
            <span style={{ color: "var(--fg-3)", marginLeft: 4 }}>{counts[t.id] || 0}</span>
          </button>
        ))}
      </div>

      <div className="card" style={{ padding: 0 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 30 }}><input type="checkbox" /></th>
              <th>Lead</th>
              <th>Service</th>
              <th>Source</th>
              <th>Assigned</th>
              <th>Received</th>
              <th style={{ textAlign: "right" }}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan="7" style={{ textAlign: "center", padding: "48px 0", color: "var(--fg-3)" }}>Loading…</td></tr>
            ) : leads.length === 0 ? (
              <tr><td colSpan="7" style={{ textAlign: "center", padding: "48px 0", color: "var(--fg-3)" }}>
                {search ? "No leads match your search." : "No leads in this stage."}
              </td></tr>
            ) : leads.map(l => (
              <tr key={l.id} onClick={() => onOpenLead && onOpenLead(l)}>
                <td><input type="checkbox" onClick={e => e.stopPropagation()} /></td>
                <td>
                  <div className="av-row">
                    <Avatar name={l.name} />
                    <div>
                      <div className="nm">{l.name}</div>
                      <div className="sub" style={{ fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{l.phone}</div>
                    </div>
                  </div>
                </td>
                <td>{l.svc || <span style={{ color: "var(--fg-4)" }}>—</span>}</td>
                <td>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5 }}>
                    <Icon name={l.src === "WhatsApp" ? "message-circle" : l.src === "Facebook" ? "facebook" : "user"} size={14} />
                    {l.src}
                  </span>
                </td>
                <td>{l.agent ? <Chip kind="brand" dot={false}>{l.agent}</Chip> : <span style={{ color: "var(--fg-4)" }}>—</span>}</td>
                <td className="cell-muted">{l.when}</td>
                <td style={{ textAlign: "right" }}>
                  <div style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
                    <select
                      value={l.stage}
                      onClick={e => e.stopPropagation()}
                      onChange={e => { e.stopPropagation(); handleStageChange(l, e.target.value); }}
                      style={{
                        fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 500,
                        padding: "4px 8px", borderRadius: 6, cursor: "pointer",
                        border: "1px solid var(--border-strong)", background: "#fff",
                        color: "var(--fg-1)", outline: "none",
                      }}>
                      <option value="new">New</option>
                      <option value="contacted">Contacted</option>
                      <option value="qualified">Qualified</option>
                      <option value="converted">Converted</option>
                      <option value="lost">Lost</option>
                    </select>
                    <button className="btn btn-ghost btn-sm" onClick={e => { e.stopPropagation(); onOpenLead && onOpenLead(l); }}>Open</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

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

    {showAddLead && (
      <AddLeadModal
        onClose={() => setShowAddLead(false)}
        onAdd={handleAddLead}
      />
    )}
    </>
  );
}

Object.assign(window, { LeadsPage });