<script setup lang="ts">
import { ref } from 'vue'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

interface Props {
  open: boolean
  tenantId: string
  tenantName?: string
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'update:open': [value: boolean]
  'created': [user: any]
}>()

const { api } = useApi()
const { toast } = useToast()

const formData = ref({
  email: '',
  password: '',
  firstName: '',
  lastName: '',
})

const saving = ref(false)

const handleSubmit = async () => {
  if (!formData.value.email || !formData.value.password) {
    toast.error('Email and password are required')
    return
  }

  saving.value = true
  try {
    const response = await api.post(`/central/tenants/${props.tenantId}/users`, formData.value)
    toast.success('User created successfully')
    emit('created', response)
    emit('update:open', false)
    
    // Reset form
    formData.value = {
      email: '',
      password: '',
      firstName: '',
      lastName: '',
    }
  } catch (error: any) {
    console.error('Error creating user:', error)
    toast.error(error.message || 'Failed to create user')
  } finally {
    saving.value = false
  }
}

const handleCancel = () => {
  emit('update:open', false)
  // Reset form
  formData.value = {
    email: '',
    password: '',
    firstName: '',
    lastName: '',
  }
}
</script>

<template>
  <Dialog :open="open" @update:open="(val) => emit('update:open', val)">
    <DialogContent class="sm:max-w-[500px]">
      <DialogHeader>
        <DialogTitle>Create Tenant User</DialogTitle>
        <DialogDescription v-if="tenantName">
          Add a new user to {{ tenantName }}
        </DialogDescription>
      </DialogHeader>
      
      <div class="grid gap-4 py-4">
        <div class="grid gap-2">
          <Label for="email">Email *</Label>
          <Input
            id="email"
            v-model="formData.email"
            type="email"
            placeholder="user@example.com"
            required
          />
        </div>
        
        <div class="grid gap-2">
          <Label for="password">Password *</Label>
          <Input
            id="password"
            v-model="formData.password"
            type="password"
            placeholder="Enter password"
            required
          />
        </div>
        
        <div class="grid gap-2">
          <Label for="firstName">First Name</Label>
          <Input
            id="firstName"
            v-model="formData.firstName"
            type="text"
            placeholder="John"
          />
        </div>
        
        <div class="grid gap-2">
          <Label for="lastName">Last Name</Label>
          <Input
            id="lastName"
            v-model="formData.lastName"
            type="text"
            placeholder="Doe"
          />
        </div>
      </div>
      
      <DialogFooter>
        <Button variant="outline" @click="handleCancel" :disabled="saving">
          Cancel
        </Button>
        <Button @click="handleSubmit" :disabled="saving">
          {{ saving ? 'Creating...' : 'Create User' }}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
