import React, { useState } from 'react'
import './FTPConnectionDialog.css'

/**
 * FTPConnectionDialog - Dialog for connecting to FTP/SFTP servers
 */
export const FTPConnectionDialog = ({ onConnect, onCancel }) => {
    const [formData, setFormData] = useState({
        protocol: 'ftp',
        host: '',
        port: '21',
        username: 'anonymous',
        password: '',
        path: '/',
        secure: false,
        proxyUrl: 'ws://localhost:8080/ftp-proxy'
    })

    const [connecting, setConnecting] = useState(false)
    const [error, setError] = useState(null)

    const handleChange = (field, value) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }))

        // Auto-update port when protocol changes
        if (field === 'protocol') {
            if (value === 'ftp') {
                setFormData(prev => ({ ...prev, port: '21' }))
            } else if (value === 'sftp') {
                setFormData(prev => ({ ...prev, port: '22' }))
            } else if (value === 'ftps') {
                setFormData(prev => ({ ...prev, port: '990' }))
            }
        }
    }

    const handleSubmit = async (e) => {
        e.preventDefault()
        setError(null)
        setConnecting(true)

        try {
            const config = {
                type: formData.protocol,
                host: formData.host,
                port: parseInt(formData.port),
                username: formData.username,
                password: formData.password,
                path: formData.path,
                secure: formData.protocol === 'ftps' || formData.secure,
                proxyUrl: formData.proxyUrl
            }

            await onConnect(config)
        } catch (err) {
            setError(err.message)
            setConnecting(false)
        }
    }

    const presets = [
        {
            name: 'Local FTP Server',
            host: 'localhost',
            port: '21',
            username: 'anonymous',
            password: ''
        },
        {
            name: 'Test FTP Server',
            host: 'ftp.dlptest.com',
            port: '21',
            username: 'dlpuser',
            password: 'rNrKYTX9g7z3RgJRmxWuGHbeu'
        }
    ]

    const loadPreset = (preset) => {
        setFormData(prev => ({
            ...prev,
            host: preset.host,
            port: preset.port,
            username: preset.username,
            password: preset.password
        }))
    }

    return (
        <div className="ftp-connection-dialog">
            <div className="ftp-dialog__header">
                <h2>Connect to Remote Server</h2>
                <button
                    className="ftp-dialog__close"
                    onClick={onCancel}
                    type="button"
                >
                    <span className="material-icons">close</span>
                </button>
            </div>

            <form className="ftp-dialog__form" onSubmit={handleSubmit}>
                {/* Protocol Selection */}
                <div className="ftp-form-group">
                    <label>Protocol</label>
                    <select
                        value={formData.protocol}
                        onChange={(e) => handleChange('protocol', e.target.value)}
                        required
                    >
                        <option value="ftp">FTP</option>
                        <option value="ftps">FTPS (FTP over SSL/TLS)</option>
                        <option value="sftp">SFTP (SSH File Transfer)</option>
                    </select>
                </div>

                {/* Presets */}
                <div className="ftp-form-group">
                    <label>Quick Connect</label>
                    <div className="ftp-presets">
                        {presets.map((preset, index) => (
                            <button
                                key={index}
                                type="button"
                                className="ftp-preset-button"
                                onClick={() => loadPreset(preset)}
                            >
                                <span className="material-icons">cloud</span>
                                {preset.name}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Host */}
                <div className="ftp-form-group">
                    <label>Host</label>
                    <input
                        type="text"
                        value={formData.host}
                        onChange={(e) => handleChange('host', e.target.value)}
                        placeholder="ftp.example.com"
                        required
                    />
                </div>

                {/* Port */}
                <div className="ftp-form-group">
                    <label>Port</label>
                    <input
                        type="number"
                        value={formData.port}
                        onChange={(e) => handleChange('port', e.target.value)}
                        min="1"
                        max="65535"
                        required
                    />
                </div>

                {/* Username */}
                <div className="ftp-form-group">
                    <label>Username</label>
                    <input
                        type="text"
                        value={formData.username}
                        onChange={(e) => handleChange('username', e.target.value)}
                        placeholder="anonymous"
                        required
                    />
                </div>

                {/* Password */}
                <div className="ftp-form-group">
                    <label>Password</label>
                    <input
                        type="password"
                        value={formData.password}
                        onChange={(e) => handleChange('password', e.target.value)}
                        placeholder="Leave empty for anonymous"
                    />
                </div>

                {/* Initial Path */}
                <div className="ftp-form-group">
                    <label>Initial Path</label>
                    <input
                        type="text"
                        value={formData.path}
                        onChange={(e) => handleChange('path', e.target.value)}
                        placeholder="/"
                    />
                </div>

                {/* Proxy URL */}
                <div className="ftp-form-group">
                    <label>
                        WebSocket Proxy URL
                        <span className="ftp-form-hint">
                            Required for browser FTP access
                        </span>
                    </label>
                    <input
                        type="text"
                        value={formData.proxyUrl}
                        onChange={(e) => handleChange('proxyUrl', e.target.value)}
                        placeholder="ws://localhost:8080/ftp-proxy"
                        required
                    />
                </div>

                {/* Error Message */}
                {error && (
                    <div className="ftp-dialog__error">
                        <span className="material-icons">error</span>
                        <span>{error}</span>
                    </div>
                )}

                {/* Info Message */}
                <div className="ftp-dialog__info">
                    <span className="material-icons">info</span>
                    <div>
                        <strong>Note:</strong> FTP access from browser requires a WebSocket proxy server.
                        <br />
                        See documentation for setup instructions.
                    </div>
                </div>

                {/* Actions */}
                <div className="ftp-dialog__actions">
                    <button
                        type="button"
                        className="ftp-button ftp-button--secondary"
                        onClick={onCancel}
                        disabled={connecting}
                    >
                        Cancel
                    </button>
                    <button
                        type="submit"
                        className="ftp-button ftp-button--primary"
                        disabled={connecting}
                    >
                        {connecting ? (
                            <>
                                <span className="material-icons rotating">refresh</span>
                                Connecting...
                            </>
                        ) : (
                            <>
                                <span className="material-icons">cloud_upload</span>
                                Connect
                            </>
                        )}
                    </button>
                </div>
            </form>
        </div>
    )
}