// admin-users-content.jsx — Users CRUD, Content pages + FAQ management.

// ── Users ───────────────────────────────────────────────────
function UsersView({ session }) {
  const [users, setUsers] = React.useState([]);
  const [editing, setEditing] = React.useState(null);
  const [creating, setCreating] = React.useState(false);
  const [confirmDel, setConfirmDel] = React.useState(null);
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    ATS.loadUsers().then((u) => { setUsers(u); setReady(true); }).catch(() => setReady(true));
  }, []);

  const canManage = ATS.roleAtLeast(session.role, 'admin');
  const assignable = ATS.rolesYouCanAssign(session.role);

  const save = async (u) => {
    if (u.id) {
      // Update via API
      await fetch(`/api/users/${u.id}`, {
        method: 'PATCH',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(u),
      });
      const fresh = await ATS.loadUsers();
      setUsers(fresh);
    } else {
      // Create via API
      await fetch('/api/users', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(u),
      });
      const fresh = await ATS.loadUsers();
      setUsers(fresh);
    }
  };

  const remove = async (id) => {
    await fetch(`/api/users/${id}`, { method: 'DELETE', credentials: 'include' });
    const fresh = await ATS.loadUsers();
    setUsers(fresh);
  };

  const editUser = (u) => {
    setEditing({ ...u, password: '' });
  };

  const cancelEditUser = () => setEditing(null);

  const saveUser = async () => {
    await save(editing);
    setEditing(null);
    setCreating(false);
  };

  if (!ready) return <div className="admin-content"><div className="empty"><h3>Loading users…</h3></div></div>;

  return (
    <>
      <StatStrip>
        <StatCard lbl="Total users" val={users.length} />
        <StatCard lbl="Admins" val={users.filter((u) => u.role === 'admin' || u.role === 'super_admin').length} color="#a78bfa" />
        <StatCard lbl="Web admins" val={users.filter((u) => u.role === 'web_admin').length} color="#67e8f9" />
        <StatCard lbl="Staff" val={users.filter((u) => u.role === 'staff').length} color="#86efac" />
      </StatStrip>

      <div className="panel-head" style={{ marginBottom: 12 }}>
        <h3>All users</h3>
        {canManage &&
          <button className="btn btn-primary btn-sm" onClick={() => { setCreating(true); setEditing({ name: '', email: '', role: 'staff', password: '' }); }}>
            <ADMIN_ICONS.plus width="13" height="13" /> Add user
          </button>
        }
      </div>

      <div className="glass-strong" style={{ borderRadius: 14, overflow: 'hidden' }}>
        <table className="users-tbl">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Role</th>
              <th>Created</th>
              {canManage && <th style={{ textAlign: 'right' }}>Actions</th>}
            </tr>
          </thead>
          <tbody>
            {users.length === 0 && (
              <tr><td colSpan={canManage ? 5 : 4} style={{ textAlign: 'center', padding: 32, color: 'var(--text-faint)' }}>No users yet.</td></tr>
            )}
            {users.map((u) => (
              <tr key={u.id} className={editing?.id === u.id ? 'editing' : ''}>
                <td>{u.name}</td>
                <td className="mono">{u.email}</td>
                <td><span className={'role-pill ' + u.role}>{ATS.ROLE_LABEL[u.role]}</span></td>
                <td className="mono dim">{ATS.fmtDate(u.created_at)}</td>
                {canManage && (
                  <td style={{ textAlign: 'right' }}>
                    <button className="btn btn-ghost btn-xs" onClick={() => editUser(u)}>
                      <ADMIN_ICONS.edit width="12" height="12" />
                    </button>
                    <button className="btn btn-ghost btn-xs" style={{ color: '#f87171' }}
                      onClick={() => setConfirmDel(u)}>
                      <ADMIN_ICONS.trash width="12" height="12" />
                    </button>
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Inline editor */}
      {editing && (
        <div className="scrim open" onMouseDown={(e) => { if (e.target === e.currentTarget) { setEditing(null); setCreating(false); } }}>
          <div className="modal glass-strong compact">
            <h3 style={{ marginBottom: 16 }}>{creating ? 'Add user' : 'Edit user'}</h3>
            <div className="form-grid">
              <div className="form-row">
                <label>Name</label>
                <input value={editing.name} onChange={(e) => setEditing((p) => ({ ...p, name: e.target.value }))} />
              </div>
              <div className="form-row">
                <label>Email</label>
                <input value={editing.email} onChange={(e) => setEditing((p) => ({ ...p, email: e.target.value }))} />
              </div>
              <div className="form-row">
                <label>{creating ? 'Password' : 'New password (leave blank to keep)'}</label>
                <input type="password" value={editing.password || ''} onChange={(e) => setEditing((p) => ({ ...p, password: e.target.value }))} />
              </div>
              <div className="form-row">
                <label>Role</label>
                <select value={editing.role} onChange={(e) => setEditing((p) => ({ ...p, role: e.target.value }))}>
                  {assignable.map((r) => <option key={r} value={r}>{ATS.ROLE_LABEL[r]}</option>)}
                </select>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => { setEditing(null); setCreating(false); }}>Cancel</button>
              <button className="btn btn-primary btn-sm" onClick={saveUser}>
                {creating ? 'Add user' : 'Save changes'}
              </button>
            </div>
          </div>
        </div>
      )}

      <Confirm open={!!confirmDel}
        title={`Delete user?`}
        confirmText="Delete"
        danger
        onConfirm={() => { remove(confirmDel.id); setConfirmDel(null); }}
        onClose={() => setConfirmDel(null)}>
        <p>Permanently removes <b>{confirmDel?.name}</b> ({confirmDel?.email}).</p>
      </Confirm>
    </>
  );
}

// ── Content pages ──────────────────────────────────────────
function ContentView({ session }) {
  const [pages, setPages] = React.useState([]);
  const [ready, setReady] = React.useState(false);
  const [editingId, setEditingId] = React.useState(null);
  const [draft, setDraft] = React.useState(null);
  const [creating, setCreating] = React.useState(false);
  const [confirmDel, setConfirmDel] = React.useState(null);

  React.useEffect(() => {
    ATS.loadPages().then((p) => { setPages(p); setReady(true); }).catch(() => setReady(true));
  }, []);

  const canManage = ATS.roleAtLeast(session.role, 'web_admin');
  const pageKeys = ATS.PAGE_KEYS || ['about', 'rules', 'faq', 'recruitment', 'events', 'svs'];

  const savePage = async () => {
    if (!draft) return;
    const body = { page_key: draft.page_key, title: draft.title, content: draft.content, slug: draft.page_key };
    if (draft.id) {
      await fetch(`/api/content/${draft.id}`, {
        method: 'PATCH',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(draft),
      });
    } else {
      await fetch('/api/content', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(draft),
      });
    }
    const fresh = await ATS.loadPages();
    setPages(fresh);
    setEditingId(null);
    setDraft(null);
    setCreating(false);
  };

  const removePage = async (id) => {
    await fetch(`/api/content/${id}`, { method: 'DELETE', credentials: 'include' });
    const fresh = await ATS.loadPages();
    setPages(fresh);
  };

  const isDefault = (p) => pageKeys.includes(p.page_key);

  if (!ready) return <div className="admin-content"><div className="empty"><h3>Loading content…</h3></div></div>;

  return (
    <>
      <StatStrip>
        <StatCard lbl="Content pages" val={pages.length} />
        <StatCard lbl="Published" val={pages.filter((p) => p.status === 'published').length} color="#5eead4" />
        <StatCard lbl="Drafts" val={pages.filter((p) => p.status === 'draft').length} color="#fbbf24" />
      </StatStrip>

      <div className="panel-head" style={{ marginBottom: 12 }}>
        <h3>All pages</h3>
        {canManage &&
          <button className="btn btn-primary btn-sm" onClick={() => {
            setCreating(true);
            setEditingId('new');
            setDraft({ page_key: '', title: '', content: '', status: 'draft' });
          }}>
            <ADMIN_ICONS.plus width="13" height="13" /> New page
          </button>
        }
      </div>

      <div className="glass-strong" style={{ borderRadius: 14, overflow: 'hidden' }}>
        <table className="users-tbl">
          <thead>
            <tr>
              <th>Page key</th>
              <th>Title</th>
              <th>Status</th>
              <th>Updated</th>
              {canManage && <th style={{ textAlign: 'right' }}>Actions</th>}
            </tr>
          </thead>
          <tbody>
            {pages.length === 0 && (
              <tr><td colSpan={canManage ? 5 : 4} style={{ textAlign: 'center', padding: 32, color: 'var(--text-faint)' }}>No pages yet.</td></tr>
            )}
            {pages.map((p) => (
              <tr key={p.id}>
                <td className="mono">{p.page_key}</td>
                <td>{p.title}</td>
                <td><span className={'app-status ' + (p.status || 'draft')}>{p.status || 'draft'}</span></td>
                <td className="mono dim">{ATS.fmtDate(p.updated_at)}</td>
                {canManage && (
                  <td style={{ textAlign: 'right' }}>
                    <button className="btn btn-ghost btn-xs" onClick={() => {
                      setEditingId(p.id);
                      setDraft({ ...p });
                    }}>
                      <ADMIN_ICONS.edit width="12" height="12" />
                    </button>
                    <button className="btn btn-ghost btn-xs" style={{ color: '#f87171' }}
                      onClick={() => setConfirmDel(p)}>
                      <ADMIN_ICONS.trash width="12" height="12" />
                    </button>
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Page editor modal */}
      {draft && (
        <div className="scrim open" onMouseDown={(e) => {
          if (e.target === e.currentTarget) { setDraft(null); setEditingId(null); setCreating(false); }
        }}>
          <div className="modal glass-strong" style={{ width: '100%', maxWidth: 640 }}>
            <h3 style={{ marginBottom: 16 }}>{creating ? 'New page' : 'Edit page'}</h3>
            <div className="form-grid">
              <div className="form-row">
                <label>Page key</label>
                <input value={draft.page_key} onChange={(e) => setDraft((p) => ({ ...p, page_key: e.target.value }))}
                  placeholder="about" disabled={!creating} />
              </div>
              <div className="form-row">
                <label>Title</label>
                <input value={draft.title} onChange={(e) => setDraft((p) => ({ ...p, title: e.target.value }))}
                  placeholder="About Us" />
              </div>
              <div className="form-row">
                <label>Status</label>
                <select value={draft.status || 'draft'} onChange={(e) => setDraft((p) => ({ ...p, status: e.target.value }))}>
                  <option value="draft">Draft</option>
                  <option value="published">Published</option>
                </select>
              </div>
              <div className="form-row" style={{ gridColumn: '1 / -1' }}>
                <label>Content (HTML)</label>
                <textarea value={draft.content} onChange={(e) => setDraft((p) => ({ ...p, content: e.target.value }))}
                  rows={12} style={{ fontFamily: 'var(--mono)' }} placeholder="<h1>About Us</h1><p>…</p>" />
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => { setDraft(null); setEditingId(null); setCreating(false); }}>Cancel</button>
              <button className="btn btn-primary btn-sm" onClick={savePage}>
                {creating ? 'Create page' : 'Save changes'}
              </button>
            </div>
          </div>
        </div>
      )}

      <Confirm open={!!confirmDel}
        title={`Delete page?`}
        confirmText="Delete"
        danger
        onConfirm={() => { removePage(confirmDel.id); setConfirmDel(null); }}
        onClose={() => setConfirmDel(null)}>
        <p>Permanently removes <b>{confirmDel?.page_key}</b> ({confirmDel?.title}).</p>
      </Confirm>
    </>
  );
}

// ── FAQ management ─────────────────────────────────────────
function FAQView({ session }) {
  const [items, setItems] = React.useState([]);
  const [editingId, setEditingId] = React.useState(null);
  const [draft, setDraft] = React.useState(null);
  const [creating, setCreating] = React.useState(false);
  const [confirmDel, setConfirmDel] = React.useState(null);
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    ATS.loadFaqs().then((f) => { setItems(f); setReady(true); }).catch(() => setReady(true));
  }, []);

  const canManage = ATS.roleAtLeast(session.role, 'web_admin');

  const saveFAQ = async () => {
    if (!draft) return;
    if (draft.id) {
      await fetch(`/api/faq/${draft.id}`, {
        method: 'PATCH',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: draft.question, answer: draft.answer, sort_order: draft.sort_order || 0 }),
      });
    } else {
      await fetch('/api/faq', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: draft.question, answer: draft.answer, sort_order: draft.sort_order || 0 }),
      });
    }
    const fresh = await ATS.loadFaqs();
    setItems(fresh);
    setDraft(null);
    setEditingId(null);
    setCreating(false);
  };

  const removeFAQ = async (id) => {
    await fetch(`/api/faq/${id}`, { method: 'DELETE', credentials: 'include' });
    const fresh = await ATS.loadFaqs();
    setItems(fresh);
  };

  if (!ready) return <div className="admin-content"><div className="empty"><h3>Loading FAQ…</h3></div></div>;

  return (
    <>
      <StatStrip>
        <StatCard lbl="FAQ items" val={items.length} />
      </StatStrip>

      <div className="panel-head" style={{ marginBottom: 12 }}>
        <h3>Frequently Asked Questions</h3>
        {canManage &&
          <button className="btn btn-primary btn-sm" onClick={() => {
            setCreating(true);
            setEditingId('new');
            setDraft({ question: '', answer: '', sort_order: 0 });
          }}>
            <ADMIN_ICONS.plus width="13" height="13" /> Add FAQ
          </button>
        }
      </div>

      <div className="faq-list">
        {items.length === 0 && (
          <div className="empty"><h3>No FAQs yet.</h3><p>Add your first frequently asked question.</p></div>
        )}
        {items.map((item) => (
          <div key={item.id} className="faq-item glass-strong">
            <div className="faq-q">
              <b>{item.question}</b>
              {canManage && (
                <div className="faq-actions">
                  <button className="btn btn-ghost btn-xs" onClick={() => {
                    setEditingId(item.id);
                    setDraft({ ...item });
                  }}>
                    <ADMIN_ICONS.edit width="12" height="12" />
                  </button>
                  <button className="btn btn-ghost btn-xs" style={{ color: '#f87171' }}
                    onClick={() => setConfirmDel(item)}>
                    <ADMIN_ICONS.trash width="12" height="12" />
                  </button>
                </div>
              )}
            </div>
            <div className="faq-a" dangerouslySetInnerHTML={{ __html: item.answer }} />
          </div>
        ))}
      </div>

      {/* FAQ editor modal */}
      {draft && (
        <div className="scrim open" onMouseDown={(e) => {
          if (e.target === e.currentTarget) { setDraft(null); setEditingId(null); setCreating(false); }
        }}>
          <div className="modal glass-strong" style={{ width: '100%', maxWidth: 640 }}>
            <h3 style={{ marginBottom: 16 }}>{creating ? 'Add FAQ' : 'Edit FAQ'}</h3>
            <div className="form-grid">
              <div className="form-row">
                <label>Question</label>
                <input value={draft.question} onChange={(e) => setDraft((p) => ({ ...p, question: e.target.value }))} />
              </div>
              <div className="form-row">
                <label>Sort order</label>
                <input type="number" value={draft.sort_order ?? 0} onChange={(e) => setDraft((p) => ({ ...p, sort_order: parseInt(e.target.value) || 0 }))} />
              </div>
              <div className="form-row" style={{ gridColumn: '1 / -1' }}>
                <label>Answer (HTML)</label>
                <textarea value={draft.answer} onChange={(e) => setDraft((p) => ({ ...p, answer: e.target.value }))}
                  rows={6} style={{ fontFamily: 'var(--mono)' }} placeholder="<p>You can apply by…</p>" />
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => { setDraft(null); setEditingId(null); setCreating(false); }}>Cancel</button>
              <button className="btn btn-primary btn-sm" onClick={saveFAQ}>
                {creating ? 'Add FAQ' : 'Save changes'}
              </button>
            </div>
          </div>
        </div>
      )}

      <Confirm open={!!confirmDel}
        title={`Delete FAQ?`}
        confirmText="Delete"
        danger
        onConfirm={() => { removeFAQ(confirmDel.id); setConfirmDel(null); }}
        onClose={() => setConfirmDel(null)}>
        <p>Permanently removes the FAQ: <b>{confirmDel?.question}</b></p>
      </Confirm>
    </>
  );
}

Object.assign(window, { UsersView, ContentView, FAQView });