<template>
  <div class="debug-page">
    <h1>🚨 DEBUG VIEW - RAW STATE INSPECTOR</h1>
    
    <div class="credentials">
      <h2>Test Credentials</h2>
      <p><strong>Email:</strong> tester_pro@profibot.hu</p>
      <p><strong>Password:</strong> Password123!</p>
      <p class="note">Use these credentials to test the login flow</p>
    </div>

    <div class="actions">
      <h2>Auth Store Actions</h2>
      <div class="button-group">
        <button @click="triggerLogin" :disabled="false">
          🔐 Trigger Login (tester_pro@profibot.hu)
        </button>
        
        <button @click="fetchUserProfile" :disabled="!authStore.isLoggedIn">
          👤 Fetch User Profile
        </button>
        
        <button @click="fetchVehicles" :disabled="!authStore.isLoggedIn">
          🚗 Fetch Vehicles (Garage)
        </button>
        
        <button @click="clearState">
          🗑️ Clear All State
        </button>
      </div>
      
      <div class="status">
        <p><strong>Status:</strong> {{ statusMessage }}</p>
      </div>
    </div>

    <div class="grid">
      <!-- Auth Store State -->
      <div class="panel">
        <h2>🔐 Auth Store State</h2>
        <div class="state-info">
          <p><span class="label">isLoggedIn:</span> <span :class="authStore.isLoggedIn ? 'yes' : 'no'">{{ authStore.isLoggedIn ? 'YES' : 'NO' }}</span></p>
          <p><span class="label">isAdmin:</span> <span :class="authStore.isAdmin ? 'yes' : 'no'">{{ authStore.isAdmin ? 'YES' : 'NO' }}</span></p>
          <p><span class="label">isTester:</span> <span :class="authStore.isTester ? 'yes' : 'no'">{{ authStore.isTester ? 'YES' : 'NO' }}</span></p>
        </div>
        
        <h3>Raw JSON State:</h3>
        <pre>{{ authStoreJSON }}</pre>
      </div>

      <!-- Garage Store State -->
      <div class="panel">
        <h2>🚗 Garage Store State</h2>
        <div class="state-info">
          <p><span class="label">Vehicles Count:</span> {{ garageStore.vehicles ? garageStore.vehicles.length : 0 }}</p>
          <p><span class="label">Loading:</span> {{ garageStore.loading ? 'YES' : 'NO' }}</p>
        </div>
        
        <h3>Raw JSON State:</h3>
        <pre>{{ garageStoreJSON }}</pre>
      </div>
    </div>

    <!-- LocalStorage Inspection -->
    <div class="panel">
      <h2>💾 LocalStorage Inspection</h2>
      <div class="storage-grid">
        <div class="storage-item">
          <div class="storage-label">token</div>
          <div class="storage-value">{{ localStorage.token ? `${localStorage.token.substring(0, 30)}...` : '(empty)' }}</div>
        </div>
        <div class="storage-item">
          <div class="storage-label">user_email</div>
          <div class="storage-value">{{ localStorage.user_email || '(empty)' }}</div>
        </div>
        <div class="storage-item">
          <div class="storage-label">is_admin</div>
          <div class="storage-value">{{ localStorage.is_admin || '(empty)' }}</div>
        </div>
        <div class="storage-item">
          <div class="storage-label">user_role</div>
          <div class="storage-value">{{ localStorage.user_role || '(empty)' }}</div>
        </div>
      </div>
      
      <button @click="refreshLocalStorage">
        🔄 Refresh LocalStorage
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/authStore'
import { useGarageStore } from '@/stores/garageStore'

const authStore = useAuthStore()
const garageStore = useGarageStore()

const statusMessage = ref('Ready')
const localStorage = ref({})

// Computed properties for JSON display
const authStoreJSON = computed(() => {
  return JSON.stringify({
    token: authStore.token,
    isLoggedIn: authStore.isLoggedIn,
    isAdmin: authStore.isAdmin,
    isTester: authStore.isTester,
    userEmail: authStore.userEmail,
    userRole: authStore.userRole,
    userProfile: authStore.userProfile,
    displayName: authStore.displayName,
    activeOrgId: authStore.activeOrgId
  }, null, 2)
})

const garageStoreJSON = computed(() => {
  return JSON.stringify({
    vehicles: garageStore.vehicles,
    loading: garageStore.loading,
    error: garageStore.error,
    selectedVehicle: garageStore.selectedVehicle
  }, null, 2)
})

// Functions
const triggerLogin = async () => {
  statusMessage.value = 'Logging in with tester_pro@profibot.hu...'
  try {
    await authStore.login('tester_pro@profibot.hu', 'Password123!')
    statusMessage.value = 'Login successful! Check auth store state.'
    refreshLocalStorage()
  } catch (error) {
    statusMessage.value = `Login failed: ${error.message}`
    console.error('Login error:', error)
  }
}

const fetchUserProfile = async () => {
  statusMessage.value = 'Fetching user profile...'
  try {
    await authStore.fetchUserProfile()
    statusMessage.value = 'User profile fetched successfully!'
  } catch (error) {
    statusMessage.value = `Failed to fetch user profile: ${error.message}`
    console.error('Fetch user profile error:', error)
  }
}

const fetchVehicles = async () => {
  statusMessage.value = 'Fetching vehicles...'
  try {
    await garageStore.fetchVehicles()
    statusMessage.value = `Vehicles fetched successfully! Found ${garageStore.vehicles?.length || 0} vehicles.`
  } catch (error) {
    statusMessage.value = `Failed to fetch vehicles: ${error.message}`
    console.error('Fetch vehicles error:', error)
  }
}

const clearState = () => {
  authStore.logout()
  garageStore.$reset()
  refreshLocalStorage()
  statusMessage.value = 'All state cleared!'
}

const refreshLocalStorage = () => {
  localStorage.value = {
    token: window.localStorage.getItem('token') || '',
    user_email: window.localStorage.getItem('user_email') || '',
    is_admin: window.localStorage.getItem('is_admin') || '',
    user_role: window.localStorage.getItem('user_role') || '',
    refresh_token: window.localStorage.getItem('refresh_token') ? '***' : '',
    ui_mode: window.localStorage.getItem('ui_mode') || '',
    active_org_id: window.localStorage.getItem('active_org_id') || ''
  }
}

// Lifecycle
onMounted(() => {
  refreshLocalStorage()
  statusMessage.value = 'Debug view loaded. Use buttons to test auth flow.'
})
</script>

<style scoped>
.debug-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: monospace;
  background: white;
  color: black;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #1e3a8a; /* sötétkék */
  border-bottom: 2px solid #1e3a8a;
  padding-bottom: 10px;
}

h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  color: #1e3a8a; /* sötétkék */
}

h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #1e3a8a; /* sötétkék */
}

.credentials {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.credentials h2 {
  margin-top: 0;
}

.note {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.actions {
  margin-bottom: 30px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}

button {
  padding: 10px 15px;
  background: #1e3a8a; /* sötétkék */
  color: white;
  border: 1px solid #1e3a8a;
  border-radius: 4px;
  cursor: pointer;
  font-family: monospace;
  font-size: 14px;
}

button:hover {
  background: #1e40af; /* sötétkék - sötétebb */
}

button:disabled {
  background: #ccc;
  color: #666;
  border-color: #ccc;
  cursor: not-allowed;
}

.status {
  background: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
  margin-top: 15px;
  border-radius: 4px;
}

.status p {
  margin: 0;
  color: #1e3a8a; /* sötétkék */
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.panel {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  background: white;
}

.state-info {
  margin-bottom: 15px;
}

.state-info p {
  margin: 5px 0;
}

.label {
  font-weight: bold;
  color: #1e3a8a; /* sötétkék */
  margin-right: 10px;
}

.yes {
  color: #065f46; /* zöld */
  font-weight: bold;
}

.no {
  color: #991b1b; /* piros */
  font-weight: bold;
}

pre {
  background: #1e1e1e;
  color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow: auto;
  max-height: 300px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid #333;
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 15px 0;
}

.storage-item {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  background: #f9f9f9;
}

.storage-label {
  font-weight: bold;
  font-size: 12px;
  color: #1e3a8a; /* sötétkék */
  margin-bottom: 5px;
}

.storage-value {
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  color: black;
}
</style>