/**
 * Update notification banner.
 *
 * Displays when a new version is available.
 */

import { useAutoUpdater } from '../hooks/useAutoUpdater';

export function UpdateBanner() {
  const {
    available,
    downloading,
    installed,
    updateInfo,
    installUpdate,
    dismissUpdate,
  } = useAutoUpdater();

  // Don't render if no update available
  if (!available && !installed) {
    return null;
  }

  // Show restart prompt after install
  if (installed) {
    return (
      <div className="bg-green-900/80 border-b border-green-700 px-4 py-2 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <svg
            className="w-5 h-5 text-green-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M5 13l4 4L19 7"
            />
          </svg>
          <span className="text-green-100 text-sm">
            Update installed! Restart to apply changes.
          </span>
        </div>
        <button
          onClick={() => window.location.reload()}
          className="px-3 py-1 text-sm bg-green-600 hover:bg-green-500 text-white rounded transition-colors"
        >
          Restart Now
        </button>
      </div>
    );
  }

  // Show update available banner
  return (
    <div className="bg-blue-900/80 border-b border-blue-700 px-4 py-2 flex items-center justify-between">
      <div className="flex items-center gap-2">
        <svg
          className="w-5 h-5 text-blue-400"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
          />
        </svg>
        <span className="text-blue-100 text-sm">
          {updateInfo?.version
            ? `Version ${updateInfo.version} is available`
            : 'A new update is available'}
        </span>
        {updateInfo?.body && (
          <span className="text-blue-300 text-xs hidden sm:inline">
            - {updateInfo.body.slice(0, 50)}
            {updateInfo.body.length > 50 ? '...' : ''}
          </span>
        )}
      </div>

      <div className="flex items-center gap-2">
        {downloading ? (
          <div className="flex items-center gap-2 text-blue-200 text-sm">
            <svg
              className="w-4 h-4 animate-spin"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
              />
            </svg>
            Downloading...
          </div>
        ) : (
          <>
            <button
              onClick={installUpdate}
              className="px-3 py-1 text-sm bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
            >
              Install Update
            </button>
            <button
              onClick={dismissUpdate}
              className="p-1 text-blue-300 hover:text-blue-100 transition-colors"
              aria-label="Dismiss"
            >
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </>
        )}
      </div>
    </div>
  );
}

export default UpdateBanner;
