<template>
  <div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900">Sensor & IoT Management</h1>
        <p class="text-gray-600">Manage sensors, assign rooms, and control device actions</p>
      </div>
      <div class="mt-4 sm:mt-0">
        <div class="flex items-center gap-2 text-sm text-gray-600">
          <div
            class="w-3 h-3 rounded-full"
            :class="energyStore.isConnected ? 'bg-green-500' : 'bg-red-500'"
          ></div>
          <span>{{ energyStore.isConnected ? 'Connected' : 'Disconnected' }}</span>
          <span class="mx-2">•</span>
          <span>{{ sensorList.length }} sensors</span>
        </div>
      </div>
    </div>

    <!-- Filters and View Toggle -->
    <div class="flex flex-col lg:flex-row gap-4">
      <!-- Filters -->
      <div class="flex flex-col sm:flex-row gap-4 flex-1">
        <div class="flex gap-2">
          <select
            v-model="selectedRoom"
            class="px-4 py-2 border border-gray-200 rounded-lg bg-white flex-1"
          >
            <option value="">All Rooms</option>
            <option v-for="room in energyStore.availableRooms" :key="room" :value="room">
              {{ room }}
            </option>
          </select>
          <button
            @click="showRoomManagementModal = true"
            class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-1"
            title="Manage Rooms"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 6v6m0 0v6m0-6h6m-6 0H6"
              />
            </svg>
            <span class="hidden sm:inline">Rooms</span>
          </button>
        </div>

        <select v-model="selectedType" class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
          <option value="">All Types</option>
          <option value="energy">Energy</option>
          <option value="co2">CO2</option>
          <option value="temperature">Temperature</option>
          <option value="hvac">HVAC</option>
          <option value="lighting">Lighting</option>
          <option value="security">Security</option>
        </select>

        <select
          v-model="selectedStatus"
          class="px-4 py-2 border border-gray-200 rounded-lg bg-white"
        >
          <option value="">All Status</option>
          <option value="online">Online</option>
          <option value="offline">Offline</option>
          <option value="error">Error</option>
        </select>
      </div>

      <!-- View Toggle -->
      <div class="flex items-center gap-2 bg-gray-100 rounded-lg p-1">
        <button
          @click="viewMode = 'simple'"
          class="px-3 py-1.5 rounded text-sm font-medium transition-colors"
          :class="
            viewMode === 'simple'
              ? 'bg-white text-gray-900 shadow-sm'
              : 'text-gray-600 hover:text-gray-900'
          "
        >
          <div class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 10h16M4 14h16M4 18h16"
              />
            </svg>
            Simple
          </div>
        </button>
        <button
          @click="viewMode = 'detailed'"
          class="px-3 py-1.5 rounded text-sm font-medium transition-colors"
          :class="
            viewMode === 'detailed'
              ? 'bg-white text-gray-900 shadow-sm'
              : 'text-gray-600 hover:text-gray-900'
          "
        >
          <div class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
            Detailed
          </div>
        </button>
      </div>
    </div>

    <!-- Real-time Room Metrics Summary -->
    <div
      v-if="Object.keys(roomMetricsSummary).length > 0"
      class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6"
    >
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Room-based Real-time Metrics</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        <div
          v-for="(metrics, room) in roomMetricsSummary"
          :key="room"
          class="bg-gray-50 rounded-lg p-3"
        >
          <div class="text-sm font-medium text-gray-900 mb-2">{{ room }}</div>
          <div class="space-y-1 text-xs">
            <div class="flex justify-between">
              <span class="text-gray-600">Energy:</span>
              <span class="font-medium">{{ metrics.energy.toFixed(2) }} kWh</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">CO2:</span>
              <span class="font-medium" :class="getCO2StatusColor(metrics.co2)">
                {{ Math.round(metrics.co2) }} ppm
              </span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">Sensors:</span>
              <span class="font-medium">{{ metrics.sensorCount }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">Occupancy:</span>
              <span class="font-medium capitalize" :class="getOccupancyColor(metrics.occupancy)">
                {{ metrics.occupancy }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Sensors Grid -->
    <div
      class="grid gap-4"
      :class="
        viewMode === 'simple'
          ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
          : 'grid-cols-1 lg:grid-cols-2 xl:grid-cols-3'
      "
    >
      <!-- Simple Cards -->
      <template v-if="viewMode === 'simple'">
        <SimpleSensorCard
          v-for="sensor in filteredSensors"
          :key="sensor.id"
          :sensor="sensor"
          :is-executing-action="isExecutingAction"
          @execute-action="executeAction"
          @show-more="showSensorDetails"
        />
      </template>

      <!-- Detailed Cards -->
      <template v-else>
        <DetailedSensorCard
          v-for="sensor in filteredSensors"
          :key="sensor.id"
          :sensor="sensor"
          :available-rooms="energyStore.availableRooms"
          :is-executing-action="isExecutingAction"
          @update-room="updateRoom"
          @execute-action="executeAction"
        />
      </template>
    </div>

    <!-- Empty State -->
    <div v-if="filteredSensors.length === 0" class="text-center py-12">
      <div class="text-gray-400 text-6xl mb-4">🔍</div>
      <h3 class="text-lg font-medium text-gray-900 mb-2">No sensors found</h3>
      <p class="text-gray-600">Try adjusting your filters or check if sensors are connected.</p>
    </div>

    <!-- Action Modal -->
    <ActionModal
      v-if="showActionModal"
      :sensor="selectedSensor"
      :action="selectedAction"
      @execute="handleActionExecute"
      @close="closeActionModal"
    />

    <!-- Room Management Modal -->
    <RoomManagementModal v-if="showRoomManagementModal" @close="showRoomManagementModal = false" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useEnergyStore } from '@/stores/energy'
import ActionModal from '@/components/modals/ActionModal.vue'
import RoomManagementModal from '@/components/modals/RoomManagementModal.vue'
import SimpleSensorCard from '@/components/cards/SimpleSensorCard.vue'
import DetailedSensorCard from '@/components/cards/DetailedSensorCard.vue'

const energyStore = useEnergyStore()

// View mode
const viewMode = ref<'simple' | 'detailed'>('simple')

// Filters
const selectedRoom = ref('')
const selectedType = ref('')
const selectedStatus = ref('')

// Action modal
const showActionModal = ref(false)
const selectedSensor = ref<any>(null)
const selectedAction = ref<any>(null)
const isExecutingAction = ref(false)

// Room management modal
const showRoomManagementModal = ref(false)

const sensorList = computed(() => {
  return Array.from(energyStore.sensorDevices.values()).sort((a, b) => a.name.localeCompare(b.name))
})

const filteredSensors = computed(() => {
  return sensorList.value.filter((sensor) => {
    const matchesRoom = !selectedRoom.value || sensor.room === selectedRoom.value
    const matchesType = !selectedType.value || sensor.type === selectedType.value
    const matchesStatus = !selectedStatus.value || sensor.status === selectedStatus.value

    return matchesRoom && matchesType && matchesStatus
  })
})

// Real-time room metrics aggregation
const roomMetricsSummary = computed(() => {
  const summary: Record<string, any> = {}

  // Process room data from energy store
  Array.from(energyStore.roomsData.values()).forEach((roomData) => {
    if (roomData.room && roomData.sensors.length > 0) {
      summary[roomData.room] = {
        energy: roomData.energy.current || 0,
        co2: roomData.co2.current || 0,
        sensorCount: roomData.sensors.length,
        occupancy: roomData.occupancyEstimate || 'low',
        lastUpdated: roomData.lastUpdated,
      }
    }
  })

  // Fallback: Aggregate from individual sensor readings
  if (Object.keys(summary).length === 0) {
    const readings = Array.from(energyStore.latestReadings.values())
    readings.forEach((reading) => {
      if (!reading.room) return

      if (!summary[reading.room]) {
        summary[reading.room] = {
          energy: 0,
          co2: 0,
          temperature: 0,
          sensorCount: 0,
          occupancy: 'low',
        }
      }

      summary[reading.room].energy += reading.energy?.value || 0
      summary[reading.room].co2 += reading.co2?.value || 0
      summary[reading.room].sensorCount += 1

      // Simple occupancy estimate based on CO2
      const avgCo2 = summary[reading.room].co2 / summary[reading.room].sensorCount
      if (avgCo2 > 1200) summary[reading.room].occupancy = 'high'
      else if (avgCo2 > 600) summary[reading.room].occupancy = 'medium'
      else summary[reading.room].occupancy = 'low'
    })
  }

  return summary
})

const updateRoom = (sensorId: string, newRoom: string) => {
  energyStore.updateSensorRoom(sensorId, newRoom)
}

const executeAction = (sensor: any, action: any) => {
  if (action.parameters) {
    // Show modal for actions with parameters
    selectedSensor.value = sensor
    selectedAction.value = action
    showActionModal.value = true
  } else {
    // Execute simple actions directly
    handleActionExecute(sensor.id, action.id, {})
  }
}

const handleActionExecute = async (sensorId: string, actionId: string, parameters: any) => {
  isExecutingAction.value = true
  try {
    await energyStore.executeSensorAction(sensorId, actionId, parameters)
  } catch (error) {
    console.error('Action execution failed:', error)
  } finally {
    isExecutingAction.value = false
    closeActionModal()
  }
}

const closeActionModal = () => {
  showActionModal.value = false
  selectedSensor.value = null
  selectedAction.value = null
}

const showSensorDetails = () => {
  // Switch to detailed view when user wants to see more actions
  viewMode.value = 'detailed'
}

// Helper functions for styling
const getCO2StatusColor = (co2Level: number) => {
  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 getOccupancyColor = (occupancy: string) => {
  switch (occupancy) {
    case 'low':
      return 'text-green-600'
    case 'medium':
      return 'text-yellow-600'
    case 'high':
      return 'text-red-600'
    default:
      return 'text-gray-600'
  }
}

// WebSocket connection for real-time updates
onMounted(() => {
  if (!energyStore.isConnected) {
    energyStore.connect('ws://localhost:8000/ws')
  }
})

onUnmounted(() => {
  // Keep the connection alive for other components
  // energyStore.disconnect()
})
</script>
