import React from 'react'
import { type Meta } from '@storybook/react-vite'

import { DocsTemplate } from '../../../.storybook'

export const Example = (): React.JSX.Element => {
  return (
    <div>
      <p>
        <strong>exchangeGlobalToken</strong> is an async helper function that
        exchanges an Auth0 id token with the adminczar global token exchange
        endpoint.
      </p>
      <p>
        This function allows all frontend applications to reuse the same global
        token exchange logic without redirecting users to the Admin frontend
        application.
      </p>
      <p>
        <em>
          Note: This function makes an API call and cannot be demonstrated
          interactively in Storybook.
        </em>
      </p>
    </div>
  )
}
Example.storyName = 'exchangeGlobalToken'

export default {
  title: 'Helper Functions/exchangeGlobalToken',
  component: Example,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { exchangeGlobalToken } from '@patterninc/react-ui'

// Basic usage - exchange token after Auth0 authentication
const result = await exchangeGlobalToken(idToken)

if (result.success) {
  // Global token exchange successful
  console.log(result.userProfile) // All JWT claims from access token
  console.log(result.idToken)     // Id token
  console.log(result.expiresAt)   // Expiration time in milliseconds

  // Store in localStorage
  localStorage.setItem('user', JSON.stringify(result.userProfile))
  localStorage.setItem('expires_at', result.expiresAt.toString())
} else {
  // Handle error
  console.error(result.error) // 'invalid_token', 'unauthorized', 'exchange_failed', or 'exchange_error'
  console.error(result.status) // HTTP status code if available
}

// With custom headers
const result = await exchangeGlobalToken(idToken, {
  headers: { 'X-Custom-Header': 'value' }
})

// With custom API base URL
const result = await exchangeGlobalToken(idToken, {
  apiBaseUrl: 'https://custom-api.example.com'
})`}
            description='A shared helper function that exchanges an Auth0 id token with the adminczar global token exchange endpoint. This allows all frontend applications to reuse the same token exchange logic without redirecting users to the Admin frontend application.'
            infoBullets={[
              <span key='parameters'>
                Parameters:
                <ul>
                  <li>
                    <code>idToken</code> (required): The Auth0 id token to
                    exchange
                  </li>
                  <li>
                    <code>options</code> (optional): Configuration object with:
                    <ul>
                      <li>
                        <code>headers</code>: Additional headers to include in
                        the request
                      </li>
                      <li>
                        <code>apiBaseUrl</code>: Custom API base URL (defaults
                        to adminczar API prefix)
                      </li>
                    </ul>
                  </li>
                </ul>
              </span>,
              <span key='response'>
                Response (TokenExchangeResponse):
                <ul>
                  <li>
                    <code>success</code>: Boolean indicating if the exchange was
                    successful
                  </li>
                  <li>
                    <code>userProfile</code>: All JWT claims decoded from the
                    access token (sub, exp, iat, email, name, etc.)
                  </li>
                  <li>
                    <code>idToken</code>: id token
                  </li>
                  <li>
                    <code>expiresAt</code>: Token expiration time in
                    milliseconds since epoch
                  </li>
                  <li>
                    <code>error</code>: Error type if failed
                    (&apos;invalid_token&apos;, &apos;unauthorized&apos;,
                    &apos;exchange_failed&apos;, &apos;exchange_error&apos;)
                  </li>
                  <li>
                    <code>status</code>: HTTP status code if available
                  </li>
                </ul>
              </span>,
              <span key='error-handling'>
                Error handling:
                <ul>
                  <li>
                    <code>invalid_token</code>: The provided idToken is not a
                    valid JWT
                  </li>
                  <li>
                    <code>unauthorized</code>: API returned 401 status
                  </li>
                  <li>
                    <code>exchange_failed</code>: API returned non-200 status,
                    or access_token missing/invalid in response
                  </li>
                  <li>
                    <code>exchange_error</code>: Network or other error occurred
                  </li>
                </ul>
              </span>,
              <span key='usage'>
                Common usage pattern:
                <ul>
                  <li>
                    Call this function after Auth0 returns the id_token in the
                    URL hash
                  </li>
                  <li>
                    Store the returned userProfile, expiresAt in localStorage
                  </li>
                  <li>
                    Use the userProfile to set the authenticated user in your
                    app context
                  </li>
                </ul>
              </span>,
              <span key='compatible-apps'>
                Compatible applications:
                <ul>
                  <li>admin</li>
                  <li>connect</li>
                  <li>navigator</li>
                  <li>predict</li>
                  <li>shelf</li>
                  <li>toggle</li>
                </ul>
                <em>
                  Note: pxm and pi apps use server-side authentication and
                  cannot use this helper.
                </em>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>