import React, { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Switch } from '@/components/ui/switch'
import { Slider } from '@/components/ui/slider'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import {
Lightbulb,
Wifi,
WifiOff,
Activity,
Settings,
Home,
Eye,
Bell,
MapPin,
Shield,
Zap
} from 'lucide-react'
import { HueControls } from '@/components/HueControls'
export default function HueControlPage() {
const [isConnected, setIsConnected] = useState(false)
const [hueData, setHueData] = useState<any>(null)
const [commandHistory, setCommandHistory] = useState<string[]>([])
const [selectedLight, setSelectedLight] = useState<string>('')
// Mock Hue Bridge Pro data
const mockHueData = {
bridge_id: 'hue_bridge_01',
robot_type: 'hue',
name: 'Philips Hue Bridge Pro',
connected: true,
ip_address: '192.168.1.100',
api_version: '1.58.0',
lights: [
{ id: '1', name: 'Living Room Main', on: true, brightness: 254, color: { hue: 14922, sat: 144 }, reachable: true },
{ id: '2', name: 'Living Room Accent', on: false, brightness: 0, color: { hue: 41120, sat: 255 }, reachable: true },
{ id: '3', name: 'Kitchen Ceiling', on: true, brightness: 180, color: { hue: 25500, sat: 0 }, reachable: true },
{ id: '4', name: 'Bedroom Lamp', on: false, brightness: 0, color: { hue: 47000, sat: 100 }, reachable: true }
],
sensors: [
{ id: '1', name: 'Living Room Motion', type: 'ZLLPresence', presence: false, last_updated: '2024-01-15T10:30:00Z' },
{ id: '2', name: 'Front Door Motion', type: 'ZLLPresence', presence: true, last_updated: '2024-01-15T10:45:00Z' },
{ id: '3', name: 'Kitchen Motion', type: 'ZLLPresence', presence: false, last_updated: '2024-01-15T10:25:00Z' }
],
groups: [
{ id: '1', name: 'Living Room', type: 'Room', lights: ['1', '2'], on: true, brightness: 200 },
{ id: '2', name: 'Kitchen', type: 'Room', lights: ['3'], on: true, brightness: 180 },
{ id: '3', name: 'Bedroom', type: 'Room', lights: ['4'], on: false, brightness: 0 }
],
homeaware: {
enabled: true,
last_motion: '2024-01-15T10:45:00Z',
motion_events: [
{ timestamp: '2024-01-15T10:45:00Z', location: 'Front Door', confidence: 85 },
{ timestamp: '2024-01-15T10:30:00Z', location: 'Living Room', confidence: 92 },
{ timestamp: '2024-01-15T10:25:00Z', location: 'Kitchen', confidence: 78 }
]
}
}
useEffect(() => {
// Simulate connection and data loading
setTimeout(() => {
setIsConnected(true)
setHueData(mockHueData)
}, 1000)
}, [])
const handleHueCommand = (command: any) => {
console.log('Sending Hue command:', command)
setCommandHistory(prev => [`${new Date().toLocaleTimeString()}: ${JSON.stringify(command)}`, ...prev.slice(0, 9)])
// Simulate command response
setTimeout(() => {
if (command.action === 'set_light_state' && command.light_id) {
setHueData(prev => ({
...prev,
lights: prev.lights.map((light: any) =>
light.id === command.light_id.toString()
? { ...light, ...command.state }
: light
)
}))
}
}, 300)
}
const toggleLight = (lightId: string) => {
const light = hueData?.lights.find((l: any) => l.id === lightId)
if (light) {
handleHueCommand({
action: 'set_light_state',
light_id: lightId,
state: { on: !light.on }
})
}
}
const setLightBrightness = (lightId: string, brightness: number) => {
handleHueCommand({
action: 'set_light_state',
light_id: lightId,
state: { brightness }
})
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
<div className="container mx-auto px-4 py-8 max-w-7xl">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="p-3 bg-gradient-to-r from-yellow-100 to-orange-100 rounded-lg">
<Lightbulb className="h-8 w-8 text-yellow-600" />
</div>
<div>
<h1 className="text-3xl font-bold text-gray-900">Philips Hue Bridge Pro Control</h1>
<p className="text-gray-600">Smart home integration with HomeAware movement detection</p>
</div>
</div>
<div className="flex items-center space-x-4">
<Badge variant={isConnected ? "default" : "destructive"} className="px-3 py-1">
{isConnected ? (
<>
<Wifi className="w-4 h-4 mr-2" />
Connected
</>
) : (
<>
<WifiOff className="w-4 h-4 mr-2" />
Disconnected
</>
)}
</Badge>
{hueData && (
<div className="text-sm text-gray-600">
<div className="flex items-center space-x-2">
<Zap className="w-4 h-4" />
<span>API v{hueData.api_version}</span>
</div>
</div>
)}
</div>
</div>
</div>
{!isConnected && (
<Alert className="mb-6 border-amber-200 bg-amber-50">
<Activity className="h-4 w-4 text-amber-600" />
<AlertDescription className="text-amber-800">
Connecting to Philips Hue Bridge Pro... Please ensure the bridge is powered on and on the same network.
</AlertDescription>
</Alert>
)}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Main Control Panel */}
<div className="lg:col-span-2 space-y-6">
{/* Hue Specific Controls */}
{hueData && (
<HueControls
bridge={{
bridge_id: hueData.bridge_id,
robot_type: hueData.robot_type,
connected: hueData.connected,
ip_address: hueData.ip_address,
api_version: hueData.api_version
}}
lights={hueData.lights}
sensors={hueData.sensors}
groups={hueData.groups}
homeaware={hueData.homeaware}
onCommand={handleHueCommand}
/>
)}
{/* Individual Light Controls */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Lightbulb className="h-5 w-5" />
<span>Individual Light Control</span>
</CardTitle>
<CardDescription>Control each light individually</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center space-x-2">
<Label>Select Light:</Label>
<Select value={selectedLight} onValueChange={setSelectedLight}>
<SelectTrigger className="w-48">
<SelectValue placeholder="Choose a light" />
</SelectTrigger>
<SelectContent>
{hueData?.lights.map((light: any) => (
<SelectItem key={light.id} value={light.id}>
{light.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{selectedLight && (() => {
const light = hueData?.lights.find((l: any) => l.id === selectedLight)
return light ? (
<div className="space-y-4 p-4 border rounded-lg">
<div className="flex items-center justify-between">
<h4 className="font-semibold">{light.name}</h4>
<Switch
checked={light.on}
onCheckedChange={() => toggleLight(selectedLight)}
/>
</div>
{light.on && (
<div className="space-y-3">
<div className="space-y-2">
<Label>Brightness: {light.brightness}/254</Label>
<Slider
value={[light.brightness]}
onValueChange={([value]) => setLightBrightness(selectedLight, value)}
max={254}
step={1}
className="w-full"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handleHueCommand({
action: 'set_light_state',
light_id: selectedLight,
state: { on: true, brightness: 254 }
})}
>
Full Brightness
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleHueCommand({
action: 'set_light_state',
light_id: selectedLight,
state: { on: true, brightness: 127 }
})}
>
Half Brightness
</Button>
</div>
</div>
)}
<div className="text-sm text-gray-600">
<div>Status: {light.reachable ? 'Reachable' : 'Unreachable'}</div>
{light.color && (
<div>Hue: {light.color.hue}, Saturation: {light.color.sat}</div>
)}
</div>
</div>
) : null
})()}
</div>
</CardContent>
</Card>
{/* Room/Group Controls */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Home className="h-5 w-5" />
<span>Room & Group Control</span>
</CardTitle>
<CardDescription>Control lights by room or custom groups</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{hueData?.groups.map((group: any) => (
<div key={group.id} className="p-4 border rounded-lg space-y-3">
<div className="flex items-center justify-between">
<h4 className="font-semibold">{group.name}</h4>
<Switch
checked={group.on}
onCheckedChange={(checked) => handleHueCommand({
action: 'set_group_state',
group_id: group.id,
state: { on: checked }
})}
/>
</div>
<div className="text-sm text-gray-600">
<div>Type: {group.type}</div>
<div>Lights: {group.lights.length}</div>
</div>
{group.on && (
<div className="space-y-2">
<Label>Brightness: {group.brightness}/254</Label>
<Slider
value={[group.brightness]}
onValueChange={([value]) => handleHueCommand({
action: 'set_group_state',
group_id: group.id,
state: { brightness: value }
})}
max={254}
step={1}
className="w-full"
/>
</div>
)}
</div>
))}
</div>
</CardContent>
</Card>
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* Bridge Status */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Settings className="h-5 w-5" />
<span>Bridge Status</span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>IP Address:</span>
<span className="font-mono">{hueData?.ip_address || 'N/A'}</span>
</div>
<div className="flex justify-between">
<span>API Version:</span>
<span>{hueData?.api_version || 'N/A'}</span>
</div>
<div className="flex justify-between">
<span>Lights:</span>
<span>{hueData?.lights?.length || 0}</span>
</div>
<div className="flex justify-between">
<span>Sensors:</span>
<span>{hueData?.sensors?.length || 0}</span>
</div>
<div className="flex justify-between">
<span>Groups:</span>
<span>{hueData?.groups?.length || 0}</span>
</div>
</div>
</CardContent>
</Card>
{/* HomeAware Movement Detection */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Shield className="h-5 w-5" />
<span>HomeAware</span>
</CardTitle>
<CardDescription>RF-based movement detection</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm">Status:</span>
<Badge variant={hueData?.homeaware?.enabled ? "default" : "secondary"}>
{hueData?.homeaware?.enabled ? 'Active' : 'Disabled'}
</Badge>
</div>
<div className="space-y-2">
<Label className="text-sm">Recent Motion Events:</Label>
<div className="space-y-1 max-h-32 overflow-y-auto">
{hueData?.homeaware?.motion_events?.slice(0, 5).map((event: any, index: number) => (
<div key={index} className="text-xs bg-gray-100 p-2 rounded flex justify-between">
<span>{event.location}</span>
<span>{event.confidence}%</span>
</div>
))}
</div>
</div>
<div className="text-xs text-gray-600">
Last motion: {hueData?.homeaware?.last_motion ?
new Date(hueData.homeaware.last_motion).toLocaleString() : 'Never'}
</div>
</div>
</CardContent>
</Card>
{/* Motion Sensors */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Eye className="h-5 w-5" />
<span>Motion Sensors</span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{hueData?.sensors?.filter((sensor: any) => sensor.type === 'ZLLPresence').map((sensor: any) => (
<div key={sensor.id} className="flex items-center justify-between p-2 border rounded">
<div className="flex-1">
<div className="text-sm font-medium">{sensor.name}</div>
<div className="text-xs text-gray-600">
{sensor.presence ? 'Motion detected' : 'No motion'}
</div>
</div>
<Badge variant={sensor.presence ? "default" : "secondary"} className="text-xs">
{sensor.presence ? 'Active' : 'Clear'}
</Badge>
</div>
))}
</div>
</CardContent>
</Card>
{/* Command History */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Command History</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-2 max-h-48 overflow-y-auto">
{commandHistory.length === 0 ? (
<p className="text-sm text-gray-500 text-center py-4">No commands sent yet</p>
) : (
commandHistory.map((command, index) => (
<div key={index} className="text-xs font-mono bg-gray-100 p-2 rounded">
{command}
</div>
))
)}
</div>
</CardContent>
</Card>
</div>
</div>
{/* Automation & Scenes */}
<Card className="mt-8">
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Zap className="h-5 w-5" />
<span>Automation & Scenes</span>
</CardTitle>
<CardDescription>Create automated lighting scenes and routines</CardDescription>
</CardHeader>
<CardContent>
<Tabs defaultValue="scenes" className="w-full">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="scenes">Scenes</TabsTrigger>
<TabsTrigger value="routines">Routines</TabsTrigger>
<TabsTrigger value="triggers">Triggers</TabsTrigger>
</TabsList>
<TabsContent value="scenes" className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Button
variant="outline"
className="h-20 flex flex-col items-center justify-center space-y-2"
onClick={() => handleHueCommand({ action: 'activate_scene', scene: 'bright' })}
>
<Lightbulb className="h-6 w-6" />
<span>Bright</span>
</Button>
<Button
variant="outline"
className="h-20 flex flex-col items-center justify-center space-y-2"
onClick={() => handleHueCommand({ action: 'activate_scene', scene: 'relax' })}
>
<Home className="h-6 w-6" />
<span>Relax</span>
</Button>
<Button
variant="outline"
className="h-20 flex flex-col items-center justify-center space-y-2"
onClick={() => handleHueCommand({ action: 'activate_scene', scene: 'night' })}
>
<Bell className="h-6 w-6" />
<span>Night</span>
</Button>
</div>
</TabsContent>
<TabsContent value="routines" className="space-y-4">
<div className="space-y-4">
<div className="flex items-center justify-between p-4 border rounded-lg">
<div>
<h4 className="font-semibold">Good Morning</h4>
<p className="text-sm text-gray-600">Gradually increase lights at sunrise</p>
</div>
<Switch defaultChecked />
</div>
<div className="flex items-center justify-between p-4 border rounded-lg">
<div>
<h4 className="font-semibold">Movie Night</h4>
<p className="text-sm text-gray-600">Dim lights and activate scene when TV is on</p>
</div>
<Switch />
</div>
<div className="flex items-center justify-between p-4 border rounded-lg">
<div>
<h4 className="font-semibold">Security</h4>
<p className="text-sm text-gray-600">Flash lights on motion detection when away</p>
</div>
<Switch defaultChecked />
</div>
</div>
</TabsContent>
<TabsContent value="triggers" className="space-y-4">
<div className="space-y-4">
<div className="p-4 border rounded-lg">
<h4 className="font-semibold mb-2">Motion-Activated Lighting</h4>
<p className="text-sm text-gray-600 mb-3">Turn on lights when motion is detected</p>
<div className="flex items-center space-x-2">
<Label>Sensor:</Label>
<Select defaultValue="living-room">
<SelectTrigger className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="living-room">Living Room Motion</SelectItem>
<SelectItem value="kitchen">Kitchen Motion</SelectItem>
<SelectItem value="front-door">Front Door Motion</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
</div>
</div>
)
}
