import { useEffect, useState } from "react";
import { Wifi, WifiOff } from "lucide-react";
import { useSensorStore } from "../stores/sensorStore";
import { VoltageDisplay } from "./VoltageDisplay";
import { BatteryStatus } from "./BatteryStatus";
import { LoginIndicator } from "./LoginIndicator";
import TCKLogo from "../../../../logo/tck_logo.svg";

export function Header() {
  const [currentTime, setCurrentTime] = useState(new Date());
  
  const { data } = useSensorStore();
  const isOnline = data.communication.percentage > 0;
  const isLoggedIn = false;

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const formatTime = (date: Date) => {
    return date.toLocaleTimeString("en-US", { 
      hour: "2-digit", 
      minute: "2-digit", 
      second: "2-digit",
      hour12: false 
    });
  };

  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-CA"); // YYYY-MM-DD format
  };

  return (
    <div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-center gap-2 text-xs">
      {/* Logo */}
      <div className="flex items-center gap-1">
        <img src={TCKLogo} alt="TCK" className="w-6 h-6" />
        <span className="text-white font-semibold">RTU</span>
      </div>

      <div className="flex-1 flex items-center gap-2 justify-end">
        {/* Time */}
        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
          <span className="text-gray-400">Time:</span>
          <span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span>
        </div>

        {/* Date */}
        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
          <span className="text-gray-400">Date:</span>
          <span className="text-blue-400 font-mono font-semibold">{formatDate(currentTime)}</span>
        </div>

        {/* Station ID */}
        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
          <span className="text-gray-400">Station:</span>
          <span className="text-white font-semibold">{data.station.id}</span>
        </div>

        {/* Comm Status */}
        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
          {isOnline ? (
            <>
              <Wifi className="w-3 h-3 text-green-500" />
              <span className="text-green-500">
                {data.communication.asu}ASU/{data.communication.dBm}dBm({data.communication.percentage}%)
              </span>
            </>
          ) : (
            <>
              <WifiOff className="w-3 h-3 text-red-500" />
              <span className="text-red-500">OFFLINE</span>
            </>
          )}
        </div>

        {/* Version */}
        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
          <span className="text-gray-400">Ver:</span>
          <span className="text-white">{data.station.version}</span>
        </div>

        {/* Login Status */}
        <LoginIndicator isLoggedIn={isLoggedIn} />

        {/* Solar Voltage */}
        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
          <span className="text-gray-400">Solar:</span>
          <span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span>
        </div>

        {/* Battery Voltage */}
        <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
          <span className="text-gray-400">Battery:</span>
          <span className={`font-mono ${data.voltage.batteryStatus === 'HIGH' ? 'text-green-500' : 'text-red-500'}`}>
            {data.voltage.battery.toFixed(1)}V
          </span>
          <span className={`text-xs px-1 rounded ${data.voltage.batteryStatus === 'HIGH' ? 'bg-green-500/20 text-green-500' : 'bg-red-500/20 text-red-500'}`}>
            {data.voltage.batteryStatus}
          </span>
        </div>
      </div>
    </div>
  );
}