import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { useAuth0 } from '@auth0/auth0-react'
import axios from 'axios'

interface TenantInfo {
  id: string
  name: string
  status: string
}

const TenantSignup: React.FC = () => {
  const { tenantId } = useParams<{ tenantId: string }>()
  const { loginWithRedirect } = useAuth0()
  const [tenant, setTenant] = useState<TenantInfo | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchTenant = async () => {
      try {
        const response = await axios.get(
          `${import.meta.env.VITE_TENANTS_API_URL}/api/v1/tenants/${tenantId}`
        )
        setTenant(response.data)
      } catch (err) {
        setError('Tenant not found or not accepting signups')
      } finally {
        setLoading(false)
      }
    }

    if (tenantId) {
      fetchTenant()
    }
  }, [tenantId])

  const handleSignup = async () => {
    await loginWithRedirect({
      authorizationParams: {
        screen_hint: 'signup',
        redirect_uri: `${window.location.origin}/callback`
      }
    })
  }

  if (loading) {
    return <div style={{ padding: '2rem' }}>Loading...</div>
  }

  if (error || !tenant) {
    return (
      <div style={{ padding: '2rem', textAlign: 'center' }}>
        <h2>Tenant Not Found</h2>
        <p>{error}</p>
        <a href="/">Return to Homepage</a>
      </div>
    )
  }

  return (
    <div style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto', fontFamily: 'Arial, sans-serif' }}>
      <header style={{ textAlign: 'center', marginBottom: '2rem' }}>
        <h1>Join {tenant.name}</h1>
        <p>Create your account to get started</p>
      </header>

      <main>
        <div style={{ 
          border: '1px solid #ddd', 
          borderRadius: '8px', 
          padding: '2rem', 
          backgroundColor: '#f9f9f9' 
        }}>
          <h3>What happens next?</h3>
          <ol>
            <li>Create your account with Auth0</li>
            <li>Your signup request will be sent to the tenant administrator</li>
            <li>Once approved, you'll receive access to {tenant.name}</li>
            <li>Login at <code>{tenant.id}.motovaultpro.com</code></li>
          </ol>

          <div style={{ textAlign: 'center', marginTop: '2rem' }}>
            <button 
              onClick={handleSignup}
              style={{
                padding: '1rem 2rem',
                fontSize: '1.1rem',
                backgroundColor: '#28a745',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              Create Account for {tenant.name}
            </button>
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: '2rem' }}>
          <a href="/">← Back to Homepage</a>
        </div>
      </main>
    </div>
  )
}

export default TenantSignup