/* Mereka v2 — Program · Manage Members
   Figma: 79345 (All), 79911/80547 (Pending + bulk), 88153/88125/88173/88139 (modals/toasts),
          100928 (filter), 100901 (row menu), 100778 (response drawer),
          101482/81208 (application forms), 83438 (choose form type), 100857 (form menu) */

const MM_ADMINS = [
  { email: 'jessica@mereka.my', joined: '3/10/2024' },
  { email: 'natalia@mereka.my', joined: '3/10/2024' },
];
const MM_MEMBERS = [
  'florencejones@gmail.com', 'natalie123a@gmail.com', 'jamey_james@gmail.com', 'carlamendoza95@gmail.com',
  'oliver.hayes@gmail.com', 'sophia.carter@email.com', 'ethanwright@mail.com', 'mia.roberts@hotmail.com',
  'liam.j@example.com', 'liam.j@example.com',
].map(email => ({ email, joined: '3/10/2024' }));

const MM_PENDING = MM_MEMBERS.map((m, i) => ({ email: m.email, stage: i < 5 ? 1 : 2, date: '3/10/2024, 12:00:00 AM' }));

function MMTabs({ tab, setTab }) {
  return (
    <div className="flex items-center gap-2 mb-6 border-b border-neutral-200 pb-5">
      {[['all', 'All members'], ['pending', 'Pending approval'], ['forms', 'Application forms']].map(([v, l]) => (
        <button key={v} onClick={() => setTab(v)}
          className={`px-4 h-9 rounded-full text-sm font-medium transition-colors ${tab === v ? 'bg-neutral-900 text-white' : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'}`}>{l}</button>
      ))}
    </div>
  );
}

function MMHeader() {
  const prog = useProg();
  const inviteLink = 'https://mereka.my/join/' + String((prog && prog.name) || 'programme').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
  return (
    <div className="flex items-start justify-between gap-4 mb-6 flex-wrap">
      <h1 className="text-3xl font-bold text-neutral-900">Manage Members</h1>
      <div className="flex items-center gap-3">
        <CopyButton text={inviteLink} label="Copy invite link" icon="external" className="h-11 px-5 rounded-full border border-neutral-300 text-sm font-semibold hover:bg-neutral-50" />
        <div className="relative w-[300px]">
          <input placeholder="Invite member by email" className="w-full h-11 pl-4 pr-12 text-sm border border-neutral-300 rounded-full bg-white focus:outline-none focus:border-neutral-400" />
          <button className="absolute right-1.5 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center text-neutral-500 hover:bg-neutral-100"><Icon name="send" size={15} /></button>
        </div>
      </div>
    </div>
  );
}

function Pagination128() {
  return (
    <div className="flex items-center justify-between mt-5">
      <span className="text-sm text-neutral-500">Showing 1-10 of 128</span>
      <div className="flex items-center gap-2">
        <button className="w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-50"><Icon name="chevronLeft" size={15} /></button>
        {[1, 2, 3].map(p => <button key={p} className={`w-9 h-9 rounded-full text-sm font-semibold ${p === 1 ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:bg-neutral-50'}`}>{p}</button>)}
        <button className="w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-50"><Icon name="chevronRight" size={15} /></button>
      </div>
    </div>
  );
}

/* ---- popovers / menus ---- */
function FilterPopover({ onClose }) {
  const opts = ['All stages', 'Interest form', 'Application form', 'Pending', 'Approved', 'Declined'];
  const [sel, setSel] = useState(new Set());
  return (
    <div className="absolute right-0 top-11 z-40 w-56 bg-white rounded-2xl border border-neutral-100 py-2 shadow-[0_16px_40px_rgba(0,0,0,0.14)]" onClick={e => e.stopPropagation()}>
      {opts.map((o, i) => (
        <button key={o} onClick={() => setSel(s => { const n = new Set(s); n.has(o) ? n.delete(o) : n.add(o); return n; })}
          className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-neutral-50 ${i === 2 ? 'border-b border-neutral-100' : ''}`}>
          <span className={`w-5 h-5 rounded border flex items-center justify-center ${sel.has(o) ? 'bg-neutral-900 border-neutral-900 text-white' : 'border-neutral-300'}`}>{sel.has(o) && <Icon name="check" size={12} strokeWidth={3} />}</span>
          {o}
        </button>
      ))}
      <div className="px-3 pt-2">
        <button onClick={onClose} className="w-full h-10 rounded-lg bg-blue-600 text-white text-sm font-semibold">Apply filter</button>
        <button onClick={onClose} className="w-full h-10 text-sm font-medium text-neutral-700">Clear filter</button>
      </div>
    </div>
  );
}

function RowMenu({ onClose }) {
  return (
    <div className="absolute right-0 top-8 z-40 w-44 bg-white rounded-xl border border-neutral-100 py-1.5 shadow-[0_16px_40px_rgba(0,0,0,0.16)]" onClick={e => e.stopPropagation()}>
      <button className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-neutral-50"><Icon name="send" size={15} className="text-neutral-400" /> Send</button>
      <button className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-neutral-50"><Icon name="copy" size={15} className="text-neutral-400" /> Duplicate</button>
      <button className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50"><Icon name="trash" size={15} /> Delete</button>
    </div>
  );
}

function ResponseDrawer({ email, onClose }) {
  const questions = [
    { q: 'Question 1', t: 'Short text', a: <p className="text-sm text-neutral-600">Lorem ipsum</p> },
    { q: 'Question 2', t: 'Long text', a: <p className="text-sm text-neutral-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p> },
    { q: 'Question 3', t: 'Multiple choice', a: <div className="flex flex-wrap gap-2">{['Option 1', 'Option 2', 'Option 3', 'Option 4'].map(o => <span key={o} className="px-3 py-1.5 text-sm border border-neutral-300 rounded-lg">{o}</span>)}</div> },
    { q: 'Question 4', t: 'File upload', a: <a className="text-sm text-neutral-500 underline">example.png</a> },
    { q: 'Question 5', t: 'Rating', a: <Stars n={3} /> },
    { q: 'Question 6', t: 'Long text', a: <p className="text-sm text-neutral-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p> },
    { q: 'Question 7', t: 'Long text', a: <p className="text-sm text-neutral-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p> },
  ];
  return (
    <div className="fixed inset-0 z-[60] flex justify-end bg-black/40" onClick={onClose}>
      <div onClick={e => e.stopPropagation()} className="w-full max-w-[460px] max-w-full bg-white h-full overflow-y-auto scrollbar-thin animate-[slideInRight_.25s_ease_both]">
        <div className="p-6">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2 text-neutral-700">
              <Icon name="chevronDown" size={16} /><Icon name="chevronUp" size={16} />
              <span className="font-semibold text-[15px]">{email}</span>
            </div>
            <button onClick={onClose} className="text-neutral-500 hover:text-neutral-900"><Icon name="close" size={18} /></button>
          </div>
          <div className="flex items-center gap-2 mb-4">
            <span className="px-2 py-0.5 rounded text-[11px] font-bold bg-blue-100 text-blue-700">STAGE 1</span>
            <span className="text-xs text-neutral-500">Submitted 1 Apr 2026 20:08</span>
          </div>
          <div className="flex items-center gap-2.5 mb-5">
            <button className="h-9 px-5 rounded-md bg-blue-600 text-white text-sm font-semibold">Approve</button>
            <button className="h-9 px-5 rounded-md bg-red-500 text-white text-sm font-semibold">Decline</button>
          </div>
          <div className="space-y-3">
            {questions.map((q, i) => (
              <div key={i} className="border border-neutral-200 rounded-xl p-4 bg-neutral-50/50">
                <p className="font-bold text-sm">{q.q}</p>
                <p className="text-xs font-semibold text-neutral-500 mb-2">{q.t}</p>
                {q.a}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ConfirmDialog({ kind, count, onCancel, onConfirm }) {
  const reject = kind === 'reject';
  return (
    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 p-4" onClick={onCancel}>
      <div onClick={e => e.stopPropagation()} className="w-full max-w-md bg-white rounded-2xl p-6 shadow-2xl">
        <div className="flex items-start justify-between gap-3">
          <h2 className="text-xl font-bold">{reject ? 'Reject' : 'Approve'} {count} selected applicants?</h2>
          <button onClick={onCancel} className="text-neutral-700"><Icon name="close" size={18} /></button>
        </div>
        <p className="text-sm text-neutral-500 mt-2">This action can't be undone.</p>
        <div className="mt-5 flex items-center gap-3">
          <button onClick={onCancel} className="flex-1 h-12 rounded-full border border-neutral-300 text-sm font-bold hover:bg-neutral-50">Cancel</button>
          <button onClick={onConfirm} className={`flex-1 h-12 rounded-full text-white text-sm font-bold inline-flex items-center justify-center gap-2 ${reject ? 'bg-red-500 hover:bg-red-600' : 'bg-blue-600 hover:bg-blue-700'}`}>
            {reject ? 'Reject' : 'Approve'} applicants <Icon name={reject ? 'close' : 'check'} size={16} strokeWidth={2.5} />
          </button>
        </div>
      </div>
    </div>
  );
}

function ResultToast({ kind, onClose }) {
  const reject = kind === 'reject';
  useEffect(() => { const t = setTimeout(onClose, 3000); return () => clearTimeout(t); }, []);
  return (
    <div className="fixed top-24 right-6 z-[80] w-full max-w-[420px] bg-white rounded-xl shadow-lg border border-neutral-200 p-5 animate-[fadeUp_.2s_ease_both]">
      <div className="flex items-start justify-between gap-3 mb-1">
        <h3 className="font-bold text-base">Applicants {reject ? 'rejected' : 'approved'}!</h3>
        <button onClick={onClose} className="text-neutral-900"><Icon name="close" size={16} /></button>
      </div>
      <p className="text-sm text-neutral-500">Selected applicants have been {reject ? 'rejected' : 'approved'}.</p>
    </div>
  );
}

function ChooseFormTypeModal({ onClose, onPick }) {
  const types = [
    { t: 'Mereka Built-in Form', d: 'Create a form directly on mereka', extra: 'No external tools needed', rec: true },
    { t: 'Typeform', d: 'Link an existing Typeform' },
    { t: 'Google Forms', d: 'Link a google form' },
    { t: 'Custom URL', d: 'Any external form via URL' },
  ];
  return (
    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
      <div onClick={e => e.stopPropagation()} className="w-full max-w-2xl bg-white rounded-2xl p-6 shadow-2xl">
        <div className="flex items-start justify-between gap-3 mb-1">
          <h2 className="text-2xl font-bold">Choose form type</h2>
          <button onClick={onClose} className="text-neutral-900"><Icon name="close" size={20} /></button>
        </div>
        <p className="text-sm text-neutral-500 mb-5">Select how candidates will fill out this application stage.</p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {types.map(ty => (
            <button key={ty.t} onClick={onPick} className="text-left border border-neutral-200 rounded-2xl p-5 hover:border-neutral-400 transition-colors">
              <div className="flex items-center gap-2 mb-1.5">
                <h3 className="font-bold text-lg">{ty.t}</h3>
                {ty.rec && <span className="px-2 py-0.5 rounded bg-green-100 text-green-700 text-[11px] font-bold tracking-wide">RECOMMENDED</span>}
              </div>
              <p className="text-sm text-neutral-500">{ty.d}</p>
              {ty.extra && <p className="text-sm text-blue-600 mt-1">{ty.extra}</p>}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function FormCardMenu({ onClose }) {
  return (
    <div className="absolute right-2 top-10 z-40 w-52 bg-white rounded-xl border border-neutral-100 py-1.5 shadow-[0_16px_40px_rgba(0,0,0,0.16)]" onClick={e => e.stopPropagation()}>
      <Link to="/app/forms/builder/interest/content" className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-neutral-50"><Icon name="edit" size={15} className="text-neutral-400" /> Edit form</Link>
      <Link to="/app/forms/builder/interest/results" className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-neutral-50"><Icon name="eye" size={15} className="text-neutral-400" /> View Responses</Link>
      <Link to="/app/forms/builder/interest/share" className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-neutral-50"><Icon name="send" size={15} className="text-neutral-400" /> Share</Link>
      <button className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-neutral-50"><Icon name="download" size={15} className="text-neutral-400" /> Export Data</button>
      <button className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50"><Icon name="trash" size={15} /> Delete</button>
    </div>
  );
}

/* ---- tab bodies ---- */
function AllMembersTab() {
  const [menu, setMenu] = useState(null);
  return (
    <div onClick={() => setMenu(null)}>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-2xl font-bold">AI4U Members</h2>
        <div className="flex items-center gap-2">
          <div className="relative w-[240px]">
            <Icon name="search" size={15} className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" />
            <input placeholder="Search member…" className="w-full h-10 pl-10 pr-4 text-sm border border-neutral-200 rounded-full bg-white focus:outline-none" />
          </div>
          <button className="w-10 h-10 rounded-lg border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-50"><Icon name="filter" size={16} /></button>
        </div>
      </div>
      {[['Admin', MM_ADMINS], ['Members', MM_MEMBERS]].map(([label, rows]) => (
        <div key={label} className="mb-4">
          <div className="flex items-center justify-between px-1 py-2 border-b border-neutral-200">
            <span className="text-base font-bold">{label} ({rows.length})</span>
            <span className="text-sm text-neutral-500">Joined</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="flex items-center gap-4 px-1 py-3 border-b border-neutral-100 hover:bg-neutral-50 text-sm relative">
              <span className="text-neutral-500 flex-1">{r.email}</span>
              <span className="text-neutral-500">{r.joined}</span>
              <button onClick={e => { e.stopPropagation(); setMenu(menu === `${label}${i}` ? null : `${label}${i}`); }} className="text-neutral-400 hover:text-neutral-700"><Icon name="more" size={16} /></button>
              {menu === `${label}${i}` && <RowMenu onClose={() => setMenu(null)} />}
            </div>
          ))}
        </div>
      ))}
      <Pagination128 />
    </div>
  );
}

function PendingTab() {
  const [sel, setSel] = useState(new Set());
  const [menu, setMenu] = useState(null);
  const [filter, setFilter] = useState(false);
  const [drawer, setDrawer] = useState(null);
  const [confirm, setConfirm] = useState(null); // 'approve' | 'reject'
  const [toast, setToast] = useState(null);
  const allSel = sel.size === MM_PENDING.length;
  const toggle = (i) => setSel(s => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; });
  const selectionMode = sel.size > 0;

  return (
    <div onClick={() => setMenu(null)}>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-2xl font-bold">Pending Approval</h2>
        <div className="flex items-center gap-2 relative">
          <div className="relative w-[240px]">
            <Icon name="search" size={15} className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" />
            <input placeholder="Search member…" className="w-full h-10 pl-10 pr-4 text-sm border border-neutral-200 rounded-full bg-white focus:outline-none" />
          </div>
          <button onClick={e => { e.stopPropagation(); setFilter(f => !f); }} className="w-10 h-10 rounded-lg border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-50"><Icon name="filter" size={16} /></button>
          {filter && <FilterPopover onClose={() => setFilter(false)} />}
        </div>
      </div>

      {selectionMode && (
        <div className="flex items-center gap-3 mb-3">
          <button onClick={() => setConfirm('approve')} className="inline-flex items-center gap-2 h-9 px-4 rounded-lg border border-blue-300 text-blue-600 text-sm font-semibold">Approve selected <Icon name="check" size={15} className="text-blue-600" /></button>
          <button onClick={() => setConfirm('reject')} className="inline-flex items-center gap-2 h-9 px-4 rounded-lg border border-red-300 text-red-600 text-sm font-semibold">Reject selected <Icon name="close" size={15} /></button>
          <button onClick={() => setSel(new Set())} className="inline-flex items-center gap-2 h-9 px-4 rounded-lg border border-neutral-300 text-sm font-semibold">Clear selection</button>
          <button onClick={() => setSel(new Set())} className="inline-flex items-center gap-2 h-9 px-4 rounded-lg border border-neutral-300 text-sm font-semibold">Done</button>
        </div>
      )}

      <div className="overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-[12px] font-bold tracking-wide text-neutral-500 border-b border-neutral-200">
              <th className="py-3 pl-1 pr-3 w-10">
                <button onClick={() => setSel(allSel ? new Set() : new Set(MM_PENDING.map((_, i) => i)))}
                  className={`w-5 h-5 rounded border flex items-center justify-center ${allSel ? 'bg-neutral-900 border-neutral-900 text-white' : selectionMode ? 'bg-neutral-900 border-neutral-900 text-white' : 'border-neutral-300'}`}>
                  {selectionMode && <Icon name={allSel ? 'check' : 'menu'} size={11} strokeWidth={3} />}
                </button>
              </th>
              <th className="py-3 pr-3">EMAIL</th>
              <th className="py-3 pr-3">STAGE</th>
              <th className="py-3 pr-3">DATE SUBMITTED</th>
              <th className="py-3 pr-3 text-right">ACTION</th>
            </tr>
          </thead>
          <tbody>
            {MM_PENDING.map((r, i) => {
              const checked = sel.has(i);
              return (
                <tr key={i} className={`border-b border-neutral-100 ${checked ? 'bg-blue-50/60' : 'hover:bg-neutral-50'}`}>
                  <td className="py-3 pl-1 pr-3">
                    <button onClick={() => toggle(i)} className={`w-5 h-5 rounded border flex items-center justify-center ${checked ? 'bg-neutral-900 border-neutral-900 text-white' : 'border-neutral-300'}`}>{checked && <Icon name="check" size={12} strokeWidth={3} />}</button>
                  </td>
                  <td className="py-3 pr-3 text-neutral-600">{r.email}</td>
                  <td className="py-3 pr-3"><span className={`px-2 py-0.5 rounded text-[11px] font-bold border ${r.stage === 1 ? 'border-blue-300 text-blue-600' : 'border-green-300 text-green-600'}`}>STAGE {r.stage}</span></td>
                  <td className="py-3 pr-3 text-neutral-500">{r.date}</td>
                  <td className="py-3 pr-3">
                    <div className="flex items-center justify-end gap-2.5 relative">
                      <button className="text-blue-600"><span className="w-5 h-5 rounded-full border-2 border-blue-500 flex items-center justify-center"><Icon name="check" size={11} strokeWidth={3} /></span></button>
                      <button className="text-red-500"><span className="w-5 h-5 rounded-full border-2 border-red-400 flex items-center justify-center"><Icon name="close" size={11} strokeWidth={3} /></span></button>
                      <button onClick={() => setDrawer(r.email)} className="px-3 h-8 rounded-md border border-neutral-200 text-blue-600 text-[13px] font-semibold hover:bg-neutral-50">View Response</button>
                      <button onClick={e => { e.stopPropagation(); setMenu(menu === i ? null : i); }} className="text-neutral-400 hover:text-neutral-700"><Icon name="more" size={16} /></button>
                      {menu === i && <RowMenu onClose={() => setMenu(null)} />}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <Pagination128 />

      {drawer && <ResponseDrawer email={drawer} onClose={() => setDrawer(null)} />}
      {confirm && <ConfirmDialog kind={confirm} count={23} onCancel={() => setConfirm(null)} onConfirm={() => { setToast(confirm); setConfirm(null); setSel(new Set()); }} />}
      {toast && <ResultToast kind={toast} onClose={() => setToast(null)} />}
    </div>
  );
}

const FORM_CARDS = [
  { title: 'Interest Form', stage: 1 },
  { title: 'Application Form', stage: 2 },
];

function ApplicationFormsTab() {
  const [populated, setPopulated] = useState(true);
  const [chooser, setChooser] = useState(false);
  const [menu, setMenu] = useState(null);
  return (
    <div onClick={() => setMenu(null)}>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-2xl font-bold">Application forms</h2>
        <button onClick={() => setPopulated(p => !p)} className="text-xs text-neutral-400 hover:text-neutral-600">{populated ? 'Show empty' : 'Show forms'}</button>
      </div>

      {populated ? (
        <div className="space-y-5">
          {FORM_CARDS.map((f, fi) => (
            <div key={f.title} className="bg-white border border-neutral-200 rounded-2xl p-5 relative">
              <div className="flex items-center gap-2 mb-4">
                <h3 className="text-lg font-bold">{f.title}</h3>
                <span className={`px-2 py-0.5 rounded text-[11px] font-bold border ${f.stage === 1 ? 'border-blue-300 text-blue-600' : 'border-green-300 text-green-600'}`}>STAGE {f.stage}</span>
                <button onClick={e => { e.stopPropagation(); setMenu(menu === fi ? null : fi); }} className="ml-auto text-neutral-400 hover:text-neutral-700"><Icon name="more" size={18} /></button>
                {menu === fi && <FormCardMenu onClose={() => setMenu(null)} />}
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
                {[['Pending approval', '248', true], ['Total responses', '359'], ['Total view/ link open', '520'], ['Last updated', '29 Mar 2026'], ['Latest response', '3 Apr 2026 20:09']].map(([l, v, link]) => (
                  <div key={l} className="bg-neutral-50 rounded-xl p-3.5">
                    <p className={`text-[13px] ${link ? 'text-blue-600 font-semibold' : 'text-neutral-500'}`}>{l}</p>
                    <p className="text-base font-semibold mt-1">{v}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="space-y-4">
          {[['Create Interest Form', 'Collect and screen initial expressions of interest. Capture basic details and motivations to help identify and shortlist suitable participants.'],
            ['Create Application Form', 'Gather comprehensive information from shortlisted candidates.']].map(([t, d]) => (
            <button key={t} onClick={() => setChooser(true)} className="w-full text-left bg-white border border-neutral-200 rounded-2xl p-6 hover:border-neutral-400 transition-colors">
              <div className="flex items-center gap-2 mb-1.5"><Icon name="plus" size={18} className="text-neutral-500" /><h3 className="text-lg font-bold">{t}</h3></div>
              <p className="text-sm text-neutral-500 pl-7">{d}</p>
            </button>
          ))}
        </div>
      )}

      {chooser && <ChooseFormTypeModal onClose={() => setChooser(false)} onPick={() => navigate('/app/forms/builder/interest/content')} />}
    </div>
  );
}

function ManageMembersPage() {
  const [tab, setTab] = useState('all');
  return (
    <ProgramShell active="manage-members" railSingle>
      <div className="max-w-[min(1960px,90vw)]">
        <MMHeader />
        <MMTabs tab={tab} setTab={setTab} />
        {tab === 'all' && <AllMembersTab />}
        {tab === 'pending' && <PendingTab />}
        {tab === 'forms' && <ApplicationFormsTab />}
      </div>
    </ProgramShell>
  );
}

/* Program-scoped forms manager (Admin › Manage forms) — distinct from the
   account-level /app/forms. Reuses the program's Application-forms management. */
function ProgramFormsPage() {
  return (
    <ProgramShell active="manage-forms" railSingle>
      <div className="max-w-[min(1960px,90vw)]">
        <h1 className="text-3xl font-bold text-neutral-900 mb-6">Manage forms</h1>
        <ApplicationFormsTab />
      </div>
    </ProgramShell>
  );
}

Object.assign(window, { ManageMembersPage, ProgramFormsPage });