<template>
  <div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8">
    <div class="flex flex-col items-center justify-center space-y-8 max-w-4xl mx-auto w-full">
      <!-- Welcome Section -->
      <div class="text-center space-y-6">
        <div class="flex justify-center">
          <img src="@/assets/logo.png" alt="Logo" class="h-36 w-36 sm:h-48 sm:w-48 md:h-60 md:w-60" />
        </div>
        <div class="space-y-4">
          <h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
          <p class="text-xl text-muted-foreground max-w-md mx-auto">
            Your secure platform for events and community management
          </p>
        </div>
      </div>

      <!-- Demo Account Creation Card -->
      <Card class="w-full max-w-md">
        <CardContent class="p-8 space-y-6">
          <!-- Demo Badge -->
          <div class="flex justify-center">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
              <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
              <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
            </div>
          </div>

          <!-- Mode Toggle -->
          <div class="flex justify-center">
            <div class="inline-flex rounded-lg bg-muted p-1">
              <Button
                variant="ghost"
                size="sm"
                :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
                @click="activeMode = 'demo'"
              >
                Demo Account
              </Button>
              <Button
                variant="ghost"
                size="sm"
                :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
                @click="activeMode = 'login'"
              >
                Sign In
              </Button>
            </div>
          </div>

          <!-- Demo Mode Content -->
          <div v-if="activeMode === 'demo'" class="space-y-6">
            <!-- Demo Info -->
            <div class="text-center space-y-3">
              <h2 class="text-2xl font-semibold">Create Demo Account</h2>
              <p class="text-muted-foreground text-sm leading-relaxed">
                Get instant access with a pre-funded demo account containing 
                <span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
              </p>
            </div>

            <!-- Generated Credentials Display -->
            <div v-if="generatedCredentials" class="space-y-4 p-4 bg-muted/50 rounded-lg border">
              <div class="space-y-3">
                <div class="space-y-2">
                  <Label class="text-sm font-medium">Username</Label>
                  <div class="flex items-center gap-2">
                    <Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
                    <Button 
                      variant="outline" 
                      size="sm" 
                      @click="copyToClipboard(generatedCredentials.username)"
                      class="shrink-0"
                    >
                      Copy
                    </Button>
                  </div>
                </div>
                <div class="space-y-2">
                  <Label class="text-sm font-medium">Password</Label>
                  <div class="flex items-center gap-2">
                    <Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
                    <Button 
                      variant="outline" 
                      size="sm" 
                      @click="copyToClipboard(generatedCredentials.password)"
                      class="shrink-0"
                    >
                      Copy
                    </Button>
                  </div>
                </div>
              </div>
              <div class="text-xs text-muted-foreground text-center">
                These credentials will be used to automatically log you in
              </div>
            </div>

            <!-- Create Account Button -->
            <Button 
              @click="createFakeAccount" 
              :disabled="isLoading" 
              class="w-full h-12 text-lg font-medium"
              size="lg"
            >
              <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
              {{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
            </Button>
          </div>

          <!-- Login Mode Content -->
          <div v-else class="space-y-6">
            <!-- Login Info -->
            <div class="text-center space-y-3">
              <h2 class="text-2xl font-semibold">Sign In</h2>
              <p class="text-muted-foreground text-sm leading-relaxed">
                Sign in to your existing account
              </p>
            </div>

            <!-- Login Form -->
            <div class="space-y-4">
              <div class="space-y-2">
                <Label for="login-username">Username or Email</Label>
                <Input 
                  id="login-username" 
                  v-model="loginForm.username" 
                  placeholder="Enter your username or email"
                  @keydown.enter="handleLogin"
                />
              </div>
              <div class="space-y-2">
                <Label for="login-password">Password</Label>
                <Input 
                  id="login-password" 
                  type="password" 
                  v-model="loginForm.password" 
                  placeholder="Enter your password"
                  @keydown.enter="handleLogin"
                />
              </div>
            </div>

            <!-- Login Button -->
            <Button 
              @click="handleLogin" 
              :disabled="isLoading || !canLogin" 
              class="w-full h-12 text-lg font-medium"
              size="lg"
            >
              <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
              {{ isLoading ? 'Signing In...' : 'Sign In' }}
            </Button>
          </div>

          <!-- Error Display -->
          <p v-if="error" class="text-sm text-destructive text-center">
            {{ error }}
          </p>

          <!-- Success Message -->
          <div v-if="successMessage" class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
            {{ successMessage }}
          </div>

          <!-- Demo Notice -->
          <div class="text-center space-y-2">
            <p class="text-xs text-muted-foreground">
              This is a demo environment. All transactions use fake satoshis for testing purposes.
            </p>
            <div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
              </svg>
              <span class="font-medium">Demo data may be erased at any time</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { auth } from '@/composables/useAuth'
import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
import { toast } from 'vue-sonner'

const router = useRouter()
const { isLoading, error, generatedCredentials, generateNewCredentials } = useDemoAccountGenerator()
const successMessage = ref('')
const activeMode = ref<'demo' | 'login'>('demo')

// Login form
const loginForm = ref({
  username: '',
  password: ''
})

const canLogin = computed(() => {
  return loginForm.value.username.trim() && loginForm.value.password.trim()
})

// Copy text to clipboard
async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text)
    toast.success('Copied to clipboard!')
  } catch (err) {
    toast.error('Failed to copy to clipboard')
  }
}

// Create fake account and automatically log in
async function createFakeAccount() {
  try {
    isLoading.value = true
    error.value = ''
    successMessage.value = ''

    // Generate credentials
    const credentials = generateNewCredentials()

    // Register the fake account
    await auth.register({
      username: credentials.username,
      email: credentials.email,
      password: credentials.password,
      password_repeat: credentials.password
    })

    successMessage.value = 'Account created successfully! Logging you in...'
    toast.success('Demo account created and logged in!')

    // Redirect to home page after successful registration
    setTimeout(() => {
      router.push('/')
    }, 1500)

  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Failed to create demo account'
    toast.error('Failed to create demo account. Please try again.')
  } finally {
    isLoading.value = false
  }
}

// Login with existing credentials
async function handleLogin() {
  if (!canLogin.value) return

  try {
    isLoading.value = true
    error.value = ''
    successMessage.value = ''

    await auth.login({
      username: loginForm.value.username,
      password: loginForm.value.password
    })

    successMessage.value = 'Login successful! Redirecting...'
    toast.success('Login successful!')

    // Redirect to home page after successful login
    setTimeout(() => {
      router.push('/')
    }, 1500)

  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Login failed'
    toast.error('Login failed. Please check your credentials.')
  } finally {
    isLoading.value = false
  }
}
</script>
