from fasthtml.components import *


class RegisterPage:
  def __init__(self, error_message: str = None):
    self.error_message = error_message
  
  def register_page(self, error_message: str):
    self.error_message = error_message
    return self.__ft__()
  
  def __ft__(self):
    """
       Create the registration page.

       Args:
           error_message: Optional error message to display

       Returns:
           Components representing the registration page
       """
    # Create alert for error message
    error_alert = None
    if self.error_message:
      error_alert = Div(
        P(self.error_message, cls="text-sm"),
        cls="bg-soft bg-error border border-red-400 text-red-700 px-4 py-3 rounded mb-4"
      )
    
    return Div(
      # Page title
      H1("Create an Account", cls="text-3xl font-bold text-center mb-6"),
      
      # Registration Form
      Div(
        # Error alert
        error_alert if error_alert else "",
        
        Form(
          # Username field
          Div(
            Label("Username", For="username", cls="block text-sm font-medium text-gray-700 mb-1"),
            Input(
              type="text",
              id="username",
              name="username",
              placeholder="Choose a username",
              required=True,
              minlength=3,
              maxlength=30,
              pattern="[a-zA-Z0-9_-]+",
              cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
            ),
            P("Only letters, numbers, underscores, and hyphens", cls="text-xs text-gray-500 mt-1"),
            cls="mb-4"
          ),
          
          # Email field
          Div(
            Label("Email", For="email", cls="block text-sm font-medium text-gray-700 mb-1"),
            Input(
              type="email",
              id="email",
              name="email",
              placeholder="you@example.com",
              required=True,
              cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
            ),
            cls="mb-4"
          ),
          
          # Password field
          Div(
            Label("Password", For="password", cls="block text-sm font-medium text-gray-700 mb-1"),
            Input(
              type="password",
              id="password",
              name="password",
              placeholder="Create a password",
              required=True,
              minlength=8,
              cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
            ),
            P("At least 8 characters with uppercase, lowercase, and number", cls="text-xs text-gray-500 mt-1"),
            cls="mb-4"
          ),
          
          # Confirm password field
          Div(
            Label("Confirm Password", For="confirm_password", cls="block text-sm font-medium text-gray-700 mb-1"),
            Input(
              type="password",
              id="confirm_password",
              name="confirm_password",
              placeholder="Confirm your password",
              required=True,
              cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
            ),
            cls="mb-6"
          ),
          
          # Submit button
          Button(
            "Create Account",
            type="submit",
            cls="btn w-full font-bold py-2 px-4 rounded"
          ),
          
          # Registration link
          Div(
            P(
              "Already have an account? ",
              A("Sign in here", href="/login", cls="text-blue-600 hover:underline"),
              cls="text-sm text-gray-600 text-center"
            )
          ),
          
          action="register-p",
          method="post",
          cls="mb-6"
        ),
        
        cls="p-8 rounded-lg shadow-2xl max-w-md mx-auto"
      )
    )