<template>
  <div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
    <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
      <!-- Header -->
      <div class="p-6 border-b border-gray-200">
        <div class="flex items-center justify-between">
          <h2 class="text-xl font-semibold text-gray-900">Room Management</h2>
          <button
            @click="$emit('close')"
            class="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <p class="text-gray-600 mt-2">Create new rooms and manage existing ones</p>
      </div>

      <!-- Content -->
      <div class="p-6 max-h-[calc(90vh-140px)] overflow-y-auto">
        <!-- Add New Room Section -->
        <div class="bg-blue-50 rounded-lg p-4 mb-6">
          <h3 class="font-medium text-gray-900 mb-3">Add New Room</h3>
          <div class="flex gap-3">
            <div class="flex-1">
              <input
                v-model="newRoomName"
                type="text"
                placeholder="Enter room name (e.g., Meeting Room 3, Lab A, etc.)"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                @keyup.enter="addNewRoom"
                :class="{ 'border-red-300 focus:ring-red-500 focus:border-red-500': errorMessage }"
              />
              <p v-if="errorMessage" class="text-red-600 text-sm mt-1">{{ errorMessage }}</p>
            </div>
            <button
              @click="addNewRoom"
              :disabled="!newRoomName.trim() || isAdding"
              class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white rounded-lg font-medium transition-colors"
            >
              <span v-if="isAdding">Adding...</span>
              <span v-else>Add Room</span>
            </button>
          </div>
        </div>

        <!-- Existing Rooms Section -->
        <div>
          <div class="flex items-center justify-between mb-4">
            <h3 class="font-medium text-gray-900">Existing Rooms</h3>
            <span class="text-sm text-gray-500">{{ roomsWithStats.length }} rooms total</span>
          </div>

          <div class="grid grid-cols-1 gap-3">
            <div v-for="room in roomsWithStats" :key="room.name" class="bg-gray-50 rounded-lg p-4">
              <div class="flex items-center justify-between">
                <div class="flex-1">
                  <div class="flex items-center gap-3 mb-2">
                    <h4 class="font-medium text-gray-900">{{ room.name }}</h4>
                    <span
                      class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded-full font-medium"
                    >
                      {{ room.sensorCount }} sensors
                    </span>
                  </div>

                  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
                    <div>
                      <span class="text-gray-600">Types:</span>
                      <div class="flex flex-wrap gap-1 mt-1">
                        <span
                          v-for="type in room.sensorTypes"
                          :key="type"
                          class="text-xs px-2 py-0.5 bg-gray-200 text-gray-700 rounded"
                        >
                          {{ type }}
                        </span>
                        <span v-if="room.sensorTypes.length === 0" class="text-xs text-gray-500"
                          >None</span
                        >
                      </div>
                    </div>

                    <div>
                      <span class="text-gray-600">Energy:</span>
                      <div
                        class="font-medium"
                        :class="room.hasMetrics ? 'text-gray-900' : 'text-gray-400'"
                      >
                        {{
                          room.hasMetrics ? room.energyConsumption.toFixed(2) + ' kWh' : 'No data'
                        }}
                      </div>
                    </div>

                    <div>
                      <span class="text-gray-600">CO2:</span>
                      <div class="font-medium" :class="getCO2Color(room.co2Level)">
                        {{ room.hasMetrics ? Math.round(room.co2Level) + ' ppm' : 'No data' }}
                      </div>
                    </div>

                    <div>
                      <span class="text-gray-600">Last Update:</span>
                      <div class="text-xs text-gray-500">
                        {{ room.lastUpdated ? formatTime(room.lastUpdated) : 'Never' }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="ml-4">
                  <button
                    @click="confirmDeleteRoom(room.name)"
                    :disabled="isDeleting === room.name"
                    class="px-3 py-1.5 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition-colors"
                    :class="{ 'opacity-50 cursor-not-allowed': isDeleting === room.name }"
                  >
                    <span v-if="isDeleting === room.name">Deleting...</span>
                    <span v-else>Delete</span>
                  </button>
                </div>
              </div>
            </div>

            <!-- Empty state -->
            <div v-if="roomsWithStats.length === 0" class="text-center py-8">
              <div class="text-gray-400 text-4xl mb-2">🏢</div>
              <p class="text-gray-600">No rooms created yet</p>
              <p class="text-gray-500 text-sm">Add your first room above to get started</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="p-6 border-t border-gray-200 bg-gray-50">
        <div class="flex justify-end gap-3">
          <button
            @click="$emit('close')"
            class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"
          >
            Close
          </button>
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div
      v-if="roomToDelete"
      class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-60"
    >
      <div class="bg-white rounded-xl max-w-md w-full p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Delete Room</h3>
        <p class="text-gray-600 mb-4">
          Are you sure you want to delete <strong>"{{ roomToDelete }}"</strong>?
          {{
            getRoomStats(roomToDelete).sensorCount > 0
              ? `This will unassign ${getRoomStats(roomToDelete).sensorCount} sensor(s).`
              : 'This action cannot be undone.'
          }}
        </p>
        <div class="flex gap-3">
          <button
            @click="roomToDelete = null"
            class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"
          >
            Cancel
          </button>
          <button
            @click="deleteRoom"
            class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors"
          >
            Delete Room
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoomStore } from '@/stores/room'

const roomStore = useRoomStore()

// Emit events
const emit = defineEmits<{
  close: []
}>()

// Component state
const newRoomName = ref('')
const errorMessage = ref('')
const isAdding = ref(false)
const isDeleting = ref<string | null>(null)
const roomToDelete = ref<string | null>(null)

// Computed properties
const roomsWithStats = computed(() => {
  return roomStore.getAllRoomsWithStats()
})

// Methods
const addNewRoom = async () => {
  if (!newRoomName.value.trim()) {
    errorMessage.value = 'Room name is required'
    return
  }

  if (newRoomName.value.trim().length < 2) {
    errorMessage.value = 'Room name must be at least 2 characters'
    return
  }

  if (newRoomName.value.trim().length > 50) {
    errorMessage.value = 'Room name must be less than 50 characters'
    return
  }

  isAdding.value = true
  errorMessage.value = ''

  try {
    const success = roomStore.addRoom(newRoomName.value.trim())

    if (success) {
      newRoomName.value = ''
      // Show success feedback
      console.log('Room added successfully')
    } else {
      errorMessage.value = 'Room name already exists'
    }
  } catch (error) {
    errorMessage.value = 'Failed to add room'
    console.error('Error adding room:', error)
  } finally {
    isAdding.value = false
  }
}

const confirmDeleteRoom = (roomName: string) => {
  roomToDelete.value = roomName
}

const deleteRoom = async () => {
  if (!roomToDelete.value) return

  isDeleting.value = roomToDelete.value

  try {
    const success = roomStore.removeRoom(roomToDelete.value)

    if (success) {
      console.log(`Room "${roomToDelete.value}" deleted successfully`)
    } else {
      console.error('Failed to delete room')
    }
  } catch (error) {
    console.error('Error deleting room:', error)
  } finally {
    isDeleting.value = null
    roomToDelete.value = null
  }
}

const getRoomStats = (roomName: string) => {
  return roomStore.getRoomStats(roomName)
}

const getCO2Color = (co2Level: number) => {
  if (co2Level === 0) return 'text-gray-400'
  if (co2Level < 400) return 'text-green-600'
  if (co2Level < 1000) return 'text-yellow-600'
  if (co2Level < 5000) return 'text-orange-600'
  return 'text-red-600'
}

const formatTime = (timestamp: number) => {
  const date = new Date(timestamp * 1000)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffSecs = Math.floor(diffMs / 1000)

  if (diffSecs < 60) {
    return `${diffSecs}s ago`
  } else if (diffSecs < 3600) {
    return `${Math.floor(diffSecs / 60)}m ago`
  } else if (diffSecs < 86400) {
    return `${Math.floor(diffSecs / 3600)}h ago`
  } else {
    return date.toLocaleDateString()
  }
}

// Clear error when user starts typing
const clearError = () => {
  if (errorMessage.value) {
    errorMessage.value = ''
  }
}

// Watch for changes in newRoomName to clear errors
import { watch } from 'vue'
watch(newRoomName, clearError)
</script>
