// ============================================================================
// IMS — Admin: People management (Specialists, Managers, Influencers)
// ============================================================================

function PeoplePage({ variant }) {
  const { data, notify, setPage, addInfluencer } = useApp();

  if (variant === "os") return <SpecialistsPage data={data} notify={notify} />;
  if (variant === "cm") return <ManagersPage data={data} notify={notify} />;
  if (variant === "influencers") return <InfluencersPage data={data} notify={notify} setPage={setPage} addInfluencer={addInfluencer} />;
  if (variant === "ve") return <VideoEditorsPage data={data} notify={notify} />;
  return null;
}

// ============================================================================
// Outreach Specialists
// ============================================================================

function SpecialistsPage({ data, notify }) {
  const { updatePerson, addPerson, removePerson, restorePerson } = useApp();
  const allSpecialists = data.outreachSpecialists;
  const [showArchived, setShowArchived] = useState(false);
  const [list, setList] = useState(allSpecialists.filter(s => !s.deletedAt));
  const [openNew, setOpenNew] = useState(false);
  const [edit, setEdit] = useState(null);
  const [search, setSearch] = useState("");
  const [sortKey, setSortKey] = useState(null);
  const [sortDir, setSortDir] = useState(1);
  const [pg, setPg] = useState(1);
  const perPage = 8;

  const { archivedCount, totalActive, avgRate } = useMemo(() => {
    let archived = 0, active = 0, rate = 0;
    allSpecialists.forEach(s => {
      if (s.deletedAt) archived++;
      else { active += s.active || 0; rate += s.perContact || 0; }
    });
    return { archivedCount: archived, totalActive: active, avgRate: list.length > 0 ? (rate / list.length).toFixed(2) : "0.00" };
  }, [allSpecialists, list.length]);

  const displayList = showArchived ? allSpecialists : list;

  const toggleSort = (key) => {
    if (sortKey === key) setSortDir(d => -d);
    else { setSortKey(key); setSortDir(1); }
    setPg(1);
  };

  const sorted = useMemo(() => {
    const q = search.trim().toLowerCase();
    const searched = q
      ? displayList.filter(s => s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q) || s.country.toLowerCase().includes(q))
      : displayList;
    if (!sortKey) return searched;
    return [...searched].sort((a, b) => {
      const av = a[sortKey]; const bv = b[sortKey];
      return typeof av === "number" ? (av - bv) * sortDir : String(av).localeCompare(String(bv)) * sortDir;
    });
  }, [displayList, search, sortKey, sortDir]);

  const totalPages = Math.max(1, Math.ceil(sorted.length / perPage));
  const paged = sorted.slice((pg - 1) * perPage, pg * perPage);

  const SortTh = ({ label, col, className }) => {
    const active = sortKey === col;
    return (
      <th className={`${className || ""} sortable ${active ? "sorted" : ""}`} onClick={() => toggleSort(col)}>
        {label} <span className="arrow">{active ? (sortDir === 1 ? "↑" : "↓") : "↕"}</span>
      </th>
    );
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Outreach Specialists</h1>
          <div className="subtitle">Manage per-contact rates, bonuses, and access for outreach specialists.</div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <div className="meta"><span>{list.length} active · {totalActive} open leads{archivedCount > 0 ? ` · ${archivedCount} archived` : ""}</span></div>
          {!showArchived && <button className="btn primary" onClick={() => setOpenNew(true)}><Ic.plus /> Add Specialist</button>}
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi"><div className="label">Active Specialists</div><div className="value">{list.length}</div><div className="delta">across {new Set(list.map(s => s.country)).size} {new Set(list.map(s => s.country)).size === 1 ? "country" : "countries"}</div></div>
        <div className="kpi"><div className="label">Open Assignments</div><div className="value">{totalActive}</div><div className="delta">in progress · all specialists</div></div>
        <div className="kpi"><div className="label">Avg · Per Contact</div><div className="value">${avgRate}</div><div className="delta">standard rate</div></div>
        <div className="kpi featured"><div className="label">This Week Payable</div><div className="value">${(totalActive * 0.3).toFixed(2)}</div><div className="delta">next snapshot Fri 14:00 UK</div></div>
      </div>

      <div className="toolbar">
        <span className="text-mono text-xs text-mute">{sorted.length} of {displayList.length} {showArchived ? "specialists (incl. archived)" : "specialists"}</span>
        <div className="spacer" />
        {archivedCount > 0 && (
          <button className="btn sm" onClick={() => { setShowArchived(s => !s); setPg(1); setSearch(""); }}>
            {showArchived ? "Hide Archived" : `Show Archived (${archivedCount})`}
          </button>
        )}
        <div className="search">
          <Ic.search />
          <input placeholder="Search name, ID, country…" value={search} onChange={e => { setSearch(e.target.value); setPg(1); }} />
          {search && <button className="search-clear" onClick={() => { setSearch(""); setPg(1); }}><Ic.x /></button>}
        </div>
      </div>

      {showArchived && (
        <div className="banner" style={{ marginBottom: 0 }}>
          <Ic.info />
          <div>Showing archived specialists. Click <strong>Restore</strong> to reactivate them.</div>
        </div>
      )}

      <div className="table-wrap">
        <table className="ims">
          <thead>
            <tr>
              <SortTh label="Specialist" col="name" />
              <th>ID</th>
              <SortTh label="Country" col="country" />
              <SortTh label="Per Contact" col="perContact" className="num" />
              <SortTh label="Interested Bonus" col="bonus" className="num" />
              <SortTh label="Active" col="active" className="num" />
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {paged.length === 0 && (
              <tr><td colSpan={99} style={{ textAlign: "center", padding: "48px 0", color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em" }}>NO RESULTS</td></tr>
            )}
            {paged.map(s => (
              <tr key={s.id} className={`clickable${s.deletedAt ? " opacity-50" : ""}`} style={s.deletedAt ? { opacity: 0.5 } : {}} onClick={() => !s.deletedAt && setEdit(s)}>
                <td>
                  <div className="inf-cell">
                    <div className="avatar">{s.initials}</div>
                    <div className="name-block">
                      <div className="name">{s.name}</div>
                      <div className="meta">{s.email || s.name.toLowerCase().replace(" ", ".") + "@company.com"}</div>
                    </div>
                  </div>
                </td>
                <td className="mono"><span className="pill">{s.id}</span></td>
                <td>{s.country}</td>
                <td className="num">${s.perContact.toFixed(2)}</td>
                <td className="num">${s.bonus.toFixed(2)}</td>
                <td className="num">{s.active}</td>
                <td>{s.deletedAt ? <Chip tone="neutral" xs>Archived</Chip> : <Chip tone="ok" xs>Active</Chip>}</td>
                <td style={{ textAlign: "right" }}>
                  {s.deletedAt
                    ? <button className="btn sm ghost" onClick={(e) => { e.stopPropagation(); restorePerson("os", s.id); setList(prev => prev.map(x => x.id === s.id ? { ...x, deletedAt: null } : x)); notify(`${s.name} restored.`, "success"); }}>Restore</button>
                    : <button className="btn sm ghost">Edit <Ic.arrowRight /></button>
                  }
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <TablePagination page={pg} totalPages={totalPages} onPage={setPg} total={sorted.length} perPage={perPage} />

      {(openNew || edit) && (
        <SpecialistModal
          editing={edit}
          data={data}
          onClose={() => { setOpenNew(false); setEdit(null); }}
          onRemove={(id, reason) => {
            removePerson("os", id, reason);
            setList(list.filter(x => x.id !== id));
            notify(`${edit.name} removed — affected influencers returned to Unassigned.`, "success");
          }}
          onSave={(payload, isEdit) => {
            if (isEdit) {
              setList(list.map(x => x.id === payload.id ? payload : x));
              updatePerson?.("os", payload.id, payload);
              notify(`${payload.name} updated.`);
            } else {
              const id = `OS-${String(list.length + 1).padStart(2, "0")}`;
              const newPerson = { ...payload, id, active: 0 };
              setList([...list, newPerson]);
              addPerson?.("os", newPerson);
              notify(`${payload.name} added — login invite sent to ${payload.email || "their email"}.`, "success");
            }
            setOpenNew(false); setEdit(null);
          }}
        />
      )}
    </div>
  );
}

function RemovePersonModal({ person, personType, onClose, onRemove, data }) {
  const [reason, setReason] = useState("");
  const isOS = personType === "os";
  const affected = isOS
    ? (data.outreachInProgress || []).filter(r => r.specialistId === person.id)
    : (data.collabInProgress || []).filter(r => r.cmId === person.id);
  const unpaid = isOS
    ? (data.osPaymentCycles || []).some(c => c.unpaid > 0)
    : (data.cmPaymentCycles || []).some(c => c.unpaid > 0);

  if (unpaid) {
    return (
      <Modal open={true} onClose={onClose} title={`Remove ${person.name}`} sub="Cannot remove"
        foot={<><button className="btn" onClick={onClose}>Close</button></>}>
        <div className="banner bad">
          <Ic.warn />
          <div><strong>Unpaid earnings exist.</strong> Settle all payments for {person.name} before removing them from the system.</div>
        </div>
      </Modal>
    );
  }

  return (
    <Modal open={true} onClose={onClose}
      title={`Remove ${person.name}`}
      sub={`${person.id} · soft delete`}
      foot={<>
        <span className="text-xs text-mute">This action is logged. Record is preserved for audit.</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn danger" disabled={!reason.trim()} onClick={() => onRemove(reason)}>
            Confirm Remove
          </button>
        </div>
      </>}>
      {affected.length > 0 && (
        <div className="banner" style={{ marginBottom: 14 }}>
          <Ic.warn />
          <div>
            <strong>{affected.length} influencer{affected.length > 1 ? "s" : ""} currently in progress</strong> will be returned to {isOS ? "Unassigned Outreach" : "Unassigned Potential Leads"} and Admin will be notified.
          </div>
        </div>
      )}
      <div className="field">
        <label>Reason for removal <span style={{ color: "var(--bad)" }}>*</span></label>
        <div style={{ position: "relative" }}>
          <textarea className="textarea" value={reason} onChange={e => setReason(e.target.value)}
            placeholder="e.g. Left the team, Performance issue, Contract ended…" rows={3} />
        </div>
      </div>
    </Modal>
  );
}

function SpecialistModal({ editing, onClose, onSave, onRemove, data }) {
  const [name, setName] = useState(editing?.name || "");
  const [initials, setInitials] = useState(editing?.initials || "");
  const [email, setEmail] = useState(editing?.email || "");
  const [country, setCountry] = useState(editing?.country || "IN");
  const [rate, setRate] = useState(editing?.perContact || 0.3);
  const [bonus, setBonus] = useState(editing?.bonus || 2);
  const [showRemove, setShowRemove] = useState(false);

  if (showRemove) return (
    <RemovePersonModal person={editing} personType="os" onClose={() => setShowRemove(false)} data={data}
      onRemove={(reason) => { onRemove(editing.id, reason); onClose(); }} />
  );

  return (
    <Modal open={true} onClose={onClose}
      title={editing ? `Edit ${editing.name}` : "Add Outreach Specialist"}
      sub={editing ? `ID · ${editing.id}` : "New team member"}
      foot={<>
        {editing && <button className="btn danger sm" style={{ marginRight: "auto" }} onClick={() => setShowRemove(true)}>Remove</button>}
        <span className="text-xs text-mute">{editing ? "" : "Login invite sent on create."}</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn primary" disabled={!name.trim()}
            onClick={() => onSave({ ...(editing || {}), name, initials: initials || name.split(" ").map(n => n[0]).join(""), email, country, perContact: +rate, bonus: +bonus, minPayoutThreshold: editing?.minPayoutThreshold ?? 50 }, !!editing)}>
            {editing ? "Save Changes" : "Create Specialist"}
          </button>
        </div>
      </>}>
      <div className="grid-2">
        <div className="field">
          <label>Full Name</label>
          <input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus placeholder="e.g. Sara Ahmed" />
        </div>
        <div className="field">
          <label>Initials</label>
          <input className="input" value={initials} onChange={e => setInitials(e.target.value)} maxLength={3} placeholder="SA" />
        </div>
      </div>
      <div className="field">
        <label>Email Address</label>
        <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="e.g. sara@company.com" disabled={!!editing} style={editing ? { opacity: 0.5, cursor: "not-allowed" } : {}} />
        {editing && <div className="text-xs text-mute" style={{ marginTop: 4 }}>Email cannot be changed after creation.</div>}
      </div>
      <div className="field">
        <label>Country</label>
        <select className="select" value={country} onChange={e => setCountry(e.target.value)}>
          <option>IN</option><option>PH</option><option>NG</option><option>EG</option><option>AR</option><option>PK</option>
        </select>
      </div>
      <div className="grid-2">
        <div className="field">
          <label>Per-Contact Rate (USD)</label>
          <input className="input" type="number" step="0.05" value={rate} onChange={e => setRate(e.target.value)} />
        </div>
        <div className="field">
          <label>Interested Bonus (USD)</label>
          <input className="input" type="number" step="0.5" value={bonus} onChange={e => setBonus(e.target.value)} />
        </div>
      </div>
      {editing && (
        <div className="banner info">
          <Ic.info />
          <div><strong>{editing.active} open assignments.</strong> Rate changes apply to new assignments only; existing in-progress work uses the rate locked at assignment time.</div>
        </div>
      )}
    </Modal>
  );
}

// ============================================================================
// Collaboration Managers
// ============================================================================

function ManagersPage({ data, notify }) {
  const { updatePerson, addPerson, removePerson, restorePerson } = useApp();
  const allManagers = data.collabManagers;
  const [showArchived, setShowArchived] = useState(false);
  const [list, setList] = useState(allManagers.filter(m => !m.deletedAt));
  const [openNew, setOpenNew] = useState(false);
  const [edit, setEdit] = useState(null);
  const [search, setSearch] = useState("");
  const [sortKey, setSortKey] = useState(null);
  const [sortDir, setSortDir] = useState(1);
  const [pg, setPg] = useState(1);
  const perPage = 8;

  const { archivedCount, totalActive, avgCommission, weekPayable } = useMemo(() => {
    let archived = 0, active = 0, commission = 0, payable = 0;
    allManagers.forEach(m => {
      if (m.deletedAt) archived++;
      else {
        active += m.active || 0;
        commission += parseFloat(m.commission) || 0;
        payable += (m.active || 0) * 15;
      }
    });
    return {
      archivedCount: archived,
      totalActive: active,
      avgCommission: list.length > 0 ? (commission / list.length).toFixed(1) : "0.0",
      weekPayable: payable,
    };
  }, [allManagers, list.length]);

  const displayList = showArchived ? allManagers : list;

  const toggleSort = (key) => {
    if (sortKey === key) setSortDir(d => -d);
    else { setSortKey(key); setSortDir(1); }
    setPg(1);
  };

  const sorted = useMemo(() => {
    const q = search.trim().toLowerCase();
    const searched = q
      ? displayList.filter(m => m.name.toLowerCase().includes(q) || m.id.toLowerCase().includes(q) || m.country.toLowerCase().includes(q))
      : displayList;
    if (!sortKey) return searched;
    return [...searched].sort((a, b) => {
      const av = a[sortKey]; const bv = b[sortKey];
      return typeof av === "number" ? (av - bv) * sortDir : String(av).localeCompare(String(bv)) * sortDir;
    });
  }, [displayList, search, sortKey, sortDir]);

  const totalPages = Math.max(1, Math.ceil(sorted.length / perPage));
  const paged = sorted.slice((pg - 1) * perPage, pg * perPage);

  const SortTh = ({ label, col, className }) => {
    const active = sortKey === col;
    return (
      <th className={`${className || ""} sortable ${active ? "sorted" : ""}`} onClick={() => toggleSort(col)}>
        {label} <span className="arrow">{active ? (sortDir === 1 ? "↑" : "↓") : "↕"}</span>
      </th>
    );
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Collaboration Managers</h1>
          <div className="subtitle">Manage stage payouts and commission structures for collaboration managers.</div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <div className="meta"><span>{list.length} active · {totalActive} open deals{archivedCount > 0 ? ` · ${archivedCount} archived` : ""}</span></div>
          {!showArchived && <button className="btn primary" onClick={() => setOpenNew(true)}><Ic.plus /> Add Manager</button>}
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi"><div className="label">Active Managers</div><div className="value">{list.length}</div><div className="delta">across {new Set(list.map(m => m.country)).size} {new Set(list.map(m => m.country)).size === 1 ? "country" : "countries"}</div></div>
        <div className="kpi"><div className="label">Open Deals</div><div className="value">{totalActive}</div><div className="delta">in progress · all managers</div></div>
        <div className="kpi"><div className="label">Avg Commission</div><div className="value">{avgCommission}%</div><div className="delta">3-6 month durations</div></div>
        <div className="kpi featured"><div className="label">This Week Payable</div><div className="value">${weekPayable}</div><div className="delta">stage completions · Fri 14:00 UK</div></div>
      </div>

      <div className="toolbar">
        <span className="text-mono text-xs text-mute">{sorted.length} of {displayList.length} {showArchived ? "managers (incl. archived)" : "managers"}</span>
        <div className="spacer" />
        {archivedCount > 0 && (
          <button className="btn sm" onClick={() => { setShowArchived(s => !s); setPg(1); setSearch(""); }}>
            {showArchived ? "Hide Archived" : `Show Archived (${archivedCount})`}
          </button>
        )}
        <div className="search">
          <Ic.search />
          <input placeholder="Search name, ID, country…" value={search} onChange={e => { setSearch(e.target.value); setPg(1); }} />
          {search && <button className="search-clear" onClick={() => { setSearch(""); setPg(1); }}><Ic.x /></button>}
        </div>
      </div>

      {showArchived && (
        <div className="banner" style={{ marginBottom: 0 }}>
          <Ic.info />
          <div>Showing archived managers. Click <strong>Restore</strong> to reactivate them.</div>
        </div>
      )}

      <div className="table-wrap">
        <table className="ims">
          <thead>
            <tr>
              <SortTh label="Manager" col="name" />
              <th>ID</th>
              <SortTh label="Country" col="country" />
              <th className="num">Stage 1</th>
              <th className="num">Stage 2</th>
              <th className="num">Stage 3</th>
              <th className="num">Stage 4</th>
              <th>Commission</th>
              <SortTh label="Active" col="active" className="num" />
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {paged.length === 0 && (
              <tr><td colSpan={99} style={{ textAlign: "center", padding: "48px 0", color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em" }}>NO RESULTS</td></tr>
            )}
            {paged.map(m => (
              <tr key={m.id} className={`clickable`} style={m.deletedAt ? { opacity: 0.5 } : {}} onClick={() => !m.deletedAt && setEdit(m)}>
                <td>
                  <div className="inf-cell">
                    <div className="avatar">{m.initials}</div>
                    <div className="name-block">
                      <div className="name">{m.name}</div>
                      <div className="meta">{m.email || m.name.toLowerCase().replace(" ", ".") + "@company.com"}</div>
                    </div>
                  </div>
                </td>
                <td className="mono"><span className="pill">{m.id}</span></td>
                <td>{m.country}</td>
                <td className="num">${m.stages[1]}</td>
                <td className="num">${m.stages[2]}</td>
                <td className="num">${m.stages[3]}</td>
                <td className="num">${m.stages[4]}</td>
                <td>{m.commission ? <Chip tone="accent-soft">{m.commission} · {m.commissionDuration}</Chip> : <span className="text-mute text-xs">—</span>}</td>
                <td className="num">{m.active}</td>
                <td>{m.deletedAt ? <Chip tone="neutral" xs>Archived</Chip> : <Chip tone="ok" xs>Active</Chip>}</td>
                <td style={{ textAlign: "right" }}>
                  {m.deletedAt
                    ? <button className="btn sm ghost" onClick={(e) => { e.stopPropagation(); restorePerson("cm", m.id); setList(prev => prev.map(x => x.id === m.id ? { ...x, deletedAt: null } : x)); notify(`${m.name} restored.`, "success"); }}>Restore</button>
                    : <button className="btn sm ghost">Edit <Ic.arrowRight /></button>
                  }
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <TablePagination page={pg} totalPages={totalPages} onPage={setPg} total={sorted.length} perPage={perPage} />

      {(openNew || edit) && (
        <ManagerModal
          editing={edit}
          data={data}
          onClose={() => { setOpenNew(false); setEdit(null); }}
          onRemove={(id, reason) => {
            removePerson("cm", id, reason);
            setList(list.filter(x => x.id !== id));
            notify(`${edit.name} removed — affected influencers returned to Unassigned Leads.`, "success");
          }}
          onSave={(payload, isEdit) => {
            if (isEdit) {
              setList(list.map(x => x.id === payload.id ? payload : x));
              updatePerson?.("cm", payload.id, payload);
              notify(`${payload.name} updated.`);
            } else {
              const id = `CM-${String(list.length + 1).padStart(2, "0")}`;
              const newPerson = { ...payload, id, active: 0 };
              setList([...list, newPerson]);
              addPerson?.("cm", newPerson);
              notify(`${payload.name} added — login invite sent to ${payload.email || "their email"}.`, "success");
            }
            setOpenNew(false); setEdit(null);
          }}
        />
      )}
    </div>
  );
}

function ManagerModal({ editing, onClose, onSave, onRemove, data }) {
  const [name, setName] = useState(editing?.name || "");
  const [initials, setInitials] = useState(editing?.initials || "");
  const [email, setEmail] = useState(editing?.email || "");
  const [country, setCountry] = useState(editing?.country || "PH");
  const [s1, setS1] = useState(editing?.stages?.[1] || 15);
  const [s2, setS2] = useState(editing?.stages?.[2] || 30);
  const [s3, setS3] = useState(editing?.stages?.[3] || 50);
  const [s4, setS4] = useState(editing?.stages?.[4] || 75);
  const [commission, setCommission] = useState(editing?.commission || "");
  const [duration, setDuration] = useState(editing?.commissionDuration || "");
  const [showRemove, setShowRemove] = useState(false);

  if (showRemove) return (
    <RemovePersonModal person={editing} personType="cm" onClose={() => setShowRemove(false)} data={data}
      onRemove={(reason) => { onRemove(editing.id, reason); onClose(); }} />
  );

  return (
    <Modal open={true} onClose={onClose} size="wide"
      title={editing ? `Edit ${editing.name}` : "Add Collaboration Manager"}
      sub={editing ? `ID · ${editing.id}` : "New team member"}
      foot={<>
        {editing && <button className="btn danger sm" style={{ marginRight: "auto" }} onClick={() => setShowRemove(true)}>Remove</button>}
        <span className="text-xs text-mute">{editing ? "Stage and commission terms lock at assignment time." : "Login invite sent on create."}</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn primary" disabled={!name.trim()}
            onClick={() => onSave({
              ...(editing || {}), name,
              initials: initials || name.split(" ").map(n => n[0]).join(""),
              email, country,
              stages: { 1: +s1, 2: +s2, 3: +s3, 4: +s4 },
              commission, commissionDuration: duration,
              minPayoutThreshold: editing?.minPayoutThreshold ?? 50
            }, !!editing)}>
            {editing ? "Save Changes" : "Create Manager"}
          </button>
        </div>
      </>}>
      <div className="grid-2">
        <div className="field">
          <label>Full Name</label>
          <input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus placeholder="e.g. Arjun Patel" />
        </div>
        <div className="field">
          <label>Initials</label>
          <input className="input" value={initials} onChange={e => setInitials(e.target.value)} maxLength={3} placeholder="AP" />
        </div>
      </div>
      <div className="field">
        <label>Email Address</label>
        <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="e.g. arjun@company.com" disabled={!!editing} style={editing ? { opacity: 0.5, cursor: "not-allowed" } : {}} />
        {editing && <div className="text-xs text-mute" style={{ marginTop: 4 }}>Email cannot be changed after creation.</div>}
      </div>
      <div className="field">
        <label>Country</label>
        <select className="select" value={country} onChange={e => setCountry(e.target.value)}>
          <option>PH</option><option>IN</option><option>KR</option><option>SG</option><option>US</option><option>UK</option>
        </select>
      </div>

      <div className="field">
        <label>Stage Payouts (USD)</label>
        <div className="grid-2" style={{ gap: 10 }}>
          <div>
            <div className="text-xs text-mute" style={{ marginBottom: 4, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Stage 1 · Signed Contract</div>
            <input className="input" type="number" value={s1} onChange={e => setS1(e.target.value)} />
          </div>
          <div>
            <div className="text-xs text-mute" style={{ marginBottom: 4, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Stage 2 · Draft Approved</div>
            <input className="input" type="number" value={s2} onChange={e => setS2(e.target.value)} />
          </div>
          <div>
            <div className="text-xs text-mute" style={{ marginBottom: 4, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Stage 3 · Content Live</div>
            <input className="input" type="number" value={s3} onChange={e => setS3(e.target.value)} />
          </div>
          <div>
            <div className="text-xs text-mute" style={{ marginBottom: 4, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Stage 4 · Performance</div>
            <input className="input" type="number" value={s4} onChange={e => setS4(e.target.value)} />
          </div>
        </div>
      </div>

      <div className="grid-2">
        <div className="field">
          <label>Commission Rate <span className="text-xs text-mute">(optional)</span></label>
          <select className="select" value={commission} onChange={e => setCommission(e.target.value)}>
            <option value="">None</option>
            <option>8%</option><option>10%</option><option>12%</option><option>15%</option>
          </select>
        </div>
        <div className="field">
          <label>Commission Duration <span className="text-xs text-mute">(optional)</span></label>
          <select className="select" value={duration} onChange={e => setDuration(e.target.value)}>
            <option value="">None</option>
            <option>3 months</option><option>6 months</option><option>12 months</option>
          </select>
        </div>
      </div>
      {editing && (
        <div className="banner info">
          <Ic.info />
          <div><strong>{editing.active || 0} open assignments.</strong> Rate changes apply to new assignments only; existing in-progress work uses the rate locked at assignment time.</div>
        </div>
      )}
    </Modal>
  );
}

// ============================================================================
// Influencers database (master list)
// ============================================================================

function InfluencersPage({ data, notify, setPage, addInfluencer }) {
  const { restoreInfluencer } = useApp();
  const [showArchived, setShowArchived] = useState(false);

  const pool = useMemo(() => {
    const all = new Map();
    const add = (src, tag) => src.forEach(i => all.set(i.id, { ...(all.get(i.id) || i), _tag: tag }));
    add(data.unassignedOutreach, "Unassigned");
    add(data.unassignedLeads, "Lead");
    add((data.outreachInProgress || []).filter(r => !r.deletedAt && r.status !== "Dropped"), "Outreach");
    add((data.collabInProgress || []).filter(r => !r.deletedAt && r.stageState !== "Dropped"), "Collab");
    return [...all.values()];
  }, [data]);

  const archivedPool = useMemo(() => {
    const all = new Map();
    const addArchived = (src) => src.filter(r => r.deletedAt).forEach(r => all.set(r.id, { ...r, _tag: "Archived" }));
    addArchived(data.outreachInProgress || []);
    addArchived(data.collabInProgress || []);
    return [...all.values()];
  }, [data]);

  const archivedCount = archivedPool.length;
  const displayPool = showArchived ? archivedPool : pool;

  const poolKpis = useMemo(() => {
    let inPipeline = 0, leads = 0;
    pool.forEach(i => {
      if (i._tag === "Outreach" || i._tag === "Collab") inPipeline++;
      if (i._tag === "Lead") leads++;
    });
    return { inPipeline, leads };
  }, [pool]);

  const [list, setList] = useState(pool);
  const [q, setQ] = useState("");
  const [openNew, setOpenNew] = useState(false);
  const [openBulk, setOpenBulk] = useState(false);
  const [pg, setPg] = useState(1);
  const perPage = 8;

  const columns = useMemo(() => [
    { key: "platform", label: "Platform",  accessor: r => r.platform },
    { key: "category", label: "Category",  accessor: r => r.category },
    { key: "location", label: "Location",  accessor: r => r.location },
    { key: "status",   label: "Status",    accessor: r => r._tag === "Unassigned" ? "Unassigned" : r._tag === "Lead" ? "Potential Lead" : r._tag === "Outreach" ? "In Outreach" : r._tag === "Archived" ? "Archived" : "In Collab" },
  ], []);

  const { filtered: colFiltered, filters, set, clear, openFor, setOpenFor, distinctFor } = useColumnFilter(displayPool, columns);

  const filtered = useMemo(() => {
    if (!q.trim()) return colFiltered;
    const ql = q.toLowerCase();
    return colFiltered.filter(i =>
      i.name.toLowerCase().includes(ql) ||
      i.handle.toLowerCase().includes(ql) ||
      (i.platform || "").toLowerCase().includes(ql) ||
      (i.category || "").toLowerCase().includes(ql) ||
      (i.location || "").toLowerCase().includes(ql)
    );
  }, [colFiltered, q]);

  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
  const pagedFiltered = filtered.slice((pg - 1) * perPage, pg * perPage);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Influencer Database</h1>
          <div className="subtitle">Master list of every influencer in the system. Add manually or sync from the daily Google Sheets snapshot.</div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <div className="meta"><span>{pool.length} total · synced 4m ago{archivedCount > 0 ? ` · ${archivedCount} archived` : ""}</span></div>
          {!showArchived && <><button className="btn" onClick={() => setOpenBulk(true)}><Ic.copy /> Bulk Sync</button>
          <button className="btn primary" onClick={() => setOpenNew(true)}><Ic.plus /> Add Influencer</button></>}
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi"><div className="label">Total Influencers</div><div className="value">{pool.length}</div><div className="delta">lifetime database</div></div>
        <div className="kpi"><div className="label">In Pipeline</div><div className="value">{poolKpis.inPipeline}</div><div className="delta">active conversations</div></div>
        <div className="kpi"><div className="label">Potential Leads</div><div className="value">{poolKpis.leads}</div><div className="delta">awaiting CM assignment</div></div>
        <div className="kpi featured"><div className="label">New This Week</div><div className="value">+{Math.min(24, pool.length)}</div><div className="delta">from last Google Sheet sync</div></div>
      </div>

      <div className="toolbar">
        <span className="chip mono">{filtered.length} match{filtered.length === 1 ? "" : "es"}</span>
        <div className="spacer" />
        <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none", fontSize: 13, color: "var(--ink-2)" }}>
          <div
            onClick={() => { setShowArchived(s => !s); setQ(""); clear("platform"); clear("category"); clear("location"); clear("status"); setPg(1); }}
            style={{ position: "relative", width: 36, height: 20, borderRadius: 10, background: showArchived ? "var(--accent)" : "var(--line)", transition: "background 0.2s", cursor: "pointer", flexShrink: 0 }}>
            <div style={{ position: "absolute", top: 3, left: showArchived ? 19 : 3, width: 14, height: 14, borderRadius: "50%", background: "#fff", transition: "left 0.2s", boxShadow: "0 1px 3px rgba(0,0,0,0.2)" }} />
          </div>
          Show Archived{archivedCount > 0 ? ` (${archivedCount})` : ""}
        </label>
        <div className="search">
          <Ic.search />
          <input placeholder="Search name, handle, platform, category…" value={q} onChange={e => { setQ(e.target.value); setPg(1); }} />
          {q && <button className="search-clear" onClick={() => { setQ(""); setPg(1); }}><Ic.x /></button>}
        </div>
      </div>

      <ActiveFilterChips filters={filters} columns={columns} onClear={clear} />

      <div className="table-wrap">
        <table className="ims">
          <thead>
            <tr>
              <th>Influencer</th>
              <FilterHeader col={columns[0]} filters={filters} openFor={openFor} setOpenFor={setOpenFor} distincts={distinctFor("platform")} onPick={v => { set("platform", v); setPg(1); }} onClear={() => { clear("platform"); setPg(1); }} />
              <FilterHeader col={columns[1]} filters={filters} openFor={openFor} setOpenFor={setOpenFor} distincts={distinctFor("category")} onPick={v => { set("category", v); setPg(1); }} onClear={() => { clear("category"); setPg(1); }} />
              <FilterHeader col={columns[2]} filters={filters} openFor={openFor} setOpenFor={setOpenFor} distincts={distinctFor("location")}  onPick={v => { set("location", v); setPg(1); }}  onClear={() => { clear("location"); setPg(1); }} />
              <th className="num">Followers</th>
              <th className="num">ER</th>
              <FilterHeader col={columns[3]} filters={filters} openFor={openFor} setOpenFor={setOpenFor} distincts={distinctFor("status")}   onPick={v => { set("status", v); setPg(1); }}   onClear={() => { clear("status"); setPg(1); }} />
              <th></th>
            </tr>
          </thead>
          <tbody>
            {pagedFiltered.length === 0 && (
              <tr><td colSpan={99} style={{ textAlign: "center", padding: "48px 0", color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em" }}>
                {displayPool.length === 0 ? "NO INFLUENCERS YET — ADD ONE MANUALLY OR USE BULK SYNC" : "NO RESULTS — clear filters to see all influencers"}
              </td></tr>
            )}
            {pagedFiltered.map(i => (
              <tr key={i.id} className="clickable" style={i._tag === "Archived" ? { opacity: 0.5 } : {}} onClick={() => i._tag !== "Archived" && setPage({ key: "profile", influencer: i, from: "people-influencers" })}>
                <td><InfCell name={i.name} handle={i.handle} /></td>
                <td>{i.platform}</td>
                <td>{i.category}</td>
                <td className="mono text-small">{i.location}</td>
                <td className="num">{i.followers}</td>
                <td className="num">{i.er}</td>
                <td>
                  {i._tag === "Unassigned" && <Chip tone="neutral" xs>Unassigned</Chip>}
                  {i._tag === "Lead" && <Chip tone="accent-soft" xs>Potential Lead</Chip>}
                  {i._tag === "Outreach" && <Chip tone="info" xs>In Outreach</Chip>}
                  {i._tag === "Collab" && <Chip tone="ok" xs>In Collab</Chip>}
                  {i._tag === "Archived" && <Chip tone="neutral" xs>Archived</Chip>}
                </td>
                <td style={{ textAlign: "right" }}>
                  {i._tag === "Archived"
                    ? <button className="btn sm ghost" onClick={(e) => { e.stopPropagation(); restoreInfluencer(i.id); notify(`${i.name} restored.`, "success"); }}>Restore</button>
                    : <button className="btn sm ghost" onClick={(e) => e.stopPropagation()}>View <Ic.arrowRight /></button>
                  }
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <TablePagination page={pg} totalPages={totalPages} onPage={setPg} total={filtered.length} perPage={perPage} />

      {openNew && <InfluencerModal onClose={() => setOpenNew(false)} onSave={(i) => { addInfluencer(i); setList([{ ...i, _tag: "Unassigned" }, ...list]); setOpenNew(false); notify(`${i.name} added to database. Appears in Unassigned.`); }} />}
      {openBulk && <BulkSyncModal existing={list} onClose={() => setOpenBulk(false)} onDone={(newOnes) => {
        newOnes.forEach(inf => addInfluencer(inf));
        setList(prev => [...newOnes.map(i => ({ ...i, _tag: "Unassigned" })), ...prev]);
        setOpenBulk(false);
        notify(`${newOnes.length} new influencers synced → Unassigned Outreach.`);
      }} />}
    </div>
  );
}

function InfluencerModal({ onClose, onSave }) {
  const [name, setName] = useState("");
  const [handle, setHandle] = useState("");
  const [platform, setPlatform] = useState("Instagram");
  const [category, setCategory] = useState("Lifestyle");
  const [followers, setFollowers] = useState("");
  const [location, setLocation] = useState("");
  const [whatsapp, setWhatsapp] = useState("");

  return (
    <Modal open={true} onClose={onClose}
      title="Add Influencer"
      sub="New record in master database"
      foot={<>
        <span className="text-xs text-mute">Appears in Unassigned Outreach until assigned.</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn primary" disabled={!name.trim() || !handle.trim()}
            onClick={() => onSave({ id: `IMP-${Math.floor(Math.random()*9000)+1000}`, name, handle, platform, category, followers: followers || "100K", location: location || "—", er: "2.1%", phoneNumber: whatsapp.trim() || null })}>
            Create
          </button>
        </div>
      </>}>
      <div className="grid-2">
        <div className="field"><label>Name</label><input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus placeholder="e.g. Rafael Moreno" /></div>
        <div className="field"><label>Handle</label><input className="input" value={handle} onChange={e => setHandle(e.target.value)} placeholder="@rafa.m" /></div>
      </div>
      <div className="grid-2">
        <div className="field"><label>Platform</label><select className="select" value={platform} onChange={e => setPlatform(e.target.value)}><option>Instagram</option><option>TikTok</option><option>YouTube</option></select></div>
        <div className="field"><label>Category</label><select className="select" value={category} onChange={e => setCategory(e.target.value)}><option>Fitness</option><option>Lifestyle</option><option>Beauty</option><option>Tech</option><option>Food</option><option>Travel</option><option>Fashion</option><option>Finance</option></select></div>
      </div>
      <div className="grid-2">
        <div className="field"><label>Followers</label><input className="input" value={followers} onChange={e => setFollowers(e.target.value)} placeholder="500K" /></div>
        <div className="field"><label>Location</label><input className="input" value={location} onChange={e => setLocation(e.target.value)} placeholder="City, Country" /></div>
      </div>
      <div className="field"><label>WhatsApp <span className="text-xs text-mute">(optional)</span></label><input className="input" value={whatsapp} onChange={e => setWhatsapp(e.target.value)} placeholder="+44 7700 900000" style={{ fontFamily: "var(--font-mono)" }} /></div>
    </Modal>
  );
}

const SYNC_POOL = [
  { name: "Layla Al-Amin",      handle: "@layla.alamin",   platform: "Instagram", category: "Lifestyle",  location: "Dubai, AE",       followers: "420K",  er: "4.1%" },
  { name: "Noah Bergström",     handle: "@noahb.photo",    platform: "Instagram", category: "Travel",     location: "Stockholm, SE",   followers: "890K",  er: "3.6%" },
  { name: "Priya Kapoor",       handle: "@priya.kapoor",   platform: "TikTok",    category: "Beauty",     location: "Mumbai, IN",      followers: "2.3M",  er: "5.9%" },
  { name: "Omar Siddiqui",      handle: "@omarsid",        platform: "YouTube",   category: "Tech",       location: "Karachi, PK",     followers: "1.1M",  er: "2.4%" },
  { name: "Camille Fontaine",   handle: "@camille.f",      platform: "Instagram", category: "Fashion",    location: "Paris, FR",       followers: "670K",  er: "3.2%" },
  { name: "Kwabena Asante",     handle: "@kwabena.a",      platform: "TikTok",    category: "Fitness",    location: "Accra, GH",       followers: "310K",  er: "6.8%" },
  { name: "Hana Yoshida",       handle: "@hana.y",         platform: "Instagram", category: "Food",       location: "Osaka, JP",       followers: "540K",  er: "4.4%" },
  { name: "Lucas Ferreira",     handle: "@lucasferr",      platform: "YouTube",   category: "Comedy",     location: "São Paulo, BR",   followers: "1.8M",  er: "3.0%" },
  { name: "Fatima Zahra",       handle: "@fatima.zahra",   platform: "Instagram", category: "Lifestyle",  location: "Casablanca, MA",  followers: "280K",  er: "5.3%" },
  { name: "Ethan Park",         handle: "@ethanpark",      platform: "TikTok",    category: "Gaming",     location: "Seoul, KR",       followers: "3.4M",  er: "4.7%" },
  { name: "Amara Osei",         handle: "@amara.osei",     platform: "Instagram", category: "Beauty",     location: "Lagos, NG",       followers: "760K",  er: "3.9%" },
  { name: "Diego Romero",       handle: "@diegorom",       platform: "YouTube",   category: "Finance",    location: "Bogotá, CO",      followers: "920K",  er: "2.7%" },
];

function BulkSyncModal({ existing, onClose, onDone }) {
  const [syncing, setSyncing] = useState(false);
  const [preview, setPreview] = useState(null);
  const [pg, setPg]           = useState(1);
  const previewPerPage = 8;

  // On mount generate a preview of who will be synced (exclude duplicates by handle)
  React.useEffect(() => {
    const existingHandles = new Set((existing || []).map(e => e.handle));
    const fresh = SYNC_POOL.filter(p => !existingHandles.has(p.handle));
    // Pick 5–6 random ones
    const shuffled = [...fresh].sort(() => Math.random() - 0.5);
    const count = Math.min(fresh.length, Math.floor(Math.random() * 2) + 5); // 5 or 6
    setPreview(shuffled.slice(0, count));
  }, []);

  const handleSync = () => {
    if (!preview || preview.length === 0) return;
    setSyncing(true);
    setTimeout(() => {
      const now = new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
      const hookTemplates = [
        "Hey {name}! Loved your recent content — your audience engagement is incredible. We work with a brand that would be a perfect fit for your style. Would love to chat!",
        "Hi {name}, your {category} content stands out — authentic and high quality. We have an exciting collaboration opportunity I think you'd love. Interested to hear more?",
        "Hey {name}! We've been following your journey and think you'd be a great match for a campaign we're running. Quick DM — would you be open to hearing more?",
        "Hi {name}! Your content in the {category} space really resonates. We're connecting select creators with an exciting brand partnership — would you be interested?",
        "Hey {name}, huge fan of what you create! We're working on something special and think you'd be a perfect fit. Mind if I share a few details?",
      ];
      const newInfluencers = preview.map((p, i) => {
        const firstName = p.name.split(" ")[0];
        const hook = hookTemplates[i % hookTemplates.length]
          .replace("{name}", firstName)
          .replace("{category}", (p.category || "").toLowerCase());
        return {
          ...p,
          id: "IMP-" + (1000 + Math.floor(Math.random() * 9000)),
          syncedAt: now,
          note: "",
          previouslyRejected: false,
          aiVerdict: "Approved",
          outreachHook: hook,
        };
      });
      onDone(newInfluencers);
    }, 1200);
  };

  return (
    <Modal open={true} onClose={onClose}
      title="Bulk Sync from Google Sheets"
      sub="Daily snapshot integration"
      foot={<>
        <button className="btn" onClick={onClose} disabled={syncing}>Cancel</button>
        <button className="btn primary" onClick={handleSync} disabled={syncing || !preview || preview.length === 0}>
          {syncing ? "Syncing…" : `Import ${preview ? preview.length : "…"} influencers`}
        </button>
      </>}>
      <div className="text-mute" style={{ marginBottom: 14 }}>
        The system pulls from the connected Google Sheet and skips duplicates (matched by handle). New rows go directly to Unassigned Outreach.
      </div>
      <div className="kv-list" style={{ marginBottom: 14 }}>
        <div className="kv"><div className="k">Source</div><div className="v text-mono">ims-daily-sheet.gsheet</div></div>
        <div className="kv"><div className="k">Schedule</div><div className="v">Daily · 09:00 UK</div></div>
        <div className="kv"><div className="k">Duplicates skipped</div><div className="v">Yes — by handle + platform</div></div>
      </div>
      {preview && preview.length > 0 ? (
        <>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
            <div className="text-xs text-mute" style={{ fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em" }}>
              {preview.length} new influencers to import
            </div>
            {preview.length > previewPerPage && (
              <span className="text-xs text-mute" style={{ fontFamily: "var(--font-mono)" }}>
                {(pg - 1) * previewPerPage + 1}–{Math.min(pg * previewPerPage, preview.length)} of {preview.length}
              </span>
            )}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {preview.slice((pg - 1) * previewPerPage, pg * previewPerPage).map((p, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "7px 10px", background: "var(--surface-2)", borderRadius: 4, border: "1px solid var(--line)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--accent)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, fontFamily: "var(--font-mono)" }}>
                    {p.name.split(" ").map(w => w[0]).join("").slice(0,2)}
                  </div>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 13 }}>{p.name}</div>
                    <div className="text-xs text-mute">{p.handle} · {p.platform}</div>
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="text-xs text-mute">{p.followers} · {p.er} ER</div>
                  <div className="text-xs text-mute">{p.category} · {p.location}</div>
                </div>
              </div>
            ))}
          </div>
          {Math.ceil(preview.length / previewPerPage) > 1 && (
            <div style={{ marginTop: 10 }}>
              <TablePagination page={pg} totalPages={Math.ceil(preview.length / previewPerPage)} onPage={setPg} total={preview.length} perPage={previewPerPage} />
            </div>
          )}
        </>
      ) : preview && preview.length === 0 ? (
        <div className="banner info"><Ic.info /><div>All influencers in the sheet are already in the system. Nothing to import.</div></div>
      ) : (
        <div className="text-mute text-xs">Checking for new records…</div>
      )}
    </Modal>
  );
}

// ============================================================================
// Video Editors
// ============================================================================

function VideoEditorsPage({ data, notify }) {
  const { updatePerson, addPerson, restorePerson } = useApp();
  const allEditors = data.videoEditors || [];
  const [showArchived, setShowArchived] = useState(false);
  const [list, setList] = useState(allEditors.filter(v => !v.deletedAt));
  const [openNew, setOpenNew] = useState(false);
  const [edit, setEdit] = useState(null);
  const [search, setSearch] = useState("");
  const [pg, setPg] = useState(1);
  const perPage = 8;

  const archivedCount = allEditors.filter(v => v.deletedAt).length;
  const displayList = showArchived ? allEditors : list;

  const searched = displayList.filter(v =>
    !search.trim() ||
    v.name.toLowerCase().includes(search.toLowerCase()) ||
    v.id.toLowerCase().includes(search.toLowerCase())
  );
  const totalPages = Math.max(1, Math.ceil(searched.length / perPage));
  const paged = searched.slice((pg - 1) * perPage, pg * perPage);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Video Editors</h1>
          <div className="subtitle">Manage video editors assigned to Stage 2 content production.</div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <div className="meta"><span>{list.length} editors{archivedCount > 0 ? ` · ${archivedCount} archived` : ""}</span></div>
          {!showArchived && <button className="btn primary" onClick={() => setOpenNew(true)}><Ic.plus /> Add Editor</button>}
        </div>
      </div>

      <div className="toolbar">
        <span className="text-mono text-xs text-mute">{searched.length} of {displayList.length} {showArchived ? "editors (incl. archived)" : "editors"}</span>
        <div className="spacer" />
        {archivedCount > 0 && (
          <button className="btn sm" onClick={() => { setShowArchived(s => !s); setPg(1); setSearch(""); }}>
            {showArchived ? "Hide Archived" : `Show Archived (${archivedCount})`}
          </button>
        )}
        <div className="search">
          <Ic.search />
          <input placeholder="Search name or ID…" value={search} onChange={e => { setSearch(e.target.value); setPg(1); }} />
          {search && <button className="search-clear" onClick={() => { setSearch(""); setPg(1); }}><Ic.x /></button>}
        </div>
      </div>

      {showArchived && (
        <div className="banner" style={{ marginBottom: 0 }}>
          <Ic.info />
          <div>Showing archived editors. Click <strong>Restore</strong> to reactivate them.</div>
        </div>
      )}

      <div className="table-wrap">
        <table className="ims">
          <thead>
            <tr>
              <th>Editor</th>
              <th>ID</th>
              <th>Country</th>
              <th className="num">Rate / Project</th>
              <th className="num">Active Projects</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {paged.length === 0 && (
              <tr><td colSpan={99} style={{ textAlign: "center", padding: "48px 0", color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em" }}>NO RESULTS</td></tr>
            )}
            {paged.map(v => (
              <tr key={v.id} className="clickable" style={v.deletedAt ? { opacity: 0.5 } : {}} onClick={() => !v.deletedAt && setEdit(v)}>
                <td>
                  <div className="inf-cell">
                    <div className="avatar">{v.initials || v.name.split(" ").map(n => n[0]).join("").slice(0,2).toUpperCase()}</div>
                    <div className="name-block">
                      <div className="name">{v.name}</div>
                      <div className="meta">{v.email}</div>
                    </div>
                  </div>
                </td>
                <td className="mono"><span className="pill">{v.id}</span></td>
                <td>{v.country}</td>
                <td className="num">${v.ratePerProject}</td>
                <td className="num">{v.active || 0}</td>
                <td>{v.deletedAt ? <Chip tone="neutral" xs>Archived</Chip> : <Chip tone="ok" xs>Active</Chip>}</td>
                <td style={{ textAlign: "right" }}>
                  {v.deletedAt
                    ? <button className="btn sm ghost" onClick={(e) => { e.stopPropagation(); restorePerson("ve", v.id); setList(prev => prev.map(x => x.id === v.id ? { ...x, deletedAt: null } : x)); notify(`${v.name} restored.`, "success"); }}>Restore</button>
                    : <button className="btn sm ghost">Edit <Ic.arrowRight /></button>
                  }
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <TablePagination page={pg} totalPages={totalPages} onPage={setPg} total={searched.length} perPage={perPage} />

      {(openNew || edit) && (
        <VideoEditorModal
          editing={edit}
          onClose={() => { setOpenNew(false); setEdit(null); }}
          onSave={(payload, isEdit) => {
            if (isEdit) {
              setList(list.map(x => x.id === payload.id ? payload : x));
              updatePerson?.("ve", payload.id, payload);
              notify(`${payload.name} updated.`);
            } else {
              const newId = `VE-${String(list.length + 1).padStart(2, "0")}`;
              const newPerson = { ...payload, id: newId, active: 0 };
              setList([...list, newPerson]);
              addPerson?.("ve", newPerson);
              notify(`${payload.name} added as Video Editor.`, "success");
            }
            setOpenNew(false); setEdit(null);
          }}
        />
      )}
    </div>
  );
}

function VideoEditorModal({ editing, onClose, onSave }) {
  const [name, setName]   = useState(editing?.name || "");
  const [email, setEmail] = useState(editing?.email || "");
  const [country, setCountry] = useState(editing?.country || "IN");
  const [rate, setRate]   = useState(editing?.ratePerProject || 100);

  return (
    <Modal open={true} onClose={onClose}
      title={editing ? `Edit ${editing.name}` : "Add Video Editor"}
      sub={editing ? `ID · ${editing.id}` : "New editor"}
      foot={<>
        <span className="text-xs text-mute">{editing ? "" : "Login invite sent on create."}</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn primary" disabled={!name.trim() || !rate}
            onClick={() => onSave({
              ...(editing || {}),
              name,
              initials: name.split(" ").map(n => n[0]).join("").slice(0,2).toUpperCase(),
              email, country,
              ratePerProject: +rate,
            }, !!editing)}>
            {editing ? "Save Changes" : "Create Editor"}
          </button>
        </div>
      </>}>
      <div className="field">
        <label>Full Name <span style={{ color: "var(--bad)" }}>*</span></label>
        <input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus placeholder="e.g. Arjun Kapoor" />
      </div>
      <div className="field">
        <label>Email Address</label>
        <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="e.g. arjun@company.com"
          disabled={!!editing} style={editing ? { opacity: 0.5, cursor: "not-allowed" } : {}} />
      </div>
      <div className="grid-2">
        <div className="field">
          <label>Country</label>
          <select className="select" value={country} onChange={e => setCountry(e.target.value)}>
            <option>IN</option><option>PH</option><option>NG</option><option>EG</option><option>AR</option><option>PK</option><option>BR</option>
          </select>
        </div>
        <div className="field">
          <label>Rate per Project (USD) <span style={{ color: "var(--bad)" }}>*</span></label>
          <input className="input" type="number" step="10" min="0" value={rate} onChange={e => setRate(e.target.value)} />
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { PeoplePage, SpecialistsPage, ManagersPage, InfluencersPage, VideoEditorsPage, VideoEditorModal });