<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.InstancesView"
             x:DataType="vm:InstancesViewModel">

    <DockPanel>
        <!-- Page header -->
        <StackPanel DockPanel.Dock="Top" Margin="0,0,0,4">
            <TextBlock Text="Instances" Classes="pageTitle" />
            <TextBlock Text="View and manage deployed CMS stacks" Classes="pageSubtitle" />
        </StackPanel>

        <!-- Toolbar -->
        <Border DockPanel.Dock="Top" Classes="toolbar" Margin="0,0,0,16">
            <Grid ColumnDefinitions="*,Auto">
                <StackPanel Orientation="Horizontal" Spacing="8">
                    <Button Content="Refresh" Command="{Binding LoadInstancesCommand}" />
                    <Button Content="Details" Classes="accent" Command="{Binding OpenDetailsCommand}"
                            IsEnabled="{Binding !IsBusy}"
                            ToolTip.Tip="View credentials and manage this instance." />
                    <Button Content="Inspect" Command="{Binding InspectInstanceCommand}" />
                    <Button Content="Delete" Classes="danger" Command="{Binding DeleteInstanceCommand}" />
                    <Border Width="1" Background="{StaticResource BorderSubtleBrush}" Margin="4,2" />
                    <Button Content="Rotate DB Password" Command="{Binding RotateMySqlPasswordCommand}"
                            IsEnabled="{Binding !IsBusy}"
                            ToolTip.Tip="Generate a new MySQL password, update the Docker secret, and redeploy the stack." />
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="8">
                    <TextBox Text="{Binding FilterText}" Watermark="Filter by name..." Width="220" />
                    <Button Content="Search" Command="{Binding LoadInstancesCommand}" />
                </StackPanel>
            </Grid>
        </Border>

        <!-- Status -->
        <TextBlock DockPanel.Dock="Bottom" Text="{Binding StatusMessage}" Classes="status"
                   Margin="0,10,0,0" />

        <!-- Services panel (shown when inspecting) -->
        <Border DockPanel.Dock="Right" Width="360"
                IsVisible="{Binding SelectedServices.Count}"
                Classes="card" Margin="16,0,0,0">
            <StackPanel Spacing="4">
                <TextBlock Text="Stack Services" Classes="sectionTitle"
                           Foreground="{StaticResource AccentBrush}" Margin="0,0,0,10" />
                <ItemsControl ItemsSource="{Binding SelectedServices}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Background="#232336" CornerRadius="6" Padding="12,10" Margin="0,3"
                                    BorderBrush="{StaticResource BorderSubtleBrush}" BorderThickness="1">
                                <StackPanel Spacing="3">
                                    <TextBlock Text="{Binding Name}" FontWeight="SemiBold" FontSize="13" />
                                    <TextBlock Text="{Binding Image}" FontSize="11"
                                               Foreground="{StaticResource TextMutedBrush}" />
                                    <TextBlock Text="{Binding Replicas, StringFormat='Replicas: {0}'}"
                                               FontSize="11" Foreground="{StaticResource TextSecondaryBrush}" />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </Border>

        <!-- Instance list -->
        <DataGrid ItemsSource="{Binding Instances}"
                  SelectedItem="{Binding SelectedInstance}"
                  AutoGenerateColumns="False"
                  IsReadOnly="True"
                  GridLinesVisibility="Horizontal"
                  CanUserResizeColumns="True">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Stack" Binding="{Binding StackName}" Width="150" />
                <DataGridTextColumn Header="Abbrev" Binding="{Binding CustomerAbbrev}" Width="70" />
                <DataGridTextColumn Header="Services" Binding="{Binding ServiceCount}" Width="70" />
                <DataGridTextColumn Header="Host" Binding="{Binding HostLabel}" Width="150" />
            </DataGrid.Columns>
        </DataGrid>
    </DockPanel>
</UserControl>
