<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:OTSSignsOrchestrator.Desktop.ViewModels"
             x:Class="OTSSignsOrchestrator.Desktop.Views.SettingsView"
             x:DataType="vm:SettingsViewModel">

    <DockPanel>
        <!-- Page header -->
        <StackPanel DockPanel.Dock="Top" Margin="0,0,0,4">
            <TextBlock Text="Settings" Classes="pageTitle" />
            <TextBlock Text="Global configuration for deployments and integrations" Classes="pageSubtitle" />
        </StackPanel>

        <!-- Top toolbar -->
        <Border DockPanel.Dock="Top" Classes="toolbar" Margin="0,0,0,16">
            <StackPanel Orientation="Horizontal" Spacing="10">
                <Button Content="Save All Settings"
                        Classes="accent"
                        Command="{Binding SaveCommand}"
                        IsEnabled="{Binding !IsBusy}"
                        FontWeight="SemiBold" Padding="20,8" />
                <Button Content="Reload" Command="{Binding LoadCommand}" IsEnabled="{Binding !IsBusy}" />
                <TextBlock Text="{Binding StatusMessage}" Classes="status"
                           VerticalAlignment="Center" Margin="6,0,0,0" />
            </StackPanel>
        </Border>

        <!-- Scrollable settings content -->
        <ScrollViewer>
            <StackPanel Spacing="16" Margin="0,0,16,16" MaxWidth="820">

                <!-- ═══ Git Repository ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#60A5FA" />
                            <TextBlock Text="Git Repository" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#60A5FA" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="Template repository cloned for each new instance."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6" />

                        <TextBlock Text="Repository URL" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding GitRepoUrl}"
                                 Watermark="https://github.com/org/template-repo.git" />

                        <TextBlock Text="Personal Access Token (PAT)" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding GitRepoPat}" PasswordChar="●"
                                 Watermark="ghp_xxxx..." />
                    </StackPanel>
                </Border>

                <!-- ═══ MySQL Connection ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#4ADE80" />
                            <TextBlock Text="MySQL Connection" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#4ADE80" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="Admin credentials used to create databases and users for new instances."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6" />

                        <Grid ColumnDefinitions="3*,12,1*">
                            <StackPanel Grid.Column="0" Spacing="4">
                                <TextBlock Text="Host" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                                <TextBox Text="{Binding MySqlHost}" Watermark="cms-sql.otshosting.app" />
                            </StackPanel>
                            <StackPanel Grid.Column="2" Spacing="4">
                                <TextBlock Text="Port" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                                <TextBox Text="{Binding MySqlPort}" Watermark="3306" />
                            </StackPanel>
                        </Grid>

                        <TextBlock Text="Admin Username" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding MySqlAdminUser}" Watermark="root" />

                        <TextBlock Text="Admin Password" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding MySqlAdminPassword}" PasswordChar="●" />

                        <Button Content="Test MySQL Connection"
                                Command="{Binding TestMySqlConnectionCommand}"
                                IsEnabled="{Binding !IsBusy}"
                                Margin="0,6,0,0" />
                    </StackPanel>
                </Border>

                <!-- ═══ SMTP Settings ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#F472B6" />
                            <TextBlock Text="SMTP Settings" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#F472B6" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="Email configuration applied to all CMS instances."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6" />

                        <TextBlock Text="SMTP Server (host:port)" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding SmtpServer}" Watermark="smtp.azurecomm.net:587" />

                        <TextBlock Text="SMTP Username" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding SmtpUsername}" Watermark="user@domain.com" />

                        <TextBlock Text="SMTP Password" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding SmtpPassword}" PasswordChar="●" />

                        <StackPanel Orientation="Horizontal" Spacing="20" Margin="0,4,0,0">
                            <CheckBox Content="Use TLS" IsChecked="{Binding SmtpUseTls}" />
                            <CheckBox Content="Use STARTTLS" IsChecked="{Binding SmtpUseStartTls}" />
                        </StackPanel>

                        <TextBlock Text="Rewrite Domain" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding SmtpRewriteDomain}" Watermark="ots-signs.com" />

                        <TextBlock Text="SMTP Hostname" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding SmtpHostname}" Watermark="demo.ots-signs.com" />

                        <TextBlock Text="From Line Override" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding SmtpFromLineOverride}" Watermark="NO" />
                    </StackPanel>
                </Border>

                <!-- ═══ Pangolin / Newt ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#FBBF24" />
                            <TextBlock Text="Pangolin (Newt Tunnel)" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#FBBF24" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="Global Pangolin endpoint. Newt ID and Secret are configured per-instance."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6" />

                        <TextBlock Text="Pangolin Endpoint URL" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding PangolinEndpoint}" Watermark="https://app.pangolin.net" />
                    </StackPanel>
                </Border>

                <!-- ═══ NFS Volumes ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#C084FC" />
                            <TextBlock Text="NFS Volumes" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#C084FC" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="Network share settings for Docker volumes. Volumes will be mounted via NFS."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6" />

                        <TextBlock Text="NFS Server (hostname/IP)" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding NfsServer}" Watermark="nas.local" />

                        <TextBlock Text="Export Path" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding NfsExport}" Watermark="/srv/nfs" />

                        <TextBlock Text="Export Folder (optional)" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding NfsExportFolder}" Watermark="ots_cms (leave empty for export root)" />

                        <TextBlock Text="Extra Mount Options" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding NfsOptions}" Watermark="Additional options after nfsvers=4,proto=tcp" />
                    </StackPanel>
                </Border>

                <!-- ═══ Instance Defaults ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#2DD4BF" />
                            <TextBlock Text="Instance Defaults" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#2DD4BF" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="Default Docker images, naming templates, and PHP settings for new instances. Use {abbrev} as a placeholder for the customer abbreviation."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6" TextWrapping="Wrap" />

                        <!-- Sub-section: Docker Images -->
                        <TextBlock Text="Docker Images" FontSize="13" FontWeight="SemiBold" Margin="0,8,0,4"
                                   Foreground="{StaticResource TextPrimaryBrush}" />

                        <TextBlock Text="CMS Image" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultCmsImage}"
                                 Watermark="ghcr.io/xibosignage/xibo-cms:release-4.2.3" />

                        <TextBlock Text="Newt Image" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultNewtImage}" Watermark="fosrl/newt" />

                        <TextBlock Text="Memcached Image" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultMemcachedImage}" Watermark="memcached:alpine" />

                        <TextBlock Text="QuickChart Image" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultQuickChartImage}" Watermark="ianw/quickchart" />

                        <!-- Sub-section: Naming Templates -->
                        <Border Height="1" Background="{StaticResource BorderSubtleBrush}" Margin="0,12,0,4" />
                        <TextBlock Text="Naming Templates" FontSize="13" FontWeight="SemiBold" Margin="0,4,0,4"
                                   Foreground="{StaticResource TextPrimaryBrush}" />

                        <TextBlock Text="CMS Server Name Template" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultCmsServerNameTemplate}"
                                 Watermark="{}{abbrev}.ots-signs.com" />

                        <TextBlock Text="Theme Host Path Template" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultThemeHostPath}"
                                 Watermark="/cms/{abbrev}-cms-theme-custom" />

                        <TextBlock Text="MySQL Database Name Template" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultMySqlDbTemplate}" Watermark="{}{abbrev}_cms_db" />

                        <TextBlock Text="MySQL User Template" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding DefaultMySqlUserTemplate}" Watermark="{}{abbrev}_cms_user" />

                        <!-- Sub-section: PHP Settings -->
                        <Border Height="1" Background="{StaticResource BorderSubtleBrush}" Margin="0,12,0,4" />
                        <TextBlock Text="PHP Settings" FontSize="13" FontWeight="SemiBold" Margin="0,4,0,4"
                                   Foreground="{StaticResource TextPrimaryBrush}" />

                        <Grid ColumnDefinitions="1*,12,1*,12,1*">
                            <StackPanel Grid.Column="0" Spacing="4">
                                <TextBlock Text="Post Max Size" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                                <TextBox Text="{Binding DefaultPhpPostMaxSize}" Watermark="10G" />
                            </StackPanel>
                            <StackPanel Grid.Column="2" Spacing="4">
                                <TextBlock Text="Upload Max Filesize" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                                <TextBox Text="{Binding DefaultPhpUploadMaxFilesize}" Watermark="10G" />
                            </StackPanel>
                            <StackPanel Grid.Column="4" Spacing="4">
                                <TextBlock Text="Max Execution Time" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                                <TextBox Text="{Binding DefaultPhpMaxExecutionTime}" Watermark="600" />
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </Border>

                <!-- ═══ Bitwarden Secrets Manager ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#818CF8" />
                            <TextBlock Text="Bitwarden Secrets Manager" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#818CF8" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="Stores per-instance admin passwords and OAuth2 secrets. Uses a machine account access token."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6"
                                   TextWrapping="Wrap" />

                        <Grid ColumnDefinitions="1*,12,1*">
                            <StackPanel Grid.Column="0" Spacing="4">
                                <TextBlock Text="Identity URL" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                                <TextBox Text="{Binding BitwardenIdentityUrl}"
                                         Watermark="https://identity.bitwarden.com" />
                            </StackPanel>
                            <StackPanel Grid.Column="2" Spacing="4">
                                <TextBlock Text="API URL" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                                <TextBox Text="{Binding BitwardenApiUrl}"
                                         Watermark="https://api.bitwarden.com" />
                            </StackPanel>
                        </Grid>

                        <TextBlock Text="Machine Account Access Token" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding BitwardenAccessToken}" PasswordChar="●"
                                 Watermark="0.xxxxxxxx.yyyyyyy:zzzzzz" />

                        <TextBlock Text="Organization ID" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding BitwardenOrganizationId}"
                                 Watermark="00000000-0000-0000-0000-000000000000" />

                        <TextBlock Text="Project ID (optional — secrets are organized into this project)" FontSize="12"
                                   Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding BitwardenProjectId}"
                                 Watermark="00000000-0000-0000-0000-000000000000" />

                        <Button Content="Test Bitwarden Connection"
                                Command="{Binding TestBitwardenConnectionCommand}"
                                IsEnabled="{Binding !IsBusy}"
                                Margin="0,6,0,0" />
                    </StackPanel>
                </Border>

                <!-- ═══ Xibo Bootstrap OAuth2 ═══ -->
                <Border Classes="card">
                    <StackPanel Spacing="8">
                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="0,0,0,4">
                            <Border Width="4" Height="20" CornerRadius="2" Background="#F97316" />
                            <TextBlock Text="Xibo Bootstrap OAuth2" FontSize="16" FontWeight="SemiBold"
                                       Foreground="#F97316" VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock Text="A pre-configured Xibo OAuth2 client_credentials application used for post-install setup (creating admin users, registering OTS app, setting theme). Create once in the Xibo admin panel of any instance."
                                   FontSize="12" Foreground="{StaticResource TextMutedBrush}" Margin="0,0,0,6"
                                   TextWrapping="Wrap" />

                        <TextBlock Text="Bootstrap Client ID" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding XiboBootstrapClientId}"
                                 Watermark="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

                        <TextBlock Text="Bootstrap Client Secret" FontSize="12" Foreground="{StaticResource TextSecondaryBrush}" />
                        <TextBox Text="{Binding XiboBootstrapClientSecret}" PasswordChar="●" />

                        <Button Content="Save &amp; Verify"
                                Command="{Binding TestXiboBootstrapCommand}"
                                IsEnabled="{Binding !IsBusy}"
                                Margin="0,6,0,0" />
                    </StackPanel>
                </Border>

            </StackPanel>
        </ScrollViewer>
    </DockPanel>
</UserControl>
