copy-of-local-network-dashboard/components/ScanInfoModal.tsx

import React, { useRef, useEffect, useState } from 'react';
import { AlertTriangle, Loader2, ScanSearch, ServerCrash } from 'lucide-react';
import { type Service } from '../types';

interface ScanInfoModalProps {
  onClose: () => void;
  onScanComplete: (services: Omit<Service, 'id'>[]) => void;
}

type ScanStatus = 'idle' | 'scanning' | 'error';

const ScanInfoModal: React.FC<ScanInfoModalProps> = ({ onClose, onScanComplete }) => {
  const modalRef = useRef<HTMLDivElement>(null);
  const [networkAddress, setNetworkAddress] = useState('192.168.1.0/24');
  const [scanStatus, setScanStatus] = useState<ScanStatus>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
        onClose();
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [onClose]);

  const handleStartScan = async (e: React.FormEvent) => {
    e.preventDefault();
    setScanStatus('scanning');
    setErrorMessage('');

    try {
      const response = await fetch('http://localhost:3001/api/scan', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ network: networkAddress }),
      });

      if (!response.ok) {
        // Try to parse a specific error message from the backend, otherwise show a generic one.
        const errorData = await response.json().catch(() => ({ error: `Request failed with status: ${response.status}` }));
        setErrorMessage(errorData.error || 'An unknown error occurred during the scan.');
        setScanStatus('error');
        return;
      }

      const discoveredServices = await response.json();
      onScanComplete(discoveredServices);
      onClose();

    } catch (err) {
      // This catch block handles network errors (e.g., server not running)
      console.error(err);
      setErrorMessage('Scan failed. Is the backend server running? Make sure you have started the server in the `server` directory and that nmap is installed. See README.md for details.');
      setScanStatus('error');
    }
  };

  const renderContent = () => {
    switch (scanStatus) {
      case 'scanning':
        return (
          <div className="text-center py-8">
            <Loader2 className="h-12 w-12 text-teal-400 animate-spin mx-auto" />
            <h3 className="mt-4 text-xl font-semibold text-white">Scanning Network</h3>
            <p className="text-gray-400 mt-1">
              Discovering services on <span className="font-mono text-teal-300">{networkAddress}</span>...
            </p>
             <p className="text-gray-500 text-sm mt-2">This may take a few minutes depending on your network.</p>
          </div>
        );
      case 'error':
         return (
          <div>
            <div className="flex items-center mb-4">
              <div className="p-2 bg-red-500/20 rounded-full mr-4">
                <ServerCrash className="h-6 w-6 text-red-400" />
              </div>
              <h2 className="text-2xl font-bold text-white">Scan Failed</h2>
            </div>
            <div className="bg-red-900/50 border border-red-700 text-red-200 px-4 py-3 rounded-lg relative" role="alert">
                <strong className="font-bold flex items-center"><AlertTriangle className="mr-2"/>Error Details</strong>
                <span className="block sm:inline mt-2">{errorMessage}</span>
            </div>
            <div className="mt-8 flex justify-end space-x-3">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-sm font-medium text-gray-300 bg-gray-700 rounded-md hover:bg-gray-600"
              >
                Close
              </button>
              <button
                type="button"
                onClick={() => setScanStatus('idle')}
                className="px-6 py-2 text-sm font-medium text-white bg-teal-500 rounded-md shadow-sm hover:bg-teal-600"
              >
                Try Again
              </button>
            </div>
          </div>
        );
      case 'idle':
      default:
        return (
          <form onSubmit={handleStartScan}>
            <div className="flex items-center mb-4">
              <div className="p-2 bg-teal-500/20 rounded-full mr-4">
                <ScanSearch className="h-6 w-6 text-teal-400" />
              </div>
              <h2 className="text-2xl font-bold text-white">Scan Your Local Network</h2>
            </div>
            <div className="text-gray-300 space-y-4">
              <p>
                Enter your local network address range below to automatically discover web services.
              </p>
              <div>
                <label htmlFor="network-address" className="block text-sm font-medium text-gray-300 mb-1">
                  Network IP Address (CIDR format)
                </label>
                <input
                  type="text"
                  id="network-address"
                  value={networkAddress}
                  onChange={(e) => setNetworkAddress(e.target.value)}
                  className="mt-1 block w-full bg-gray-900 border border-gray-600 rounded-md shadow-sm py-2 px-3 text-white focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm font-mono"
                  placeholder="e.g., 192.168.1.0/24"
                  required
                />
              </div>
            </div>
            <div className="mt-8 flex justify-end space-x-3">
               <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 text-sm font-medium text-gray-300 bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500"
                >
                  Cancel
                </button>
              <button
                type="submit"
                className="inline-flex items-center px-6 py-2 text-sm font-medium text-white bg-teal-500 rounded-md shadow-sm hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-teal-500"
              >
                Start Scan
              </button>
            </div>
          </form>
        );
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center p-4">
      <div ref={modalRef} className="bg-gray-800 rounded-lg shadow-xl w-full max-w-lg p-6 border border-gray-700 transition-all duration-300">
        {renderContent()}
      </div>
    </div>
  );
};

export default ScanInfoModal;