// Shared MFA secret display — QR tab + Manual tab with copy button.
// Loaded before auth-screen.jsx and profile-panel.jsx.

const MfaSecretDisplay = ({ qrCode, secret, size = 160 }) => {
  const [tab,    setTab]    = React.useState('qr');
  const [copied, setCopied] = React.useState(false);

  const copy = () => {
    navigator.clipboard.writeText(secret).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }).catch(() => {});
  };

  const tabBtn = (id, label) => (
    <button
      onClick={() => setTab(id)}
      style={{
        flex: 1, padding: '7px 0', fontSize: 12.5, fontWeight: 500,
        border: 'none', borderRadius: 7, cursor: 'pointer', transition: 'all 0.15s',
        background: tab === id ? 'var(--ink)' : 'transparent',
        color: tab === id ? 'white' : 'var(--ink-3)',
      }}
    >{label}</button>
  );

  return (
    <div style={{ marginBottom: 14 }}>
      {/* Tab bar */}
      <div style={{
        display: 'flex', gap: 4, padding: 4,
        background: 'var(--surface-2)', borderRadius: 10,
        border: '1px solid var(--line)', marginBottom: 14,
      }}>
        {tabBtn('qr',     '📷  Scan QR code')}
        {tabBtn('manual', '⌨️  Enter manually')}
      </div>

      {tab === 'qr' ? (
        <div>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}>
            <div style={{ padding: 10, background: 'white', borderRadius: 12, border: '1px solid var(--line)', display: 'inline-block' }}>
              <img src={qrCode} alt="MFA QR code" style={{ width: size, height: size, display: 'block' }}/>
            </div>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-4)', textAlign: 'center', lineHeight: 1.5 }}>
            Open your authenticator app and tap the <strong>+</strong> or <strong>Scan</strong> button, then point your camera at this code.
          </div>
        </div>
      ) : (
        <div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginBottom: 10, lineHeight: 1.6 }}>
            In your authenticator app choose <strong style={{color:'var(--ink)'}}>Enter setup key</strong> or <strong style={{color:'var(--ink)'}}>Manual entry</strong>, then paste this code:
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '10px 12px',
            background: 'var(--surface-2)', borderRadius: 8, border: '1px solid var(--line)',
          }}>
            <div style={{
              flex: 1, fontFamily: 'monospace', fontSize: 13,
              letterSpacing: '0.1em', wordBreak: 'break-all',
              color: 'var(--ink)', lineHeight: 1.6,
            }}>
              {secret}
            </div>
            <button
              onClick={copy}
              title="Copy to clipboard"
              style={{
                flexShrink: 0, padding: '6px 10px', borderRadius: 7,
                border: '1px solid var(--line)', background: copied ? 'var(--mint-soft)' : 'var(--surface)',
                color: copied ? 'var(--mint-deep)' : 'var(--ink-3)',
                fontSize: 12, fontWeight: 500, cursor: 'pointer', transition: 'all 0.15s',
              }}
            >
              {copied ? '✓ Copied' : 'Copy'}
            </button>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-4)', marginTop: 8, lineHeight: 1.5 }}>
            Select <em>Time-based</em> if asked for the key type.
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { MfaSecretDisplay });