import { useSite } from '../contexts/SiteContext.jsx'

// The published sign-ins, on the sign-in pages of the public demo
// (DEMO_MODE.md §4). They are public by design — printed here and on
// runicgateway.com/beta — so "Use" fills the form rather than making anyone
// copy a password. Renders nothing off the demo.
export default function DemoLogins({ onPick }) {
  const { settings } = useSite()
  const logins = settings.demo?.logins || []
  if (logins.length === 0) return null

  return (
    <section
      aria-label="Demo sign-ins"
      className="sans"
      style={{
        marginTop: 18,
        padding: '14px 16px',
        border: '1px solid var(--line)',
        borderRadius: 10,
        fontSize: '0.84rem',
        // Opaque: the admin sign-in page draws it over the hero image.
        background: 'var(--bg-deep)',
      }}
    >
      <p style={{ margin: '0 0 10px', color: 'var(--head)' }}>
        <strong>Demo sign-ins</strong> <span style={{ color: 'var(--dim)' }}>— shared by everyone, reset every wipe</span>
      </p>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <tbody>
          {logins.map((l) => (
            <tr key={l.username}>
              <td style={{ padding: '5px 0', verticalAlign: 'middle' }}>
                <div style={{ color: 'var(--head)', whiteSpace: 'nowrap' }}>{l.username}</div>
                <div style={{ color: 'var(--dim)', fontFamily: 'monospace', fontSize: '0.78rem', wordBreak: 'break-all' }}>
                  {l.password}
                </div>
              </td>
              <td style={{ padding: '5px 8px', color: 'var(--dim)', verticalAlign: 'middle' }}>{l.role}</td>
              <td style={{ padding: '5px 0', textAlign: 'right', verticalAlign: 'middle' }}>
                <button type="button" className="btn btn-ghost" style={{ padding: '3px 10px', fontSize: '0.8rem' }} onClick={() => onPick(l.username, l.password)}>
                  Use
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  )
}