// SPDX-License-Identifier: GPL-3.0-or-later

import { WifiOff, RefreshCw, AlertCircle } from 'lucide-react';

interface ConnectionErrorProps {
  onRetry?: () => void;
  isRetrying?: boolean;
  message?: string;
}

export default function ConnectionError({
  onRetry,
  isRetrying = false,
  message = 'Unable to connect to the backup service',
}: ConnectionErrorProps) {
  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
      <div className="max-w-md w-full bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 text-center">
        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
          <WifiOff className="w-8 h-8 text-red-600" />
        </div>
        
        <h1 className="text-xl font-bold text-slate-900 dark:text-white mb-2">
          Connection Error
        </h1>
        
        <p className="text-slate-600 dark:text-slate-400 mb-4">
          {message}
        </p>

        <div className="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4 mb-4 text-left">
          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
            <AlertCircle className="w-4 h-4 inline mr-1" />
            Please check:
          </p>
          <ul className="text-sm text-slate-500 dark:text-slate-400 space-y-1 ml-5 list-disc">
            <li>The backend daemon is running</li>
            <li>Your network connection is active</li>
            <li>No firewall is blocking port 62774</li>
          </ul>
        </div>

        {onRetry && (
          <button
            onClick={onRetry}
            disabled={isRetrying}
            className="inline-flex items-center px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
          >
            <RefreshCw className={`w-4 h-4 mr-2 ${isRetrying ? 'animate-spin' : ''}`} />
            {isRetrying ? 'Connecting...' : 'Retry Connection'}
          </button>
        )}
      </div>
    </div>
  );
}
