import React from 'react';
import { useAppUpdates } from '../../../hooks/useAppUpdates';
import { useServerContext } from '../../../context/ServerContext/useServerContext';
import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
import './Header.css';

interface HeaderProps {
  appVersion?: string;
}

export const Header: React.FC<HeaderProps> = ({ appVersion = '1.0.0' }) => {
  const { isCheckingAppUpdate, appUpdateAvailable, checkForAppUpdate } = useAppUpdates();
  const { serverPath } = useServerContext();
  const { isCheckingUpdates } = usePluginContext();

  const handleCheckForUpdates = async () => {
    if (!isCheckingAppUpdate) {
      await checkForAppUpdate();
    }
  };

  return (
    <header className="header">
      <div className="header-left">
        <h1 className="app-title">PlugSnatcher</h1>
        <span className="app-version">v{appVersion}</span>
        {appUpdateAvailable && (
          <span className="update-badge">Update Available</span>
        )}
      </div>

      <div className="header-center">
        {serverPath && (
          <div className="server-path-display">
            <span className="server-label">Selected Server:</span>
            <span className="server-path" title={serverPath}>
              {serverPath.length > 40 ? `...${serverPath.slice(-40)}` : serverPath}
            </span>
          </div>
        )}
      </div>

      <div className="header-right">
        <button
          className="update-check-button"
          onClick={handleCheckForUpdates}
          disabled={isCheckingAppUpdate || isCheckingUpdates}
        >
          {isCheckingAppUpdate ? 'Checking...' : 'Check for Updates'}
        </button>
      </div>
    </header>
  );
};

export default Header;