package components

import (
	"fmt"
	"github.com/starfleetcptn/gomft/internal/db"
	"context"
	"github.com/starfleetcptn/gomft/components/providers/source"
	"github.com/starfleetcptn/gomft/components/providers/destination"
	"github.com/starfleetcptn/gomft/components/providers/common"
)

type ConfigFormData struct {
	Config *db.TransferConfig
	IsNew  bool
	// Fields for pre-rendering flags on edit
	InitialCommand     *db.RcloneCommand
	SelectedFlagsMap   map[uint]bool
	SelectedFlagValues map[uint]string
}

func getConfigFormTitle(isNew bool) string {
	if isNew {
		return "New Configuration"
	}
	return "Edit Configuration"
}

func getInitialData(config *db.TransferConfig) string {
	// Default values for a new configuration
	name := ""
	sourceType := "local"
	sourcePath := ""
	sourceHost := ""
	sourcePort := 0  // Initialize to 0 to trigger default setting
	sourceUser := ""
	sourcePassword := ""
	sourceKeyFile := ""
	sourceAuthType := "password"
	sourceBucket := ""
	sourceRegion := ""
	sourceAccessKey := ""
	sourceSecretKey := ""
	sourceEndpoint := ""
	sourceShare := ""
	sourceDomain := ""
	sourcePassiveMode := false
	sourceClientId := ""
	sourceClientSecret := ""
	sourceDriveId := ""
	sourceTeamDrive := ""
	// Google Photos source fields
	sourceReadOnly := false
	sourceStartYear := 2025
	sourceIncludeArchived := false
	
	filePattern := ""
	outputPattern := "${filename}"
	
	destinationType := "local"
	destinationPath := ""
	destHost := ""
	destPort := 0  // Initialize to 0 to trigger default setting
	destUser := ""
	destPassword := ""
	destKeyFile := ""
	destAuthType := "password"
	destBucket := ""
	destRegion := ""
	destAccessKey := ""
	destSecretKey := ""
	destEndpoint := ""
	destShare := ""
	destDomain := ""
	destPassiveMode := false
	destClientId := ""
	destClientSecret := ""
	destDriveId := ""
	destTeamDrive := ""
	// Google Photos destination fields
	destReadOnly := false
	destStartYear := 2025
	destIncludeArchived := false
	
	archivePath := ""
	archiveEnabled := false
	deleteAfterTransfer := false
	skipProcessedFiles := true
	maxConcurrentTransfers := 4
	rcloneFlags := ""
	commandId := uint(1) // Default to 'copy' command
	commandFlags := ""
	useBuiltinAuthSource := true
	useBuiltinAuthDest := true

	// If editing an existing config, populate with those values
	if config != nil {
		name = config.Name
		sourceType = config.SourceType
		sourcePath = config.SourcePath
		sourceHost = config.SourceHost
		sourcePort = config.SourcePort
		sourceUser = config.SourceUser
		sourcePassword = config.SourcePassword
		sourceKeyFile = config.SourceKeyFile
		if sourceKeyFile != "" && sourcePassword == "" {
			sourceAuthType = "key"
		}
		sourceBucket = config.SourceBucket
		sourceRegion = config.SourceRegion
		sourceAccessKey = config.SourceAccessKey
		sourceSecretKey = config.SourceSecretKey
		sourceEndpoint = config.SourceEndpoint
		sourceShare = config.SourceShare
		sourceDomain = config.SourceDomain
		sourcePassiveMode = config.GetSourcePassiveMode()
		sourceClientId = config.SourceClientID
		sourceClientSecret = config.SourceClientSecret
		sourceDriveId = config.SourceDriveID
		sourceTeamDrive = config.SourceTeamDrive
		
		// Google Photos source fields
		if config.SourceReadOnly != nil {
			sourceReadOnly = *config.SourceReadOnly
		}
		// sourceStartYear = config.SourceStartYear
		if config.SourceIncludeArchived != nil {
			sourceIncludeArchived = *config.SourceIncludeArchived
		}
		
		filePattern = config.FilePattern
		outputPattern = config.OutputPattern
		
		destinationType = config.DestinationType
		destinationPath = config.DestinationPath
		destHost = config.DestHost
		destPort = config.DestPort
		destUser = config.DestUser
		destPassword = config.DestPassword
		destKeyFile = config.DestKeyFile
		if destKeyFile != "" && destPassword == "" {
			destAuthType = "key"
		}
		destBucket = config.DestBucket
		destRegion = config.DestRegion
		destAccessKey = config.DestAccessKey
		destSecretKey = config.DestSecretKey
		destEndpoint = config.DestEndpoint
		destShare = config.DestShare
		destDomain = config.DestDomain
		destPassiveMode = config.GetDestPassiveMode()
		destClientId = config.DestClientID
		destClientSecret = config.DestClientSecret
		destDriveId = config.DestDriveID
		destTeamDrive = config.DestTeamDrive
		
		// Google Photos destination fields
		if config.DestReadOnly != nil {
			destReadOnly = *config.DestReadOnly
		}
		// destStartYear = config.DestStartYear
		if config.DestIncludeArchived != nil {
			destIncludeArchived = *config.DestIncludeArchived
		}
		
		archivePath = config.ArchivePath
		archiveEnabled = config.GetArchiveEnabled()
		deleteAfterTransfer = config.GetDeleteAfterTransfer()
		skipProcessedFiles = config.GetSkipProcessedFiles()
		maxConcurrentTransfers = config.MaxConcurrentTransfers
		if maxConcurrentTransfers <= 0 {
			maxConcurrentTransfers = 1 // Ensure at least 1 concurrent transfer
		}
		rcloneFlags = config.RcloneFlags
		commandId = config.CommandID
		commandFlags = config.CommandFlags
		if config.UseBuiltinAuthSource != nil {
			useBuiltinAuthSource = *config.UseBuiltinAuthSource
		} else if sourceClientId != "" || sourceClientSecret != "" {
			useBuiltinAuthSource = false
		}
		if config.UseBuiltinAuthDest != nil {
			useBuiltinAuthDest = *config.UseBuiltinAuthDest
		} else if destClientId != "" || destClientSecret != "" {
			useBuiltinAuthDest = false
		}
	}

	// Return the JSON-formatted string with all the data, add new path validation states
	return fmt.Sprintf(`{
		name: '%s',
		sourceType: '%s',
		sourcePath: '%s',
		sourceHost: '%s',
		sourcePort: %d,
		sourceUser: '%s',
		sourcePassword: '%s',
		sourceKeyFile: '%s',
		sourceAuthType: '%s',
		sourceBucket: '%s',
		sourceRegion: '%s',
		sourceAccessKey: '%s',
		sourceSecretKey: '%s',
		sourceEndpoint: '%s',
		sourceShare: '%s',
		sourceDomain: '%s',
		sourcePassiveMode: %v,
		sourceClientId: '%s',
		sourceClientSecret: '%s',
		sourceDriveId: '%s',
		sourceTeamDrive: '%s',
		sourceReadOnly: %v,
		sourceStartYear: %d,
		sourceIncludeArchived: %v,
		
		filePattern: '%s',
		outputPattern: '%s',
		
		destinationType: '%s',
		destinationPath: '%s',
		destHost: '%s',
		destPort: %d,
		destUser: '%s',
		destPassword: '%s',
		destKeyFile: '%s',
		destAuthType: '%s',
		destBucket: '%s',
		destRegion: '%s',
		destAccessKey: '%s',
		destSecretKey: '%s',
		destEndpoint: '%s',
		destShare: '%s',
		destDomain: '%s',
		destPassiveMode: %v,
		destClientId: '%s',
		destClientSecret: '%s',
		destDriveId: '%s',
		destTeamDrive: '%s',
		destReadOnly: %v,
		destStartYear: %d,
		destIncludeArchived: %v,
		
		useBuiltinAuthSource: %v,
		useBuiltinAuthDest: %v,
		
		archivePath: '%s',
		archiveEnabled: %v,
		deleteAfterTransfer: %v,
		skipProcessedFiles: %v,
		maxConcurrentTransfers: %d,
		rcloneFlags: '%s',
		commandId: %d,
		commandFlags: '%s',

		// Path validation states
		sourcePathValid: null,
		sourcePathError: '',
		destPathValid: null,
		destPathError: '',
		
		// Command configuration
		requiresDestination: true,

		// Methods for path validation
		checkPath(path, type) {
			if (!path) {
				this[type + 'PathValid'] = false;
				this[type + 'PathError'] = 'Path cannot be empty';
				return;
			}

			fetch('/check-path?path=' + encodeURIComponent(path))
				.then(response => response.json())
				.then(data => {
					this[type + 'PathValid'] = data.valid;
					this[type + 'PathError'] = data.error || '';
				})
				.catch(error => {
					this[type + 'PathValid'] = false;
					this[type + 'PathError'] = 'Error checking path: ' + error.message;
				});
		},
		
		// Method to check if destination is required based on command type
		updateCommandRequirements() {
			// List of commands that don't require destination
			const listingCommands = ['ls', 'lsd', 'lsl', 'lsf', 'lsjson', 'listremotes'];
			const infoCommands = ['md5sum', 'sha1sum', 'size', 'version'];
			const dirCommands = ['mkdir', 'rmdir', 'rmdirs'];
			const destructiveCommands = ['delete', 'purge'];
			const specialSinglePathCommands = ['obscure'];
			
			// Get the command name from the command ID
			// This will need coordination with your backend to ensure the IDs match the commands
			let commandName = '';
			switch(parseInt(this.commandId)) {
				// Correct mapping based on internal/db/migrations/009_add_rclone_tables.go
				case 1: commandName = 'copy'; break;
				case 2: commandName = 'sync'; break;
				case 3: commandName = 'bisync'; break;
				case 4: commandName = 'move'; break;
				case 5: commandName = 'delete'; break;
				case 6: commandName = 'purge'; break;
				case 7: commandName = 'mkdir'; break;
				case 8: commandName = 'rmdir'; break;
				case 9: commandName = 'rmdirs'; break;
				case 10: commandName = 'check'; break;
				case 11: commandName = 'ls'; break;
				case 12: commandName = 'lsd'; break;
				case 13: commandName = 'lsl'; break;
				case 14: commandName = 'lsf'; break;
				case 15: commandName = 'lsjson'; break;
				case 16: commandName = 'md5sum'; break;
				case 17: commandName = 'sha1sum'; break;
				case 18: commandName = 'size'; break;
				case 19: commandName = 'version'; break;
				case 20: commandName = 'cleanup'; break;
				case 21: commandName = 'dedupe'; break;
				case 22: commandName = 'copyto'; break;
				case 23: commandName = 'moveto'; break;
				case 24: commandName = 'listremotes'; break;
				case 25: commandName = 'obscure'; break;
				case 26: commandName = 'cryptcheck'; break;
				default: commandName = 'copy'; // Default to copy if ID is unknown
			}
			
			console.log('Command ID:', this.commandId, 'Command Name:', commandName);
			
			// Check if the command requires a destination
			if (
				listingCommands.includes(commandName) ||
				infoCommands.includes(commandName) ||
				(dirCommands.includes(commandName) && !this.rcloneFlags.includes('--dst')) ||
				destructiveCommands.includes(commandName) ||
				specialSinglePathCommands.includes(commandName) ||
				commandName === 'version' ||
				commandName === 'listremotes'
			) {
				this.requiresDestination = false;
				console.log('Destination not required for command:', commandName);
			} else {
				this.requiresDestination = true;
				console.log('Destination required for command:', commandName);
			}
		}
	}`, 
	name, sourceType, sourcePath, sourceHost, sourcePort, sourceUser, sourcePassword, sourceKeyFile, sourceAuthType,
	sourceBucket, sourceRegion, sourceAccessKey, sourceSecretKey, sourceEndpoint, sourceShare, sourceDomain, sourcePassiveMode,
	sourceClientId, sourceClientSecret, sourceDriveId, sourceTeamDrive,
	sourceReadOnly, sourceStartYear, sourceIncludeArchived,
	filePattern, outputPattern,
	destinationType, destinationPath, destHost, destPort, destUser, destPassword, destKeyFile, destAuthType,
	destBucket, destRegion, destAccessKey, destSecretKey, destEndpoint, destShare, destDomain, destPassiveMode,
	destClientId, destClientSecret, destDriveId, destTeamDrive,
	destReadOnly, destStartYear, destIncludeArchived,
	useBuiltinAuthSource, useBuiltinAuthDest,
	archivePath, archiveEnabled, deleteAfterTransfer, skipProcessedFiles, maxConcurrentTransfers, rcloneFlags, 
	commandId, commandFlags)
}

templ ConfigForm(ctx context.Context, data ConfigFormData) {
	@LayoutWithContext(getConfigFormTitle(data.IsNew), ctx) {
		<!-- Main Content -->
		<section class="py-8 px-4">
			<div class="mx-auto max-w-3xl">
				<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6 md:p-8">
					<!-- Form Header -->
					<div class="mb-8 text-center">
						<div class="flex justify-center mb-4">
							<span class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-50 dark:bg-blue-900">
								<i class="fas fa-cog text-blue-600 dark:text-blue-300 text-2xl"></i>
							</span>
						</div>
						<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
							{ getConfigFormTitle(data.IsNew) }
						</h1>
						<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
							Configure your file transfer settings using the form below
						</p>
					</div>

					<!-- Main Form -->
					<form 
						id="config-form"
						class="space-y-6" 
						if data.IsNew {
							hx-post="/configs"
						} else {
							hx-post={ fmt.Sprintf("/configs/%d", data.Config.ID) }
						}
						hx-target="body"
						hx-redirect="/configs"
						hx-boost="true"
						x-data={ getInitialData(data.Config) }
						x-init="$nextTick(() => { 
							// Ensure initial form state displays correctly on load
							sourceType = sourceType || 'local';
							destinationType = destinationType || 'local';
							
							// Set default ports based on connection type
							if (sourcePort === 0 || !sourcePort) {
								if (sourceType === 'sftp') {
									sourcePort = 22;
								} else if (sourceType === 'ftp') {
									sourcePort = 21;
								} else if (sourceType === 'hetzner') {
									sourcePort = 23;
								}
							}
							
							if (destPort === 0 || !destPort) {
								if (destinationType === 'sftp') {
									destPort = 22;
								} else if (destinationType === 'ftp') {
									destPort = 21;
								} else if (destinationType === 'hetzner') {
									destPort = 23;
								}
							}

							// Ensure maxConcurrentTransfers is at least 1
							if (!maxConcurrentTransfers || maxConcurrentTransfers < 1) {
								maxConcurrentTransfers = 1;
							}

							// Initialize command requirements
							updateCommandRequirements();
						})"
						x-effect="if (sourceType === 'sftp' && (sourcePort === 0 || sourcePort === 21 || sourcePort === 23)) {
							sourcePort = 22;
							console.log('Updating source port to 22 for SFTP');
						} else if (sourceType === 'ftp' && (sourcePort === 0 || sourcePort === 22 || sourcePort === 23)) {
							sourcePort = 21;
							console.log('Updating source port to 21 for FTP');
						} else if (sourceType === 'hetzner' && (sourcePort === 0 || sourcePort === 22 || sourcePort === 21)) {
							sourcePort = 23;
							console.log('Updating source port to 23 for Hetzner');
						} else if (destinationType === 'sftp' && (destPort === 0 || destPort === 21 || destPort === 23)) {
							destPort = 22;
							console.log('Updating destination port to 22 for SFTP');
						} else if (destinationType === 'ftp' && (destPort === 0 || destPort === 22 || destPort === 23)) {
							destPort = 21;
							console.log('Updating destination port to 21 for FTP');
						} else if (destinationType === 'hetzner' && (destPort === 0 || destPort === 22 || destPort === 21)) {
							destPort = 23;
							console.log('Updating destination port to 23 for Hetzner');
						}"
						@formvalidation
						>
						
						<!-- Form Error Container -->
						<div id="form-errors" class="hidden p-4 mb-6 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-red-800/20 dark:text-red-400 border border-red-200 dark:border-red-900" role="alert">
							<div class="flex items-center mb-2">
								<i class="fas fa-exclamation-circle text-red-600 dark:text-red-500 mr-2"></i>
								<h3 class="text-base font-medium text-red-800 dark:text-red-400">Please correct the following errors:</h3>
							</div>
							<ul id="error-list" class="ml-5 list-disc space-y-1"></ul>
						</div>
						
						<!-- Configuration Details Section -->
						<div class="p-4 mb-4 bg-blue-50 border border-blue-100 rounded-lg dark:bg-blue-900/20 dark:border-blue-900">
							<div class="flex items-center mb-2">
								<i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mr-2"></i>
								<h3 class="text-lg font-medium text-blue-600 dark:text-blue-400">Configuration Details</h3>
							</div>
							<p class="text-sm text-blue-700 dark:text-blue-300">
								Give your configuration a descriptive name and set up the source and destination locations.
							</p>
						</div>
							
						<!-- Name field -->
						<div class="mb-2">
							<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
								Configuration Name <span class="text-red-500">*</span>
							</label>
							<input 
								type="text" 
								id="name" 
								name="name" 
								x-model="name" 
								required 
								aria-required="true"
								class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
								placeholder="My Transfer Configuration"
							/>
							<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Choose a descriptive name to identify this configuration.</p>
						</div>
						
						<!-- Rclone Command Configuration Section -->
						<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
							<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
								<i class="fas fa-terminal mr-2 text-blue-500 dark:text-blue-400"></i>Command Configuration
							</h3>
							
							<!-- Additonal Rclone Flags -->
							@common.RcloneFlags(data.Config.CommandID) // Pass current command ID

							<!-- Container for flags, pre-rendered on edit, loaded via HTMX on new/change -->
							<div id="command-flags-container" class="mt-4">
								if !data.IsNew && data.InitialCommand != nil {
									// Pre-render flags if editing and command data is available
									@common.RcloneCommandFlagsContent(data.InitialCommand, data.SelectedFlagsMap, data.SelectedFlagValues)
								}
							</div>

							
						</div>
						
						<!-- Source Configuration Section -->
						<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
							<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
								<i class="fas fa-upload mr-2 text-blue-500 dark:text-blue-400"></i>Source Configuration
							</h3>
							
							<!-- Source selection -->
							@common.SourceSelection()
							
              <div class="mt-4">
                <button type="button"
                  class="text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800"
                  hx-post="/configs/test-connection"
                  hx-include="closest form"
                  hx-vals='{"providerType": "source"}'
                  hx-swap="none"
                  hx-indicator="#source-test-spinner">
                  <i class="fas fa-plug mr-1"></i> Test Source
                  <span id="source-test-spinner" class="htmx-indicator ml-2"><i class="fas fa-spinner fa-spin"></i></span>
                </button>
                <!-- Removed target div, result shown via toast -->
              </div>

							<!-- Source type specific forms -->
							<template x-if="sourceType === 'local'">
								@source.LocalSourceForm()
							</template>
							
							<template x-if="sourceType === 'sftp'">
								@source.SFTPSourceForm()
							</template>

							<template x-if="sourceType === 'ftp'">
								@source.FTPSourceForm()
							</template>

							<template x-if="sourceType === 's3'">
								@source.S3SourceForm()
							</template>

							<template x-if="sourceType === 'b2'">
								@source.B2SourceForm()
							</template>
							
							<template x-if="sourceType === 'wasabi'">
								@source.WasabiSourceForm()
							</template>
							
							<template x-if="sourceType === 'minio'">
								@source.MinIOSourceForm()
							</template>
							
							<template x-if="sourceType === 'smb'">
								@source.SMBSourceForm()
							</template>
							
							<template x-if="sourceType === 'webdav'">
								@source.WebDAVSourceForm()
							</template>

							<template x-if="sourceType === 'nextcloud'">
								@source.NextCloudSourceForm()
							</template>

							<template x-if="sourceType === 'gdrive'">
								@source.GoogleDriveSourceForm()
							</template>

							<template x-if="sourceType === 'gphotos'">
								@source.GooglePhotosSourceForm()
							</template>

							<template x-if="sourceType === 'hetzner'">
								@source.HetznerSourceForm()
							</template>
						</div>
						
						<!-- File Pattern Section -->
						<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
							<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
								<i class="fas fa-filter mr-2 text-blue-500 dark:text-blue-400"></i>File Patterns
							</h3>
							
							<!-- File pattern fields -->
							@common.FilePatternFields()
						</div>
						
						<!-- Destination Configuration Section (only shown if required) -->
						<div x-show="requiresDestination" x-transition class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
							<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
								<i class="fas fa-download mr-2 text-blue-500 dark:text-blue-400"></i>Destination Configuration
							</h3>
							
							<!-- Destination selection -->
							@common.DestinationSelection()
							
              <div class="mt-4">
                <button type="button"
                  class="text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800"
                  hx-post="/configs/test-connection"
                  hx-include="closest form"
                  hx-vals='{"providerType": "destination"}'
                  hx-swap="none"
                  hx-indicator="#dest-test-spinner">
                  <i class="fas fa-plug mr-1"></i> Test Destination
                  <span id="dest-test-spinner" class="htmx-indicator ml-2"><i class="fas fa-spinner fa-spin"></i></span>
                </button>
                <!-- Removed target div, result shown via toast -->
              </div>

							<!-- Destination type specific forms -->
							<template x-if="destinationType === 'local'">
								@destination.LocalDestinationForm()
							</template>
							
							<template x-if="destinationType === 'sftp'">
								@destination.SFTPDestinationForm()
							</template>

							<template x-if="destinationType === 'ftp'">
								@destination.FTPDestinationForm()
							</template>
							
							<template x-if="destinationType === 's3'">
								@destination.S3DestinationForm()
							</template>
							
							<template x-if="destinationType === 'b2'">
								@destination.B2DestinationForm()
							</template>
							
							<template x-if="destinationType === 'wasabi'">
								@destination.WasabiDestinationForm()
							</template>
							
							<template x-if="destinationType === 'minio'">
								@destination.MinIODestinationForm()
							</template>
							
							<template x-if="destinationType === 'smb'">
								@destination.SMBDestinationForm()
							</template>	

							<template x-if="destinationType === 'nextcloud'">
								@destination.NextCloudDestinationForm()
							</template>

							<template x-if="destinationType === 'webdav'">
								@destination.WebDAVDestinationForm()
							</template>

							<template x-if="destinationType === 'gdrive'">
								@destination.GoogleDriveDestinationForm()
							</template>
							
							<template x-if="destinationType === 'gphotos'">
								@destination.GooglePhotosDestinationForm()
							</template>

							<template x-if="destinationType === 'hetzner'">
								@destination.HetznerDestinationForm()
							</template>
						</div>
						
						<!-- Advanced Options Section -->
						<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
							<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
								<i class="fas fa-cogs mr-2 text-blue-500 dark:text-blue-400"></i>Advanced Options
							</h3>
							
							<!-- Archive options -->
							<div class="mb-6">
								<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Archive Settings</h4>
								@common.ArchiveOptions()
							</div>
							

							

						</div>
						
						<!-- Form Actions -->
						<div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
							<a href="/configs" 
								class="text-white bg-gray-500 hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
								<i class="fas fa-arrow-left mr-2"></i>Cancel
							</a>
							<button 
								type="submit" 
								class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
								<span class="flex items-center">
									<i class="fas fa-save mr-2"></i>
									if data.IsNew {
										Create Configuration
									} else {
										Save Changes
									}
								</span>
							</button>
						</div>
					</form>
				</div>
				
				<!-- Help Card -->
				<div class="mt-4 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
					<div class="flex">
						<div class="flex-shrink-0">
							<i class="fas fa-lightbulb text-yellow-400 text-xl"></i>
						</div>
						<div class="ml-4">
							<h5 class="text-sm font-medium text-gray-900 dark:text-white">Configuration Tips</h5>
							<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
								Configure your file transfer settings carefully for optimal performance. Use file patterns to filter which files are transferred, and consider using archive options to keep track of processed files.
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>
	}
}

templ formvalidation() {
	<script>
		document.addEventListener('htmx:beforeRequest', function(evt) {
			if (evt.detail.elt.id === 'config-form') {
				const formErrors = document.getElementById('form-errors');
				const errorList = document.getElementById('error-list');
				let errors = [];
				let hasErrors = false;
				
				// Clear previous errors
				errorList.innerHTML = '';
				formErrors.classList.add('hidden');
				
				// Validate name
				const name = document.getElementById('name').value;
				if (!name || name.trim() === '') {
					errors.push('Configuration name is required');
					hasErrors = true;
				}
				
				// Source path validation
				// Note: Most source and destination forms already have HTML5 validation 
				// with the required attribute, but we do additional JS validation here
				// to provide a better user experience with a centralized error display
				const sourcePath = document.getElementById('source_path')?.value;
				if (!sourcePath || sourcePath.trim() === '') {
					errors.push('Source path is required');
					hasErrors = true;
				}
				
				// Get source type
				const sourceType = document.querySelector('input[name="source_type"]').value;
				
				// For remote source, validate credentials
				if (sourceType !== 'local') {
					// Host validation for remote sources
					const sourceHost = document.getElementById('source_host')?.value;
					if (!sourceHost || sourceHost.trim() === '') {
						errors.push('Source host is required for remote connections');
						hasErrors = true;
					}
					
					// Port validation
					const sourcePort = document.getElementById('source_port')?.value;
					if (!sourcePort || isNaN(parseInt(sourcePort)) || parseInt(sourcePort) <= 0 || parseInt(sourcePort) > 65535) {
						errors.push('Source port must be a valid port number (1-65535)');
						hasErrors = true;
					}
					
					// Username validation for SFTP/FTP/etc.
					if (['sftp', 'ftp', 'hetzner'].includes(sourceType)) {
						const sourceUser = document.getElementById('source_username')?.value;
						if (!sourceUser || sourceUser.trim() === '') {
							errors.push('Source username is required');
							hasErrors = true;
						}
						
						// Check auth type
						const sourceAuthType = document.querySelector('input[name="source_auth_type"]:checked')?.value;
						
						// Password validation if using password auth
						if (sourceAuthType === 'password') {
							const sourcePassword = document.getElementById('source_password')?.value;
							if (!sourcePassword || sourcePassword.trim() === '') {
								errors.push('Source password is required when using password authentication');
								hasErrors = true;
							}
						} else if (sourceAuthType === 'key') {
							// Key file validation if using key auth
							const sourceKeyFile = document.getElementById('source_key_file')?.value;
							if (!sourceKeyFile || sourceKeyFile.trim() === '') {
								errors.push('Source key file path is required when using key authentication');
								hasErrors = true;
							}
						}
					}
					
					// S3/B2/Wasabi specific validations
					if (['s3', 'b2', 'wasabi', 'minio'].includes(sourceType)) {
						const sourceAccessKey = document.getElementById('source_access_key')?.value;
						const sourceSecretKey = document.getElementById('source_secret_key')?.value;
						
						if (!sourceAccessKey || sourceAccessKey.trim() === '') {
							errors.push('Source access key is required');
							hasErrors = true;
						}
						
						if (!sourceSecretKey || sourceSecretKey.trim() === '') {
							errors.push('Source secret key is required');
							hasErrors = true;
						}
						
						// Bucket validation
						const sourceBucket = document.getElementById('source_bucket')?.value;
						if (!sourceBucket || sourceBucket.trim() === '') {
							errors.push('Source bucket is required');
							hasErrors = true;
						}
					}
				}
				
				// Validate destination if it's a required field
				const requiresDestination = document.querySelector('form').__x.$data.requiresDestination;
				if (requiresDestination) {
					// Destination path validation
					const destPath = document.getElementById('destination_path')?.value;
					if (!destPath || destPath.trim() === '') {
						errors.push('Destination path is required');
						hasErrors = true;
					}
					
					// Get destination type
					const destType = document.querySelector('input[name="destination_type"]').value;
					
					// For remote destination, validate credentials
					if (destType !== 'local') {
						// Host validation for remote destinations
						const destHost = document.getElementById('destination_host')?.value;
						if (!destHost || destHost.trim() === '') {
							errors.push('Destination host is required for remote connections');
							hasErrors = true;
						}
						
						// Port validation
						const destPort = document.getElementById('destination_port')?.value;
						if (!destPort || isNaN(parseInt(destPort)) || parseInt(destPort) <= 0 || parseInt(destPort) > 65535) {
							errors.push('Destination port must be a valid port number (1-65535)');
							hasErrors = true;
						}
						
						// Username validation for SFTP/FTP/etc.
						if (['sftp', 'ftp', 'hetzner'].includes(destType)) {
							const destUser = document.getElementById('destination_username')?.value;
							if (!destUser || destUser.trim() === '') {
								errors.push('Destination username is required');
								hasErrors = true;
							}
							
							// Check auth type
							const destAuthType = document.querySelector('input[name="destination_auth_type"]:checked')?.value;
							
							// Password validation if using password auth
							if (destAuthType === 'password') {
								const destPassword = document.getElementById('destination_password')?.value;
								if (!destPassword || destPassword.trim() === '') {
									errors.push('Destination password is required when using password authentication');
									hasErrors = true;
								}
							} else if (destAuthType === 'key') {
								// Key file validation if using key auth
								const destKeyFile = document.getElementById('destination_key_file')?.value;
								if (!destKeyFile || destKeyFile.trim() === '') {
									errors.push('Destination key file path is required when using key authentication');
									hasErrors = true;
								}
							}
						}
						
						// S3/B2/Wasabi specific validations
						if (['s3', 'b2', 'wasabi', 'minio'].includes(destType)) {
							const destAccessKey = document.getElementById('destination_access_key')?.value;
							const destSecretKey = document.getElementById('destination_secret_key')?.value;
							
							if (!destAccessKey || destAccessKey.trim() === '') {
								errors.push('Destination access key is required');
								hasErrors = true;
							}
							
							if (!destSecretKey || destSecretKey.trim() === '') {
								errors.push('Destination secret key is required');
								hasErrors = true;
							}
							
							// Bucket validation
							const destBucket = document.getElementById('destination_bucket')?.value;
							if (!destBucket || destBucket.trim() === '') {
								errors.push('Destination bucket is required');
								hasErrors = true;
							}
						}
					}
				}
				
				// Check for concurrent transfers
				const maxTransfers = document.getElementById('max_concurrent_transfers')?.value;
				if (maxTransfers && (isNaN(parseInt(maxTransfers)) || parseInt(maxTransfers) < 1)) {
					errors.push('Maximum concurrent transfers must be at least 1');
					hasErrors = true;
				}
				
				// If errors exist, prevent form submission and display errors
				if (hasErrors) {
					evt.preventDefault();
					
					// Display errors
					errors.forEach(error => {
						const li = document.createElement('li');
						li.textContent = error;
						errorList.appendChild(li);
					});
					
					formErrors.classList.remove('hidden');
					
					// Scroll to the errors
					formErrors.scrollIntoView({ behavior: 'smooth', block: 'start' });
				}
			}
		});
	</script>
}