<template>
  <div class="login-screen">
    <div class="login-card">
      <div class="login-logo">✈ ⇆ 📡</div>
      <h1>Airport NavCom<br />E-Inspection System</h1>
      <p class="login-sub">Telecommunications &amp; Navigation Division</p>
      <p class="login-hint">Select a role to enter the system.</p>
      
      <div class="role-buttons" v-if="!showTechPicker">
        <button class="role-btn" @click="showTechPicker = true">
          <span class="role-icon">🔧</span><span class="role-name">Login as Technician</span>
          <span class="role-desc">View tasks, run checklists, report findings</span>
        </button>
        <button class="role-btn" @click="loginRole('supervisor')">
          <span class="role-icon">🗂️</span><span class="role-name">Login as Supervisor</span>
          <span class="role-desc">Schedule, assign, validate, manage findings</span>
        </button>
        <button class="role-btn" @click="loginRole('management')">
          <span class="role-icon">📊</span><span class="role-name">Login as Management</span>
          <span class="role-desc">KPIs, trends, reports (read-only)</span>
        </button>
        <button class="role-btn" @click="loginRole('administrator')">
          <span class="role-icon">⚙️</span><span class="role-name">Login as Administrator</span>
          <span class="role-desc">Manage users, equipment &amp; checklists</span>
        </button>
      </div>

      <div class="tech-picker" v-if="showTechPicker">
        <div class="field" style="width: 100%; text-align: left; max-width: 400px;">
          <label>Sign in as which technician?</label>
          <select v-model="selectedTech">
            <option :value="null" disabled>— Choose a technician —</option>
            <option v-for="tech in techs" :key="tech.id" :value="tech.id">
              {{ tech.name }}
            </option>
          </select>
        </div>
        <div class="modal-actions" style="width: 100%; border: none; margin-top: 0; justify-content: center;">
          <button class="btn-sm" @click="showTechPicker = false">Back</button>
          <button class="btn-primary" @click="login(selectedTech)" :disabled="!selectedTech">Enter System</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { router } from '@inertiajs/vue3'

const props = defineProps({
  users: Array
})

const showTechPicker = ref(false)
const selectedTech = ref(null)

const techs = computed(() => props.users.filter(u => u.role === 'technician'))

const loginRole = (role) => {
  const user = props.users.find(u => u.role === role)
  if (user) {
    login(user.id)
  }
}

const login = (userId) => {
  router.post(window.route('login'), { user_id: userId })
}
</script>
