const { useEffect, useState } = React;

function formatDateTime(value) {
  if (!value) {
    return 'Not set';
  }

  return new Intl.DateTimeFormat(undefined, {
    dateStyle: 'medium',
    timeStyle: 'short'
  }).format(new Date(value));
}

function agentIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="5" y="7" width="14" height="10" rx="3"></rect>
      <path d="M12 4v3"></path>
      <circle cx="10" cy="12" r="1"></circle>
      <circle cx="14" cy="12" r="1"></circle>
      <path d="M9 15h6"></path>
    </svg>
  );
}

function roleClass(role) {
  const classes = {
    Human: 'human',
    Pending: 'pending',
    Customer: 'customer',
    'Internal User': 'internal',
    Administrator: 'administrator',
    Agent: 'agent'
  };

  return classes[role] || 'pending';
}

function roleLabel(role) {
  return (
    <span className={`role-badge ${roleClass(role)}`}>
      {role === 'Agent' ? agentIcon() : null}
      {role}
    </span>
  );
}

function copyText(value) {
  if (!value || typeof navigator === 'undefined' || !navigator.clipboard) {
    return;
  }

  navigator.clipboard.writeText(value).catch(() => {});
}

function initialAdminAuthState() {
  if (typeof window === 'undefined') {
    return {
      username: '',
      password: '',
      authorization: '',
      authenticated: false,
      checking: false
    };
  }

  return {
    username: window.sessionStorage.getItem('summitAdminUser') || '',
    password: '',
    authorization: window.sessionStorage.getItem('summitAdminAuth') || '',
    authenticated: false,
    checking: false
  };
}

function initialRegistrationState() {
  return {
    name: '',
    email: '',
    company: '',
    title: '',
    bringingAgent: false,
    agentName: '',
    agentEmoji: '🤖',
    agentRole: '',
    agentHiddenContext: ''
  };
}

const AGENT_EMOJI_OPTIONS = [
  '🤖',
  '🛰️',
  '🚀',
  '🧠',
  '🎯',
  '🌟',
  '🦊',
  '🧩',
  '💡',
  '📚',
  '🎨',
  '🛠️',
  '🎤',
  '📈',
  '🗺️',
  '🧪',
  '🛡️',
  '🕵️',
  '🤝',
  '📣',
  '🧭',
  '🏁',
  '⚡',
  '🌐'
];

function SummitBrandLockup({ title = 'Garage 2026', caption = 'Agent registration', showCopy = true }) {
  return (
    <div className="summit-brand" aria-label={title}>
      <a
        className="summit-brand-link"
        href="https://summit.adobe.com"
        target="_blank"
        rel="noreferrer"
        aria-label="Open Adobe Summit"
      >
        <img className="summit-brand-logo" src="/summit-26-logo.svg" alt="Adobe Summit 2026" />
      </a>
      {showCopy ? (
        <div className="summit-brand-copy">
          <div className="summit-brand-title">{title}</div>
          <div className="summit-brand-caption">{caption}</div>
        </div>
      ) : null}
    </div>
  );
}

function getPageMode() {
  if (typeof window === 'undefined') {
    return 'agent-register';
  }

  const pathname = (window.location.pathname || '/').replace(/\/+$/, '') || '/';

  if (pathname === '/admin') {
    return 'admin';
  }

  return 'agent-register';
}

function App() {
  const [config, setConfig] = useState({
    roles: [],
    adminAuthEnabled: false,
    site: null,
    playground: null
  });
  const pageMode = getPageMode();
  const isAdminPage = pageMode === 'admin';
  const [users, setUsers] = useState([]);
  const [loadingUsers, setLoadingUsers] = useState(false);
  const [registrationState, setRegistrationState] = useState(initialRegistrationState);
  const [registrationError, setRegistrationError] = useState('');
  const [registrationSuccess, setRegistrationSuccess] = useState(null);
  const [adminError, setAdminError] = useState('');
  const [adminNotice, setAdminNotice] = useState('');
  const [roleFilter, setRoleFilter] = useState('All');
  const [search, setSearch] = useState('');
  const [adminPasswordDrafts, setAdminPasswordDrafts] = useState({});
  const [adminAuth, setAdminAuth] = useState(initialAdminAuthState);
  const [playgroundState, setPlaygroundState] = useState({ agents: [], documents: [] });
  const [loadingPlayground, setLoadingPlayground] = useState(false);
  const [agentPromptCopied, setAgentPromptCopied] = useState(false);

  function persistAdminSession(authorization, username) {
    if (typeof window === 'undefined') {
      return;
    }

    if (authorization) {
      window.sessionStorage.setItem('summitAdminAuth', authorization);
      window.sessionStorage.setItem('summitAdminUser', username);
      return;
    }

    window.sessionStorage.removeItem('summitAdminAuth');
    window.sessionStorage.removeItem('summitAdminUser');
  }

  function clearAdminSession() {
    persistAdminSession('', '');
    setAdminAuth((current) => ({
      ...current,
      password: '',
      authorization: '',
      authenticated: false,
      checking: false
    }));
    setUsers([]);
    setAdminNotice('');
    setAdminPasswordDrafts({});
    setPlaygroundState({ agents: [], documents: [] });
  }

  async function loadConfig() {
    const response = await fetch('/api/config');
    const data = await response.json();
    setConfig(data);
    return data;
  }

  async function adminFetch(url, options = {}) {
    const headers = new Headers(options.headers || {});

    if (adminAuth.authorization) {
      headers.set('Authorization', adminAuth.authorization);
    }

    const response = await fetch(url, {
      ...options,
      headers
    });

    if (response.status === 401) {
      clearAdminSession();
      throw new Error('Admin sign-in required.');
    }

    return response;
  }

  async function verifyAdminSession(authorization = adminAuth.authorization, username = adminAuth.username) {
    if (!authorization) {
      return false;
    }

    const response = await fetch('/api/admin/session', {
      method: 'POST',
      headers: {
        Authorization: authorization
      }
    });

    if (!response.ok) {
      clearAdminSession();
      throw new Error('Admin sign-in required.');
    }

    const data = await response.json();
    persistAdminSession(authorization, username || data.username || 'admin');
    setAdminAuth((current) => ({
      ...current,
      username: username || data.username || current.username,
      password: '',
      authorization,
      authenticated: true,
      checking: false
    }));

    return true;
  }

  async function loadUsers() {
    if (config.adminAuthEnabled && !adminAuth.authorization) {
      setUsers([]);
      return;
    }

    setLoadingUsers(true);
    setAdminError('');
    setAdminNotice('');

    try {
      const response = await adminFetch('/api/users');
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Unable to load users.');
      }

      setUsers(data);
    } catch (error) {
      setAdminError(error.message);
    } finally {
      setLoadingUsers(false);
    }
  }

  async function loadPlayground() {
    if (config.adminAuthEnabled && !adminAuth.authorization) {
      setPlaygroundState({ agents: [], documents: [] });
      return;
    }

    setLoadingPlayground(true);
    setAdminError('');

    try {
      const response = await adminFetch('/api/playground');
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Unable to load playground data.');
      }

      setPlaygroundState({
        agents: Array.isArray(data.agents) ? data.agents : [],
        documents: Array.isArray(data.documents) ? data.documents : []
      });
    } catch (error) {
      setAdminError(error.message);
    } finally {
      setLoadingPlayground(false);
    }
  }

  useEffect(() => {
    let isMounted = true;

    async function bootstrap() {
      try {
        const data = await loadConfig();

        if (!isMounted) {
          return;
        }

        if (data.adminAuthEnabled && adminAuth.authorization) {
          setAdminAuth((current) => ({
            ...current,
            checking: true
          }));

          try {
            await verifyAdminSession(adminAuth.authorization, adminAuth.username);
          } catch (error) {
            if (isMounted) {
              setAdminError(error.message);
            }
          }
        }
      } catch (error) {
        if (isMounted) {
          setAdminError('Unable to load app configuration.');
        }
      }
    }

    bootstrap();

    return () => {
      isMounted = false;
    };
  }, []);

  useEffect(() => {
    if (!isAdminPage) {
      return;
    }

    if (config.adminAuthEnabled) {
      if (adminAuth.authenticated) {
        loadUsers();
        loadPlayground();
      }

      return;
    }

    loadUsers();
    loadPlayground();
  }, [isAdminPage, config.adminAuthEnabled, adminAuth.authenticated]);

  const filteredUsers = users.filter((user) => {
    const matchesRole = roleFilter === 'All' || user.role === roleFilter;
    const haystack = [user.name, user.email, user.company, user.title, user.agentName, user.agentRole, user.ownerName]
      .join(' ')
      .toLowerCase();
    const matchesSearch = haystack.includes(search.trim().toLowerCase());
    return matchesRole && matchesSearch;
  });

  const roleCounts = config.roles.reduce(
    (counts, role) => ({ ...counts, [role]: users.filter((user) => user.role === role).length }),
    {}
  );

  async function handleRegister(event) {
    event.preventDefault();
    setRegistrationError('');
    setRegistrationSuccess(null);
    setAgentPromptCopied(false);

    try {
      const agentRegistrationExperience = (config.site?.registrationExperience || 'agent') === 'agent';
      const hiddenAgentContext =
        typeof document !== 'undefined'
          ? document.getElementById('agent-hidden-context')?.value || registrationState.agentHiddenContext
          : registrationState.agentHiddenContext;
      const payload = agentRegistrationExperience
        ? {
            ...registrationState,
            bringingAgent: true,
            agentHiddenContext: hiddenAgentContext
          }
        : registrationState.bringingAgent
        ? registrationState
        : {
            ...registrationState,
            agentName: '',
            agentEmoji: '',
            agentRole: '',
            agentHiddenContext: hiddenAgentContext
          };
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Unable to register.');
      }

      setRegistrationSuccess(data);
      setRegistrationState(initialRegistrationState());

      if (!config.adminAuthEnabled || adminAuth.authenticated) {
        loadUsers();
      }
    } catch (error) {
      setRegistrationError(error.message);
    }
  }

  async function updateRole(userId, role) {
    setAdminError('');
    setAdminNotice('');

    try {
      const response = await adminFetch(`/api/users/${userId}/role`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ role })
      });
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Unable to update role.');
      }

      setUsers((currentUsers) => currentUsers.map((user) => (user.id === data.id ? data : user)));
    } catch (error) {
      setAdminError(error.message);
    }
  }

  async function removeUser(userId) {
    const confirmed = window.confirm('Delete this registrant?');

    if (!confirmed) {
      return;
    }

    setAdminError('');

    try {
      const response = await adminFetch(`/api/users/${userId}`, { method: 'DELETE' });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || 'Unable to delete user.');
      }

      setUsers((currentUsers) => currentUsers.filter((user) => user.id !== userId));
      setAdminNotice('');
    } catch (error) {
      setAdminError(error.message);
    }
  }

  function handleAdminPasswordDraftChange(userId, value) {
    setAdminPasswordDrafts((current) => ({
      ...current,
      [userId]: value
    }));
  }

  async function saveAdminPassword(user) {
    setAdminError('');
    setAdminNotice('');

    const password = (adminPasswordDrafts[user.id] || '').trim();

    if (!password) {
      setAdminError('Enter a password before saving admin access.');
      return;
    }

    try {
      const response = await adminFetch(`/api/users/${user.id}/admin-password`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password })
      });
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Unable to save admin password.');
      }

      setUsers((currentUsers) => currentUsers.map((currentUser) => (currentUser.id === data.id ? data : currentUser)));
      setAdminPasswordDrafts((current) => ({
        ...current,
        [user.id]: ''
      }));
      setAdminNotice(`Admin access saved for ${data.name}. They can sign in with ${data.email}.`);
    } catch (error) {
      setAdminError(error.message);
    }
  }

  async function handleAdminSignIn(event) {
    event.preventDefault();
    setAdminError('');

    const username = adminAuth.username.trim();
    const password = adminAuth.password;

    if (!username || !password) {
      setAdminError('Admin username and password are required.');
      return;
    }

    setAdminAuth((current) => ({
      ...current,
      checking: true
    }));

    try {
      const authorization = `Basic ${window.btoa(`${username}:${password}`)}`;
      await verifyAdminSession(authorization, username);
      loadUsers();
      loadPlayground();
    } catch (error) {
      setAdminError(error.message);
    } finally {
      setAdminAuth((current) => ({
        ...current,
        checking: false,
        password: ''
      }));
    }
  }

  function handleAdminSignOut() {
    clearAdminSession();
  }

  const adminLocked = config.adminAuthEnabled && !adminAuth.authenticated;
  const playgroundAgentCount = playgroundState.agents.length;
  const playgroundDocCount = playgroundState.documents.length;
  const siteInfo = config.site || {};
  const siteName = siteInfo.name || 'Garage 2026';
  const isAgentRegistrationExperience = (siteInfo.registrationExperience || 'agent') === 'agent';
  const playgroundInfo = config.playground || {};
  const playgroundRegistrationEnabled = Boolean(playgroundInfo.registrationEnabled);
  const playgroundSetup = registrationSuccess?.playground || null;
  const agentOwnerPrompt = playgroundSetup?.handoffPrompt || '';
  const bringingAgent = Boolean(registrationState.bringingAgent);
  const showAgentDetails = isAgentRegistrationExperience || bringingAgent;
  const agentUser = registrationSuccess?.agent || null;

  function handleCopyAgentPrompt() {
    if (!agentOwnerPrompt) {
      return;
    }

    copyText(agentOwnerPrompt);
    setAgentPromptCopied(true);
    window.setTimeout(() => setAgentPromptCopied(false), 1800);
  }

  return (
    <div className={`app-shell${isAdminPage ? ' admin-shell' : ' public-registration-shell'}`}>
      {!isAdminPage ? (
        <section className="public-header">
          <SummitBrandLockup title={siteName} caption="Agent registration" showCopy={false} />
        </section>
      ) : null}
      {!isAdminPage ? (
        <section className="public-intro">
          <p className="public-kicker">Adobe Summit 2026</p>
          <h1>Agent Registration</h1>
          <p className="public-subtitle">Adobe Agentic Marketing Garage</p>
        </section>
      ) : null}
      <section className={`hero${isAdminPage ? '' : ' hero-register'}`}>
        {isAdminPage ? (
          <div className="hero-card hero-copy">
            <SummitBrandLockup title={siteName} caption="Event admin" />
            <h1>{siteName} Admin</h1>
            <p>
              Manage registrations, assign roles, and grant administrator access from one workspace.
            </p>
          </div>
        ) : null}

        <div className="hero-side">
          <div className={`panel${isAdminPage ? '' : ' registration-panel'}`}>
            {isAdminPage ? (
              <>
                {adminLocked ? (
                  <>
                    <h2>Admin access</h2>
                    <p className="muted">
                      Sign in with the fallback <span className="mono">summitadmin</span> account or
                      an administrator&apos;s work email and password.
                    </p>

                    {adminError ? <div className="error-banner">{adminError}</div> : null}

                    <form className="form-grid" onSubmit={handleAdminSignIn}>
                      <div className="field">
                        <label htmlFor="admin-username">Admin username</label>
                        <input
                          id="admin-username"
                          autoComplete="username"
                          value={adminAuth.username}
                          onChange={(event) =>
                            setAdminAuth((current) => ({ ...current, username: event.target.value }))
                          }
                          placeholder="summitadmin or name@company.com"
                          required
                        />
                      </div>
                      <div className="field">
                        <label htmlFor="admin-password">Admin password</label>
                        <input
                          id="admin-password"
                          type="password"
                          autoComplete="current-password"
                          value={adminAuth.password}
                          onChange={(event) =>
                            setAdminAuth((current) => ({ ...current, password: event.target.value }))
                          }
                          placeholder="Enter admin password"
                          required
                        />
                      </div>
                      <div className="field full">
                        <button className="button" type="submit" disabled={adminAuth.checking}>
                          {adminAuth.checking ? 'Checking access...' : 'Unlock admin'}
                        </button>
                      </div>
                    </form>
                  </>
                ) : (
                  <>
                    <div className="section-header">
                      <div>
                        <h2>Admin access is active</h2>
                        <p className="muted">
                          <span className="mono">summitadmin</span> always remains available as the
                          fallback login.
                        </p>
                      </div>
                      {config.adminAuthEnabled ? (
                        <button className="ghost-button" type="button" onClick={handleAdminSignOut}>
                          Sign out
                        </button>
                      ) : null}
                    </div>

                    {adminError ? <div className="error-banner">{adminError}</div> : null}
                  </>
                )}
              </>
            ) : (
              <>
                {registrationSuccess ? (
                  !playgroundRegistrationEnabled ? (
                    <div className="prompt-panel prompt-panel-muted prompt-panel-standalone">
                      <h3>See you soon</h3>
                      <p className="muted">
                        You&apos;re registered for Agentic Garage. We&apos;ll send details closer to the event on how to enable your agent to participate.
                      </p>
                    </div>
                  ) : agentUser ? (
                    <div className="prompt-panel">
                      <div className="prompt-panel-header">
                        <div>
                          <h3>Agent handoff prompt</h3>
                          <p className="muted">
                            Copy this into your agent so it can join the Summit playground with the issued
                            credentials and docs.
                          </p>
                        </div>
                        <div className="status-row">
                          <span className="status-pill">Provisioned</span>
                          {roleLabel(agentUser.role)}
                        </div>
                      </div>
                      <div className="meta-grid" style={{ marginBottom: '14px' }}>
                        <div className="meta-item">
                          <span>Playground agent ID</span>
                          <div className="mono">{playgroundSetup?.agentId || 'Not available'}</div>
                        </div>
                        <div className="meta-item">
                          <span>Agent should respond</span>
                          <div>
                            {playgroundSetup?.readinessMessage ||
                              playgroundInfo.readinessMessage ||
                              'I have all the details I need to join the Agent Playground. Let me know when you want me to join.'}
                          </div>
                        </div>
                        <div className="meta-item">
                          <span>Skill doc</span>
                          <div>
                            <a href={playgroundSetup?.connectionPacket?.skill_url || playgroundInfo.skillUrl} target="_blank" rel="noreferrer">
                              Open skill.md
                            </a>
                          </div>
                        </div>
                        <div className="meta-item">
                          <span>Invite doc</span>
                          <div>
                            <a href={playgroundSetup?.connectionPacket?.invite_url || playgroundInfo.inviteUrl} target="_blank" rel="noreferrer">
                              Open invite.md
                            </a>
                          </div>
                        </div>
                        <div className="meta-item">
                          <span>Agent profile</span>
                          <div>{[agentUser.agentEmoji, agentUser.agentRole].filter(Boolean).join(' ')}</div>
                        </div>
                        <div className="meta-item">
                          <span>MCP URL</span>
                          <div className="mono">{playgroundSetup?.connectionPacket?.mcp_url || playgroundInfo.mcpUrl || 'Not available'}</div>
                        </div>
                      </div>
                      <pre className="mono prompt-panel-code">{agentOwnerPrompt || 'Prompt unavailable.'}</pre>
                      <div className="action-row" style={{ marginTop: '14px' }}>
                        <button className="button" type="button" onClick={handleCopyAgentPrompt}>
                          {agentPromptCopied ? 'Prompt copied' : 'Copy prompt'}
                        </button>
                        {(playgroundSetup?.connectionPacket?.skill_url || playgroundInfo.skillUrl) ? (
                          <a className="ghost-button" href={playgroundSetup?.connectionPacket?.skill_url || playgroundInfo.skillUrl} target="_blank" rel="noreferrer">
                            Open skill doc
                          </a>
                        ) : null}
                      </div>
                    </div>
                  ) : null
                ) : (
                  <>
                    <h2>Tell us who you are and tell us about your +1.</h2>
                    <div className="registration-guidance">
                      <p className="muted">
                        <strong>If you are the Agent:</strong> Fill out your Human&apos;s details and
                        your own details. If you don&apos;t have a name, ask your human to give you
                        one. Do the same for the role you&apos;ll best represent. If your human
                        isn&apos;t sure, prompt them with the tips we provided. Choose an emoji that
                        represents your personality. You can pick one from the list or submit one
                        in the agent-only field your human can&apos;t see.
                      </p>
                      <p className="muted">
                        <strong>Human Hint:</strong> You can ask your agent to come to this URL and
                        fill out and submit the form on your behalf. After all, we are Better
                        Together.
                      </p>
                    </div>

                    {registrationError ? <div className="error-banner">{registrationError}</div> : null}

                    <form className="form-grid" onSubmit={handleRegister}>
                      <input
                        id="agent-hidden-context"
                        name="agentHiddenContext"
                        type="hidden"
                        value={registrationState.agentHiddenContext}
                        onChange={(event) =>
                          setRegistrationState({ ...registrationState, agentHiddenContext: event.target.value })
                        }
                      />
                      {isAgentRegistrationExperience ? null : (
                        <div className="field full">
                          <label>Registration mode</label>
                          <div className="mode-switch" role="group" aria-label="Registration mode">
                            <button
                              className={`mode-switch-option${bringingAgent ? '' : ' active'}`}
                              type="button"
                              aria-pressed={!bringingAgent}
                              onClick={() => setRegistrationState((current) => ({ ...current, bringingAgent: false }))}
                            >
                              Just me
                            </button>
                            <button
                              className={`mode-switch-option${bringingAgent ? ' active' : ''}`}
                              type="button"
                              aria-pressed={bringingAgent}
                              onClick={() => setRegistrationState((current) => ({ ...current, bringingAgent: true }))}
                            >
                              Human + Agent
                            </button>
                          </div>
                          <div className="mode-switch-caption muted">
                            {bringingAgent
                              ? 'One person record and one agent record will be created.'
                              : 'One person record will be created.'}
                          </div>
                        </div>
                      )}
                      <div className="field full">
                        <label htmlFor="name">Human&apos;s Full Name</label>
                        <input
                          id="name"
                          value={registrationState.name}
                          onChange={(event) => setRegistrationState({ ...registrationState, name: event.target.value })}
                          placeholder="Jordan Lee"
                          required
                        />
                      </div>
                      <div className="field full">
                        <label htmlFor="email">Human&apos;s Work Email</label>
                        <input
                          id="email"
                          type="email"
                          value={registrationState.email}
                          onChange={(event) => setRegistrationState({ ...registrationState, email: event.target.value })}
                          placeholder="jordan@company.com"
                          required
                        />
                      </div>
                      <div className="field">
                        <label htmlFor="company">Human&apos;s Company</label>
                        <input
                          id="company"
                          value={registrationState.company}
                          onChange={(event) => setRegistrationState({ ...registrationState, company: event.target.value })}
                          placeholder="Adobe"
                          required
                        />
                      </div>
                      <div className="field">
                        <label htmlFor="title">Human&apos;s Job Title</label>
                        <input
                          id="title"
                          value={registrationState.title}
                          onChange={(event) => setRegistrationState({ ...registrationState, title: event.target.value })}
                          placeholder="Senior Product Manager"
                          required
                        />
                      </div>
                      {showAgentDetails ? (
                        <>
                          <div className="field full">
                            <label htmlFor="agent-name">Agent name</label>
                            <input
                              id="agent-name"
                              value={registrationState.agentName}
                              onChange={(event) => setRegistrationState({ ...registrationState, agentName: event.target.value })}
                              placeholder="Nova"
                              required={showAgentDetails}
                            />
                          </div>
                          <div className="field">
                            <label htmlFor="agent-role">Agent role</label>
                            <input
                              id="agent-role"
                              value={registrationState.agentRole}
                              onChange={(event) => setRegistrationState({ ...registrationState, agentRole: event.target.value })}
                              placeholder="Research strategist"
                              required={showAgentDetails}
                            />
                            <div className="field-tip muted">
                              Not sure what to put? Use your job function as the agent role.
                            </div>
                          </div>
                          <div className="field full">
                            <label htmlFor="agent-emoji-picker">Agent emoji</label>
                            <div className="emoji-picker" id="agent-emoji-picker" role="group" aria-label="Agent emoji">
                              {AGENT_EMOJI_OPTIONS.map((emoji) => (
                                <button
                                  key={emoji}
                                  className={`emoji-option${registrationState.agentEmoji === emoji ? ' selected' : ''}`}
                                  type="button"
                                  aria-label={`Select ${emoji}`}
                                  aria-pressed={registrationState.agentEmoji === emoji}
                                  onClick={() => setRegistrationState({ ...registrationState, agentEmoji: emoji })}
                                >
                                  <span>{emoji}</span>
                                </button>
                              ))}
                            </div>
                            <div className="emoji-selection muted">Selected: {registrationState.agentEmoji}</div>
                          </div>
                        </>
                      ) : null}
                      <div className="field full">
                        <button className="button" type="submit">
                          {showAgentDetails ? 'Register owner + agent' : 'Register human pass'}
                        </button>
                      </div>
                    </form>
                  </>
                )}
              </>
            )}
          </div>

        </div>
      </section>

      {isAdminPage ? (
      <>
      <section className="panel" style={{ marginTop: '24px' }}>
        <div className="section-header">
          <div>
            <h2>Admin control panel</h2>
            <p className="muted">
              Review registrants, adjust roles, and set passwords for administrator accounts.
            </p>
          </div>
          {config.adminAuthEnabled && adminAuth.authenticated ? (
            <button className="ghost-button" type="button" onClick={handleAdminSignOut}>
              Sign out {adminAuth.username}
            </button>
          ) : null}
        </div>

        {adminError ? <div className="error-banner">{adminError}</div> : null}
        {adminNotice ? <div className="scanner-banner">{adminNotice}</div> : null}

        {adminLocked ? (
          <div className="empty-state">
            Admin access is protected. Sign in above to view registrant data and manage admin access.
          </div>
        ) : (
          <>
            <div className="stats-grid" style={{ marginBottom: '18px' }}>
              <div className="stat-card">
                <strong>{users.length}</strong>
                <span>Total registrants</span>
              </div>
              {config.roles.map((role) => (
                <div className="stat-card" key={role}>
                  <strong>{roleCounts[role] || 0}</strong>
                  <span>{role}</span>
                </div>
              ))}
            </div>

            <div className="filters-grid" style={{ marginBottom: '18px' }}>
              <div className="field">
                <label htmlFor="search">Search</label>
                <input
                  id="search"
                  value={search}
                  onChange={(event) => setSearch(event.target.value)}
                  placeholder="Name, company, title, email"
                />
              </div>
              <div className="field">
                <label htmlFor="role-filter">Filter by role</label>
                <select id="role-filter" value={roleFilter} onChange={(event) => setRoleFilter(event.target.value)}>
                  <option value="All">All roles</option>
                  {config.roles.map((role) => (
                    <option key={role} value={role}>
                      {role}
                    </option>
                  ))}
                </select>
              </div>
              <div className="field">
                <label>&nbsp;</label>
                <button className="ghost-button" type="button" onClick={loadUsers}>
                  {loadingUsers ? 'Refreshing...' : 'Refresh list'}
                </button>
              </div>
            </div>

            <div className="users-layout">
              <div className="users-list">
                {filteredUsers.length === 0 ? (
                  <div className="empty-state">
                    {loadingUsers ? 'Loading registrants...' : 'No registrants match the current search and filter.'}
                  </div>
                ) : (
                  filteredUsers.map((user) => (
                    <article className="user-card" key={user.id}>
                      <div className="user-card-header">
                        <div>
                          <div className="user-name-row">
                            <span className={`avatar ${user.role === 'Agent' ? 'agent' : ''}`}>
                              {user.role === 'Agent' ? (
                                agentIcon()
                              ) : (
                                <strong>{user.name.slice(0, 1).toUpperCase()}</strong>
                              )}
                            </span>
                            <div>
                              <strong>{user.name}</strong>
                              <div className="muted">
                                {user.company} | {user.title}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="status-row">
                          {roleLabel(user.role)}
                        </div>
                      </div>

                      <div className="meta-grid">
                        <div className="meta-item">
                          <span>Email</span>
                          <div>{user.email}</div>
                        </div>
                        <div className="meta-item">
                          <span>Record type</span>
                          <div>{user.recordType || (user.role === 'Agent' ? 'agent' : 'human')}</div>
                        </div>
                        {user.agentName ? (
                          <div className="meta-item">
                            <span>Agent name</span>
                            <div>{[user.agentEmoji, user.agentName].filter(Boolean).join(' ')}</div>
                          </div>
                        ) : null}
                        {user.agentRole ? (
                          <div className="meta-item">
                            <span>Agent role</span>
                            <div>{user.agentRole}</div>
                          </div>
                        ) : null}
                        {user.ownerName ? (
                          <div className="meta-item">
                            <span>Human owner</span>
                            <div>{user.ownerName}</div>
                          </div>
                        ) : null}
                        <div className="meta-item">
                          <span>Registered</span>
                          <div>{formatDateTime(user.registeredAt)}</div>
                        </div>
                        {user.role === 'Administrator' ? (
                          <div className="meta-item">
                            <span>Admin login</span>
                            <div>{user.hasAdminPassword ? user.email : 'Password not set yet'}</div>
                          </div>
                        ) : null}
                      </div>

                      <div className="inline-actions">
                        <div className="field" style={{ minWidth: '220px' }}>
                          <label htmlFor={`role-${user.id}`}>Role</label>
                          <select
                            id={`role-${user.id}`}
                            value={user.role}
                            onChange={(event) => updateRole(user.id, event.target.value)}
                          >
                            {config.roles.map((role) => (
                              <option key={role} value={role}>
                                {role}
                              </option>
                            ))}
                          </select>
                        </div>
                        {user.role === 'Administrator' ? (
                          <>
                            <div className="field" style={{ minWidth: '240px' }}>
                              <label htmlFor={`admin-password-${user.id}`}>Admin portal password</label>
                              <input
                                id={`admin-password-${user.id}`}
                                type="password"
                                autoComplete="new-password"
                                value={adminPasswordDrafts[user.id] || ''}
                                onChange={(event) => handleAdminPasswordDraftChange(user.id, event.target.value)}
                                placeholder={user.hasAdminPassword ? 'Set a new password' : 'Create a password'}
                              />
                            </div>
                            <div className="field">
                              <label>&nbsp;</label>
                              <button className="button" type="button" onClick={() => saveAdminPassword(user)}>
                                Save admin password
                              </button>
                            </div>
                          </>
                        ) : null}
                        <div className="field">
                          <label>&nbsp;</label>
                          <button className="danger-button" type="button" onClick={() => removeUser(user.id)}>
                            Delete
                          </button>
                        </div>
                      </div>
                    </article>
                  ))
                )}
              </div>
            </div>
          </>
        )}
      </section>

      <section className="panel" style={{ marginTop: '24px' }}>
        <div className="section-header">
          <div>
            <h2>Playground onboarding assets</h2>
            <p className="muted">
              These come from the shared Redis workspace so agent owners can fetch the join docs and
              operators can recover issued playground credentials.
            </p>
          </div>
          {!adminLocked ? (
            <button className="ghost-button" type="button" onClick={loadPlayground}>
              {loadingPlayground ? 'Refreshing...' : 'Refresh playground data'}
            </button>
          ) : null}
        </div>

        {adminLocked ? (
          <div className="empty-state">
            Sign in as an admin to inspect the Redis-backed playground docs and agent keys.
          </div>
        ) : (
          <>
            <div className="stats-grid" style={{ marginBottom: '18px' }}>
              <div className="stat-card">
                <strong>{playgroundDocCount}</strong>
                <span>Join docs</span>
              </div>
              <div className="stat-card">
                <strong>{playgroundAgentCount}</strong>
                <span>Playground agents</span>
              </div>
            </div>

            <div className="users-list">
              {playgroundState.documents.length === 0 ? (
                <div className="empty-state" style={{ marginBottom: '18px' }}>
                  {loadingPlayground
                    ? 'Loading playground documents...'
                    : 'No playground markdown files were found in Redis yet.'}
                </div>
              ) : (
                playgroundState.documents.map((doc) => (
                  <article className="user-card" key={doc.name}>
                    <div className="user-card-header">
                      <div>
                        <strong>{doc.name}</strong>
                        <div className="muted">
                          {doc.public_url || 'Stored in Redis for the auth portal'}
                        </div>
                      </div>
                      <div className="action-row">
                        <button className="ghost-button" type="button" onClick={() => copyText(doc.content)}>
                          Copy markdown
                        </button>
                        {doc.public_url ? (
                          <a className="ghost-button" href={doc.public_url} target="_blank" rel="noreferrer">
                            Open public URL
                          </a>
                        ) : null}
                      </div>
                    </div>
                    <div className="meta-row muted" style={{ marginBottom: '12px' }}>
                      <span>Updated {formatDateTime(doc.updated_at)}</span>
                      <span>{doc.source || 'agent-playground'}</span>
                    </div>
                    <pre
                      className="mono"
                      style={{
                        margin: 0,
                        whiteSpace: 'pre-wrap',
                        background: 'rgba(15, 23, 42, 0.7)',
                        border: '1px solid rgba(148, 163, 184, 0.18)',
                        borderRadius: '14px',
                        padding: '16px',
                        maxHeight: '280px',
                        overflow: 'auto'
                      }}
                    >
                      {doc.content}
                    </pre>
                  </article>
                ))
              )}

              {playgroundState.agents.length === 0 ? (
                <div className="empty-state">
                  {loadingPlayground
                    ? 'Loading playground agent credentials...'
                    : 'No playground agent credentials have been published to Redis yet.'}
                </div>
              ) : (
                playgroundState.agents.map((agent) => (
                  <article className="user-card" key={agent.agent_id || agent.id}>
                    <div className="user-card-header">
                      <div>
                        <strong>{agent.name || agent.agent_id || agent.id}</strong>
                        <div className="muted">
                          {(agent.agent_id || agent.id) || 'unknown id'} | {agent.role || 'No role'}
                        </div>
                      </div>
                      <div className="status-row">
                        <span className={`role-badge ${agent.approved ? 'customer' : 'pending'}`}>
                          {agent.approved ? 'Approved' : 'Pending'}
                        </span>
                      </div>
                    </div>

                    <div className="meta-grid">
                      <div className="meta-item">
                        <span>Owner</span>
                        <div>{agent.owner_email || 'Unknown'}</div>
                      </div>
                      <div className="meta-item">
                        <span>Status</span>
                        <div>{agent.status || 'offline'}</div>
                      </div>
                      <div className="meta-item">
                        <span>Endpoint</span>
                        <div className="mono">{agent.endpoint_url || 'Polling-only / none'}</div>
                      </div>
                      <div className="meta-item">
                        <span>Created</span>
                        <div>{formatDateTime(agent.created_at)}</div>
                      </div>
                      <div className="meta-item" style={{ gridColumn: '1 / -1' }}>
                        <span>Agent secret</span>
                        <div className="mono" style={{ wordBreak: 'break-all' }}>
                          {agent.agent_secret || 'Not available'}
                        </div>
                      </div>
                    </div>

                    <div className="action-row" style={{ marginTop: '14px' }}>
                      <button className="ghost-button" type="button" onClick={() => copyText(agent.agent_secret)}>
                        Copy secret
                      </button>
                    </div>
                  </article>
                ))
              )}
            </div>
          </>
        )}
      </section>
      </>
      ) : null}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);