<UserControl x:Class="ClaudeDo.Installer.Pages.InstallPage.InstallPageView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ClaudeDo.Installer.Pages.InstallPage"
             xmlns:loc="clr-namespace:ClaudeDo.Installer.Localization"
             d:DataContext="{d:DesignInstance local:InstallPageViewModel}"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Header -->
        <StackPanel Grid.Row="0" Margin="0,0,0,16">
            <TextBlock Text="{loc:Tr installer.install.title}" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,4"/>
            <TextBlock Text="{loc:Tr installer.install.subtitle}"
                       Foreground="{StaticResource TextSecondaryBrush}" TextWrapping="Wrap"/>
        </StackPanel>

        <!-- Step List -->
        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
            <ItemsControl ItemsSource="{Binding Steps}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="{x:Type local:StepViewModel}">
                        <Border Margin="0,0,0,6" Padding="10,8"
                                Background="{StaticResource IslandBgBrush}"
                                BorderBrush="{StaticResource BorderSubtleBrush}"
                                BorderThickness="1" CornerRadius="4">
                            <StackPanel>
                                <!-- Step header -->
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <!-- Status indicator -->
                                    <Ellipse Grid.Column="0" Width="10" Height="10" Margin="0,0,10,0"
                                             VerticalAlignment="Center">
                                        <Ellipse.Style>
                                            <Style TargetType="Ellipse">
                                                <Setter Property="Fill" Value="{StaticResource StatusGrayBrush}"/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Status}" Value="Running">
                                                        <Setter Property="Fill" Value="{StaticResource StatusOrangeBrush}"/>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Status}" Value="Done">
                                                        <Setter Property="Fill" Value="{StaticResource StatusGreenBrush}"/>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Status}" Value="Failed">
                                                        <Setter Property="Fill" Value="{StaticResource StatusRedBrush}"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Ellipse.Style>
                                    </Ellipse>

                                    <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="13"
                                               VerticalAlignment="Center"/>
                                </Grid>

                                <!-- Messages (expandable) -->
                                <ItemsControl ItemsSource="{Binding Messages}" Margin="20,4,0,0"
                                              Visibility="{Binding IsExpanded, Converter={StaticResource BoolToVisConverter}}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding}" FontSize="11" FontFamily="Consolas"
                                                       Foreground="{StaticResource TextDimBrush}"
                                                       TextWrapping="Wrap"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>

        <!-- Progress Bar -->
        <ProgressBar Grid.Row="2" Value="{Binding OverallProgress}" Maximum="100"
                     Margin="0,12,0,0"
                     Visibility="{Binding IsInstalling, Converter={StaticResource BoolToVisConverter}}"/>

        <!-- Action buttons -->
        <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,12,0,0">
            <Button Content="{loc:Tr installer.nav.cancel}" Command="{Binding CancelInstallCommand}"
                    Visibility="{Binding IsInstalling, Converter={StaticResource BoolToVisConverter}}"
                    Margin="0,0,8,0"/>

            <Button Content="{loc:Tr installer.install.launch}" Command="{Binding LaunchAppCommand}"
                    Style="{StaticResource AccentButton}"
                    Visibility="{Binding IsComplete, Converter={StaticResource BoolToVisConverter}}"/>
        </StackPanel>
    </Grid>
</UserControl>
