'use client' import { useState, useEffect, useCallback, useRef } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Thermometer, Droplets, Wind, Calendar, Lock, Settings as SettingsIcon, LogOut, Delete, KeyRound, MapPin, Info, Check, X as XIcon } from 'lucide-react' import Sidebar from '@/components/Sidebar' import TopBar from '@/components/TopBar' import RoomTabs from '@/components/RoomTabs' import DeviceCard from '@/components/DeviceCard' import CalendarTab from '@/components/CalendarTab' type Tab = 'home' | 'devices' | 'calendar' | 'settings' interface WeatherData { temp: string desc: string humidity: string windSpeed: string feelsLike: string forecast?: { date: string; maxTemp: string; minTemp: string; desc: string }[] } interface SensorData { temperature: number humidity: number pm25: number } interface HaStates { [key: string]: { state: string; attributes?: Record; _mock?: boolean } } interface CalendarEvent { id: string title: string start: string end: string allDay: boolean owner: string ownerName: string color: string } const ROOMS = [ { id: 'living', name: 'Гостиная', emoji: '🛋️', deviceCount: 3 }, { id: 'bedroom', name: 'Спальня', emoji: '🛏️', deviceCount: 2 }, { id: 'kitchen', name: 'Кухня', emoji: '🍳', deviceCount: 0 }, { id: 'bathroom', name: 'Ванная', emoji: '🚿', deviceCount: 0 }, ] const DEVICES_BY_ROOM: Record = { living: [ { id: 'air_purifier', name: 'Очиститель воздуха', icon: '💨', entityId: 'fan.zhimi_rmb1_9528_air_purifier', domain: 'fan', haKey: 'fan.air_purifier', isMock: false }, { id: 'light_living', name: 'Свет', icon: '💡', entityId: 'light.living_room', domain: 'light', haKey: 'light.living_room', isMock: true }, { id: 'tv', name: 'Телевизор', icon: '📺', isMock: true }, ], bedroom: [ { id: 'light_bedroom', name: 'Свет', icon: '💡', entityId: 'light.bedroom', domain: 'light', haKey: 'light.bedroom', isMock: true }, { id: 'ac', name: 'Кондиционер', icon: '❄️', isMock: true }, ], kitchen: [], bathroom: [], } const CITIES = [ { id: 'spb', name: 'Санкт-Петербург', lat: '59.9343', lon: '30.3351' }, { id: 'msk', name: 'Москва', lat: '55.7558', lon: '37.6173' }, { id: 'nsk', name: 'Новосибирск', lat: '55.0084', lon: '82.9357' }, { id: 'ekb', name: 'Екатеринбург', lat: '56.8389', lon: '60.6057' }, { id: 'kzn', name: 'Казань', lat: '55.7887', lon: '49.1221' }, { id: 'sochi', name: 'Сочи', lat: '43.5855', lon: '39.7231' }, { id: 'krd', name: 'Краснодар', lat: '45.0355', lon: '38.9753' }, ] function getWeatherIcon(desc: string): string { const d = desc?.toLowerCase() || '' if (d.includes('ясно') || d.includes('солнеч')) return '☀️' if (d.includes('облач') || d.includes('перем')) return '⛅' if (d.includes('пасмурн')) return '☁️' if (d.includes('дождь') || d.includes('морос') || d.includes('ливен')) return '🌧️' if (d.includes('снег')) return '🌨️' if (d.includes('гроз')) return '⛈️' if (d.includes('туман')) return '🌫️' return '🌤️' } function formatEventTime(iso: string): string { return new Date(iso).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }) } function getGreeting(): string { const h = new Date().getHours() if (h >= 5 && h < 12) return 'Доброе утро' if (h >= 12 && h < 17) return 'Добрый день' if (h >= 17 && h < 22) return 'Добрый вечер' return 'Доброй ночи' } function getPm25Level(pm25: number): { label: string; color: string; bg: string } { if (pm25 <= 12) return { label: 'Отлично', color: '#34d399', bg: 'rgba(52,211,153,0.12)' } if (pm25 <= 35) return { label: 'Хорошо', color: '#a3e635', bg: 'rgba(163,230,53,0.12)' } if (pm25 <= 55) return { label: 'Умеренно', color: '#fbbf24', bg: 'rgba(251,191,36,0.12)' } return { label: 'Плохо', color: '#f87171', bg: 'rgba(248,113,113,0.12)' } } // ————— Screensaver ————— function Screensaver({ weather, onDismiss }: { weather: WeatherData | null; onDismiss: () => void }) { const [time, setTime] = useState(new Date()) useEffect(() => { const t = setInterval(() => setTime(new Date()), 1000) return () => clearInterval(t) }, []) return ( {/* Subtle ambient */}
{/* Time */}
{time.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
{/* Date */}
{time.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
{/* Weather mini */} {weather && (
{getWeatherIcon(weather.desc)} {weather.temp}° {weather.desc}
)}
Коснитесь для разблокировки
) } // ————— Lock Screen ————— function LockScreen({ onUnlock }: { onUnlock: () => void }) { const [pin, setPin] = useState('') const [error, setError] = useState(false) const [loading, setLoading] = useState(false) const [time, setTime] = useState(new Date()) useEffect(() => { const t = setInterval(() => setTime(new Date()), 1000) return () => clearInterval(t) }, []) const submit = async (fullPin: string) => { setLoading(true); setError(false) try { const r = await fetch('/api/auth', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin: fullPin }), }) if (r.ok) onUnlock() else { setError(true); setPin(''); setTimeout(() => setError(false), 1500) } } catch { setError(true); setPin('') } finally { setLoading(false) } } const handleDigit = (d: string) => { if (pin.length >= 6) return const next = pin + d setPin(next) if (next.length === 4) submit(next) } const digits = ['1','2','3','4','5','6','7','8','9','','0','del'] return (
{time.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
{time.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
{[0,1,2,3].map(i => (
))}
{error &&
Неверный PIN
}
{digits.map((d, i) => { if (d === '') return
if (d === 'del') return ( ) return ( ) })}
) } // ————— Home Tab ————— function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: SensorData | null }) { const [todayEvents, setTodayEvents] = useState([]) const [calLoading, setCalLoading] = useState(true) const [greeting, setGreeting] = useState(getGreeting()) useEffect(() => { fetch('/api/calendar?range=today') .then(r => r.json()) .then(d => setTodayEvents(d.events || [])) .catch(() => setTodayEvents([])) .finally(() => setCalLoading(false)) }, []) useEffect(() => { const t = setInterval(() => setGreeting(getGreeting()), 60000) return () => clearInterval(t) }, []) const pm25Info = sensors ? getPm25Level(sensors.pm25) : null return (
{/* Greeting */}

{greeting} 👋

Вот что происходит дома

{weather && (
{getWeatherIcon(weather.desc)}
Погода
{getWeatherIcon(weather.desc)}
{weather.temp}°
{weather.desc}
{weather.forecast && weather.forecast.length > 0 && (
{weather.forecast.slice(0, 3).map(day => { const d = new Date(day.date) return (
{d.toLocaleDateString('ru-RU', { weekday: 'short' })}
{getWeatherIcon(day.desc)}
{day.maxTemp}°
{day.minTemp}°
) })}
)}
)} {sensors && (
Климат в квартире
{sensors.temperature}°C
Температура
{sensors.humidity}%
Влажность
{sensors.pm25}µg/m³
PM2.5 · {pm25Info?.label}
)}
Сегодня
{calLoading ? (
Загрузка...
) : todayEvents.length === 0 ? (
Нет событий на сегодня
) : (
{todayEvents.map(ev => (
{ev.title}
{ev.allDay ? 'Весь день' : `${formatEventTime(ev.start)} — ${formatEventTime(ev.end)}`} {ev.ownerName}
))}
)}
) } // ————— Settings Tab ————— function SettingsTab({ city, onCityChange, onLogout, theme, onThemeChange }: { city: string; onCityChange: (id: string) => void; onLogout: () => void; theme: string; onThemeChange: (t: string) => void }) { const [showPinChange, setShowPinChange] = useState(false) const [oldPin, setOldPin] = useState('') const [newPin, setNewPin] = useState('') const [pinMsg, setPinMsg] = useState<{ text: string; ok: boolean } | null>(null) const [pinSaving, setPinSaving] = useState(false) const changePIN = async () => { if (!oldPin || !newPin) { setPinMsg({ text: 'Заполните оба поля', ok: false }); return } if (newPin.length < 4) { setPinMsg({ text: 'Минимум 4 цифры', ok: false }); return } setPinSaving(true); setPinMsg(null) try { const r = await fetch('/api/auth', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ oldPin, newPin }), }) const d = await r.json() if (d.error) throw new Error(d.error === 'wrong_pin' ? 'Неверный старый PIN' : d.error) setPinMsg({ text: 'PIN изменён', ok: true }) setOldPin(''); setNewPin('') setTimeout(() => { setShowPinChange(false); setPinMsg(null) }, 1500) } catch (e: any) { setPinMsg({ text: e.message, ok: false }) } finally { setPinSaving(false) } } const inputStyle: React.CSSProperties = { padding: '14px 18px', borderRadius: 14, width: '100%', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)', color: 'var(--text-primary)', fontSize: 15, outline: 'none', fontFamily: 'inherit', textAlign: 'center', letterSpacing: '4px', } const currentCity = CITIES.find(c => c.id === city) || CITIES[0] return (

Настройки

{/* City selector */}
Город
{CITIES.map(c => { const isActive = city === c.id return ( ) })}
{/* Theme */}
{theme === 'dark' ? '🌙' : '☀️'} Тема
{[ { id: 'dark', label: 'Тёмная' }, { id: 'light', label: 'Светлая' }, ].map(t => ( ))}
{/* PIN change */}
PIN-код
{showPinChange && (
setOldPin(e.target.value.replace(/\D/g, ''))} placeholder="Старый PIN" style={inputStyle} /> setNewPin(e.target.value.replace(/\D/g, ''))} placeholder="Новый PIN" style={inputStyle} /> {pinMsg && (
{pinMsg.ok ? : } {pinMsg.text}
)}
)}
{/* Logout */} {/* Info */}
Smart Home Dashboard v1.0 · {currentCity.name}
) } // ————— Tab animation variants ————— const tabVariants = { enter: { opacity: 0, y: 12 }, center: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, } // ————— Main ————— function HomePageInner() { const [unlocked, setUnlocked] = useState(null) const [tab, setTab] = useState('home') const [activeRoom, setActiveRoom] = useState('living') const [weather, setWeather] = useState(null) const [sensors, setSensors] = useState(null) const [haStates, setHaStates] = useState({}) const [haConnected, setHaConnected] = useState(false) const [city, setCity] = useState(() => { if (typeof window !== 'undefined') return localStorage.getItem('tablet-city') || 'spb' return 'spb' }) const [screensaverActive, setScreensaverActive] = useState(false) const [theme, setTheme] = useState(() => { if (typeof window !== 'undefined') return localStorage.getItem('tablet-theme') || 'dark' return 'dark' }) const idleTimer = useRef | null>(null) // Theme useEffect(() => { document.documentElement.className = theme localStorage.setItem('tablet-theme', theme) }, [theme]) // Auth check useEffect(() => { fetch('/api/auth') .then(r => r.json()) .then(d => setUnlocked(d.authenticated)) .catch(() => setUnlocked(false)) }, []) // City change const handleCityChange = (id: string) => { setCity(id) localStorage.setItem('tablet-city', id) } // Weather useEffect(() => { if (!unlocked) return const c = CITIES.find(x => x.id === city) || CITIES[0] const load = async () => { try { const r = await fetch(`/api/weather?lat=${c.lat}&lon=${c.lon}`) const d = await r.json() if (d.temp && d.temp !== '—') setWeather(d) } catch {} } load() const t = setInterval(load, 600_000) return () => clearInterval(t) }, [unlocked, city]) // HA const loadHA = useCallback(async () => { try { const r = await fetch('/api/ha') const d = await r.json() if (d.states) { setHaStates(d.states); setHaConnected(true) } if (d.sensors) setSensors(d.sensors) } catch { setHaConnected(false) } }, []) useEffect(() => { if (!unlocked) return loadHA() const t = setInterval(loadHA, 30_000) return () => clearInterval(t) }, [loadHA, unlocked]) // Screensaver idle detection const resetIdle = useCallback(() => { if (screensaverActive) { setScreensaverActive(false); return } if (idleTimer.current) clearTimeout(idleTimer.current) idleTimer.current = setTimeout(() => setScreensaverActive(true), 2 * 60 * 1000) // 2 min }, [screensaverActive]) useEffect(() => { if (!unlocked) return const events = ['mousedown', 'mousemove', 'touchstart', 'keydown', 'scroll'] events.forEach(e => window.addEventListener(e, resetIdle, { passive: true })) resetIdle() return () => { events.forEach(e => window.removeEventListener(e, resetIdle)) if (idleTimer.current) clearTimeout(idleTimer.current) } }, [unlocked, resetIdle]) const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || [] const getDeviceState = (haKey?: string): boolean => { if (!haKey || !haStates[haKey]) return false return haStates[haKey].state === 'on' } const getDeviceExtra = (id: string): string | undefined => { if (id === 'air_purifier' && sensors) return `PM2.5: ${sensors.pm25}` return undefined } const handleLogout = async () => { await fetch('/api/auth', { method: 'DELETE' }) window.location.reload() } if (unlocked === null) { return
} if (!unlocked) { return setUnlocked(true)} /> } return (
{screensaverActive && ( setScreensaverActive(false)} /> )}
{tab === 'home' && ( )} {tab === 'devices' && (
{devicesInRoom.length === 0 ? (
🏠
Устройства не добавлены
) : (
{devicesInRoom.map(device => ( ))}
)}
)} {tab === 'calendar' && ( )} {tab === 'settings' && ( )}
) } export default function HomePage() { return }