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

import { getEnvironmentName } from '../../services/apiEndpointHelpers'
import { DocsTemplate } from '../../../.storybook'

export const Example = (): React.JSX.Element => {
  const environment = getEnvironmentName()

  // Example with custom detectors
  const customEnvironment = getEnvironmentName({
    customDetectors: [
      {
        name: 'development',
        matcher: (hostname) => hostname.includes('my-custom-dev.com'),
      },
    ],
  })

  // Example with fallback environment
  const fallbackEnvironment = getEnvironmentName({
    fallbackEnvironment: 'development',
  })

  return (
    <div>
      <p>
        Default environment detection: <strong>{environment}</strong>
      </p>
      <p>
        Custom detector example: <strong>{customEnvironment}</strong>
      </p>
      <p>
        Fallback environment example: <strong>{fallbackEnvironment}</strong>
      </p>
    </div>
  )
}
Example.storyName = 'getEnvironmentName'

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

// Default usage - uses built-in hostname detection
const environment = getEnvironmentName()
console.log(environment) // Output: 'development', 'stage', 'demo', or 'production'

// Custom environment detection for one-off cases
const customEnv = getEnvironmentName({
  customDetectors: [
    {
      name: 'development',
      matcher: (hostname) => hostname.includes('my-feature-branch.vercel.app')
    },
    {
      name: 'demo',
      matcher: (hostname) => hostname.includes('tenant1.demo.com')
    }
  ]
})

// Override fallback environment
const envWithFallback = getEnvironmentName({
  fallbackEnvironment: 'development'
})

// Combine custom detectors with fallback
const advancedEnv = getEnvironmentName({
  customDetectors: [
    {
      name: 'stage',
      matcher: (hostname) => hostname.includes('temp-staging.com')
    }
  ],
  fallbackEnvironment: 'development'
})`}
            description="A flexible utility function that determines the current environment by analyzing the application's hostname. Now supports extensive customization options for one-off cases, allowing custom environment detection without modifying the core library."
            infoBullets={[
              <span key='core-functionality'>
                Core features:
                <ul>
                  <li>
                    Automatically detects environment based on hostname patterns
                    using array-driven approach
                  </li>
                  <li>
                    Supports custom environment detectors for temporary or
                    special cases
                  </li>
                  <li>
                    Configurable fallback environment when no patterns match
                  </li>
                  <li>Client-side safe with server-side compatibility</li>
                </ul>
              </span>,
              <span key='environments'>
                Default environment detection patterns:
                <ul>
                  <li>
                    <code>development</code>: localhost, 127.0.0.1, and
                    chromatic.com
                  </li>
                  <li>
                    <code>stage</code>: URLs containing 'staging',
                    '-stage.pattern.com', or '-stage.patternasia.com.cn'
                  </li>
                  <li>
                    <code>demo</code>: Specifically for 'demo.usepredict.com'
                  </li>
                  <li>
                    <code>production</code>: Default fallback for all other
                    cases
                  </li>
                </ul>
              </span>,
              <span key='configuration-options'>
                Configuration options:
                <ul>
                  <li>
                    <code>customDetectors</code>: Array of custom environment
                    detectors checked before default logic
                  </li>
                  <li>
                    <code>fallbackEnvironment</code>: Environment to return when
                    no detectors match (default: 'production')
                  </li>
                  <li>
                    Custom detectors use matcher functions for flexible hostname
                    pattern matching
                  </li>
                  <li>Detectors are evaluated in order - first match wins</li>
                </ul>
              </span>,
              <span key='use-cases'>
                Common use cases:
                <ul>
                  <li>Configuring API endpoints per environment</li>
                  <li>Enabling/disabling features based on environment</li>
                  <li>Setting environment-specific defaults</li>
                  <li>Temporary environment detection for feature branches</li>
                  <li>Multi-tenant environment detection</li>
                  <li>Testing with forced environment configurations</li>
                </ul>
              </span>,
              <span key='benefits'>
                Benefits of the enhanced approach:
                <ul>
                  <li>
                    <strong>No Library Modifications</strong>: Handle one-off
                    cases without changing core code
                  </li>
                  <li>
                    <strong>Backward Compatible</strong>: Existing code
                    continues to work unchanged
                  </li>
                  <li>
                    <strong>Type Safe</strong>: Full TypeScript support with
                    proper type checking
                  </li>
                  <li>
                    <strong>Maintainable</strong>: Array-driven approach makes
                    adding/removing environments easier
                  </li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>