import { useState, useEffect } from 'react';
import { Clock, Wifi, WifiOff } from 'lucide-react';
import { UserInfoButton } from './UserInfoButton';
import { SettingsButton } from './SettingsButton';
import { comms } from '@/communication';

interface StatusBarProps {
  userName?: string;
  userDept?: string;
  isConnected?: boolean;
}

export function StatusBar({ userName, userDept, isConnected }: StatusBarProps) {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [versionDisplay, setVersionDisplay] = useState('');
  const [hasNewVersion, setHasNewVersion] = useState(false);

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

  // 앱 버전 로드
  useEffect(() => {
    const loadVersion = async () => {
      try {
        const result = await comms.getAppVersion();
        if (result.Success) {
          setVersionDisplay(result.DisplayVersion);
          setHasNewVersion(result.HasNewVersion || false);
        }
      } catch (error) {
        console.error('버전 정보 로드 오류:', error);
      }
    };
    loadVersion();
  }, []);

  return (
    <footer className="glass-effect px-4 py-2 flex items-center justify-between text-sm">
      {/* Left: User Info */}
      <div className="flex items-center space-x-2">
        {/* Settings Button */}
        <SettingsButton />
        <UserInfoButton userName={userName} userDept={userDept} />
      </div>

      {/* Center: App Version */}
      <div className={`font-medium ${hasNewVersion ? 'text-yellow-400 animate-pulse' : 'text-white/50'}`}>
        {versionDisplay || 'Loading...'}
        {hasNewVersion && (
          <span className="ml-2 text-xs bg-yellow-500/20 text-yellow-400 px-2 py-0.5 rounded animate-pulse">
            업데이트 필요
          </span>
        )}
      </div>

      {/* Right: Connection Status & Time */}
      <div className="flex items-center space-x-4 text-white/70">
        {/* Connection Status */}
        <div className="flex items-center space-x-1">
          {isConnected ? (
            <Wifi className="w-4 h-4 text-success-400" />
          ) : (
            <WifiOff className="w-4 h-4 text-danger-400" />
          )}
          <span className={isConnected ? 'text-success-400' : 'text-danger-400'}>
            {isConnected ? '연결됨' : '연결 끊김'}
          </span>
        </div>

        {/* Current Time */}
        <div className="flex items-center space-x-2">
          <Clock className="w-4 h-4" />
          <span>
            {currentTime.toLocaleString('ko-KR', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit',
              second: '2-digit',
            })}
          </span>
        </div>
      </div>
    </footer>
  );
}
