<script setup lang="ts">
import { ref } from 'vue'
import { authService } from '@/services/authService'

const { onToggle, onSuccess } = defineProps<{
  onToggle: () => void,
  onSuccess: () => void
}>()

// Form data
const fullName = ref('')
const email = ref('')
const password = ref('')

const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const handleRegister = async () => {
  isLoading.value = true
  errorMessage.value = ''
  
  try {
    await authService.registerPassenger({
      full_name: fullName.value,
      email: email.value,
      password: password.value
    })
    
    successMessage.value = 'Registro exitoso. Ya puedes iniciar sesión.'
    setTimeout(() => {
      onSuccess() // Back to login
    }, 2000)
  } catch (error: any) {
    errorMessage.value = error.response?.data?.detail || 'Error al registrarse'
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <div class="register-form">
    <h2 class="auth-title">Registrarse</h2>
    
    <div class="form-scroll-container">
      <form @submit.prevent="handleRegister" class="form-container">
        <!-- Common Fields -->
        <div class="form-group">
          <label>Nombre Completo</label>
          <input type="text" v-model="fullName" placeholder="Juan Pérez" required />
        </div>
        
        <div class="form-group">
          <label>Correo Electrónico</label>
          <input type="email" v-model="email" placeholder="juan@correo.com" required />
        </div>
        
        <div class="form-group">
          <label>Contraseña</label>
          <input type="password" v-model="password" placeholder="********" required />
        </div>

        <p v-if="errorMessage" class="error-text">{{ errorMessage }}</p>
        <p v-if="successMessage" class="success-text">{{ successMessage }}</p>
        
        <button type="submit" class="auth-button" :disabled="isLoading">
          <span v-if="isLoading">Cargando...</span>
          <span v-else>Registrarse</span>
        </button>
      </form>
    </div>
    
    <div class="auth-footer">
      <p>¿Ya tienes cuenta? <a @click.prevent="onToggle" href="#">Inicia sesión</a></p>
    </div>
  </div>
</template>

<style scoped>
.register-form {
  width: 100%;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text-primary);
  text-align: center;
}

.role-selection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selection-detail {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.role-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.role-card {
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-secondary);
}

.role-card:hover {
  border-color: var(--accent-color);
  transform: translateY(-4px);
  background: var(--hover-bg);
}

.role-card .material-icons {
  font-size: 32px;
  color: var(--accent-color);
  margin-bottom: 8px;
}

.role-card h3 {
  font-size: 16px;
  margin: 4px 0;
  color: var(--text-primary);
}

.role-card p {
  font-size: 12px;
  color: var(--text-secondary);
}

.form-scroll-container {
  max-height: 450px;
  overflow-y: auto;
  padding-right: 8px;
}

/* Custom Scrollbar */
.form-scroll-container::-webkit-scrollbar {
  width: 4px;
}
.form-scroll-container::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}

.back-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 16px;
}

.vehicle-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 20px;
}

.vehicle-tabs button {
  flex: 1;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.vehicle-tabs button.active {
  background: var(--card-bg);
  color: var(--accent-color);
  box-shadow: 0 2px 4px var(--shadow);
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

input {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 16px;
}

input[type="file"] {
  font-size: 12px;
  padding: 8px;
}

.auth-button {
  margin-top: 12px;
  padding: 14px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.error-text { color: #ef5350; font-size: 14px; }
.success-text { color: #4caf50; font-size: 14px; font-weight: 600; }

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-footer a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
</style>
