smart-home-tablet/components/TopBar.tsx

'use client'

import { useState, useEffect } from 'react'
import { Droplets, Wind, Thermometer } from 'lucide-react'

interface SensorData {
  temperature: number
  humidity: number
  pm25: number
}

interface TopBarProps {
  sensors: SensorData | null
  haConnected?: boolean
}


function formatTime(date: Date): string {
  return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
}

function formatDate(date: Date): string {
  const weekday = date.toLocaleDateString('ru-RU', { weekday: 'long' })
  const day = date.getDate()
  const month = date.toLocaleDateString('ru-RU', { month: 'long' })
  return `${weekday}, ${day} ${month}`
}

function getGreeting(h: number): string {
  if (h >= 5 && h < 12) return 'Доброе утро'
  if (h >= 12 && h < 17) return 'Добрый день'
  if (h >= 17 && h < 22) return 'Добрый вечер'
  return 'Доброй ночи'
}


export default function TopBar({ sensors, haConnected }: TopBarProps) {
  const [time, setTime] = useState(() => new Date())

  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000)
    return () => clearInterval(t)
  }, [])

  return (
    <>
      <header
        style={{
          height: 72,
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr',
          alignItems: 'center',
          padding: '0 24px',
          borderBottom: '1px solid var(--hairline)',
          background: 'transparent',
          flexShrink: 0,
          position: 'relative',
          zIndex: 5,
          gap: 16,
        }}
      >
        {/* Left: time + date */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span style={{
            fontSize: 28, fontWeight: 700, color: 'var(--text-primary)',
            letterSpacing: '-1px', fontVariantNumeric: 'tabular-nums',
          }}>
            {formatTime(time)}
          </span>
          <span style={{
            fontSize: 14, color: 'var(--text-secondary)',
            fontWeight: 400, textTransform: 'capitalize',
          }}>
            {formatDate(time)}
          </span>
        </div>

        {/* Center: greeting */}
        <div style={{
          fontSize: 17, fontWeight: 700, color: 'var(--text-primary)',
          letterSpacing: '-0.3px', justifySelf: 'center',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          maxWidth: '100%',
        }}>
          {getGreeting(time.getHours())} <span style={{ fontSize: 16 }}>👋</span>
        </div>

        {/* Right: sensors + weather */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifySelf: 'end' }}>
          {/* HA status — 44px hit-zone wrapping 14px dot */}
          <div
            title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'}
            className="hit-zone"
            style={{ width: 44, height: 44 }}
          >
            <div style={{
              width: 14, height: 14, borderRadius: '50%',
              background: haConnected ? 'var(--data-good)' : 'var(--data-danger)',
              boxShadow: haConnected
                ? '0 0 10px color-mix(in srgb, var(--data-good) 55%, transparent)'
                : '0 0 10px color-mix(in srgb, var(--data-danger) 55%, transparent)',
              transition: 'all 0.5s ease',
              flexShrink: 0,
            }} />
          </div>

          {sensors && (
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '10px 16px', borderRadius: 16,
              minHeight: 44,
              background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
            }}>
              <Thermometer size={18} color="var(--data-hot)" strokeWidth={1.8} />
              <span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
                {sensors.temperature}°
              </span>
              <Droplets size={18} color="var(--data-cool)" strokeWidth={1.8} />
              <span className="num" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginRight: 10 }}>
                {sensors.humidity}%
              </span>
              <Wind size={18} color="var(--text-tertiary)" strokeWidth={1.8} />
              <span className="num" style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
                {sensors.pm25}
              </span>
            </div>
          )}

        </div>
      </header>

    </>
  )
}