'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}`
}


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: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '0 24px',
          borderBottom: '1px solid rgba(255,255,255,0.04)',
          background: 'transparent',
          flexShrink: 0,
          position: 'relative',
          zIndex: 5,
        }}
      >
        {/* 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>

        {/* Right: sensors + weather */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {/* HA status */}
          <div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
            width: 10, height: 10, borderRadius: '50%',
            background: haConnected ? '#34d399' : '#f87171',
            boxShadow: haConnected ? '0 0 8px rgba(52,211,153,0.5)' : '0 0 8px rgba(248,113,113,0.5)',
            transition: 'all 0.5s ease',
            flexShrink: 0,
          }} />

          {sensors && (
            <div style={{
              display: 'flex', alignItems: 'center', gap: 4,
              padding: '8px 14px', borderRadius: 14,
              background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)',
            }}>
              <Thermometer size={14} color="rgba(255,255,255,0.35)" />
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
                {sensors.temperature}°
              </span>
              <Droplets size={14} color="rgba(255,255,255,0.35)" />
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
                {sensors.humidity}%
              </span>
              <Wind size={14} color="rgba(255,255,255,0.35)" />
              <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
                {sensors.pm25}
              </span>
            </div>
          )}

        </div>
      </header>

    </>
  )
}
