<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
             xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
             xmlns:loc="using:ClaudeDo.Ui.Localization"
             x:Class="ClaudeDo.Ui.Views.Islands.Detail.DescriptionStepsCard"
             x:DataType="vm:DetailsIslandViewModel">

  <UserControl.Styles>
    <!-- Segment switcher in the card header (mirrors the WorkConsole tab look) -->
    <Style Selector="Button.seg-btn">
      <Setter Property="Background"      Value="Transparent" />
      <Setter Property="BorderThickness" Value="0" />
      <Setter Property="Padding"         Value="8,3" />
      <Setter Property="CornerRadius"    Value="6" />
      <Setter Property="FontFamily"      Value="{StaticResource MonoFont}" />
      <Setter Property="FontSize"        Value="{StaticResource FontSizeMono}" />
      <Setter Property="Foreground"      Value="{StaticResource TextMuteBrush}" />
      <Setter Property="Cursor"          Value="Hand" />
    </Style>
    <Style Selector="Button.seg-btn:pointerover /template/ ContentPresenter">
      <Setter Property="Background"             Value="{StaticResource Surface2Brush}" />
      <Setter Property="TextElement.Foreground" Value="{StaticResource TextDimBrush}" />
    </Style>
    <Style Selector="Button.seg-btn.active /template/ ContentPresenter">
      <Setter Property="Background"             Value="{StaticResource Surface3Brush}" />
      <Setter Property="TextElement.Foreground" Value="{StaticResource AccentBrush}" />
    </Style>
    <Style Selector="TextBlock.seg-count">
      <Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
      <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
    </Style>
  </UserControl.Styles>

  <Border Classes="island"
          Background="{DynamicResource Surface2Brush}"
          BorderBrush="{DynamicResource LineBrush}">
    <DockPanel>

      <!-- Header: segment switcher (Description · Steps · Files) + copy + edit -->
      <Border DockPanel.Dock="Top" Classes="island-header">
        <Grid ColumnDefinitions="Auto,*,Auto,Auto" VerticalAlignment="Center">

          <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="2">
            <Button Classes="seg-btn"
                    Classes.active="{Binding IsDescriptionSection}"
                    Command="{Binding SelectDetailSectionCommand}"
                    CommandParameter="description"
                    Content="{loc:Tr details.sections.description}"/>
            <Button Classes="seg-btn"
                    Classes.active="{Binding IsStepsSection}"
                    Command="{Binding SelectDetailSectionCommand}"
                    CommandParameter="steps">
              <StackPanel Orientation="Horizontal" Spacing="5">
                <TextBlock Text="{loc:Tr details.sections.steps}" VerticalAlignment="Center"/>
                <TextBlock Classes="seg-count" Text="{Binding StepsBadge}"
                           VerticalAlignment="Center"
                           IsVisible="{Binding StepsBadge, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
              </StackPanel>
            </Button>
            <Button Classes="seg-btn"
                    Classes.active="{Binding IsFilesSection}"
                    Command="{Binding SelectDetailSectionCommand}"
                    CommandParameter="files">
              <StackPanel Orientation="Horizontal" Spacing="5">
                <TextBlock Text="{loc:Tr details.sections.files}" VerticalAlignment="Center"/>
                <TextBlock Classes="seg-count" Text="{Binding FilesBadge}"
                           VerticalAlignment="Center"
                           IsVisible="{Binding FilesBadge, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
              </StackPanel>
            </Button>
          </StackPanel>

          <!-- Copy formatted -->
          <Button Grid.Column="2"
                  Classes="icon-btn"
                  Margin="0,0,4,0"
                  ToolTip.Tip="{loc:Tr details.copyFormattedTip}"
                  Click="OnCopyClick">
            <PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
          </Button>

          <!-- Preview/Edit toggle (Description section only) -->
          <Button Grid.Column="3"
                  Classes="btn"
                  Padding="8,3"
                  IsVisible="{Binding IsDescriptionSection}"
                  ToolTip.Tip="{loc:Tr details.toggleEditPreviewTip}"
                  Command="{Binding ToggleEditDescriptionCommand}">
            <Panel>
              <TextBlock Text="Preview" IsVisible="{Binding IsEditingDescription}"/>
              <TextBlock Text="Edit"    IsVisible="{Binding !IsEditingDescription}"/>
            </Panel>
          </Button>

        </Grid>
      </Border>

      <!-- Body: only the active section is shown -->
      <ScrollViewer VerticalScrollBarVisibility="Auto">
        <Panel Margin="14">

          <!-- Description -->
          <Panel IsVisible="{Binding IsDescriptionSection}">
            <!-- Edit mode: raw TextBox -->
            <TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
                     AcceptsReturn="True"
                     TextWrapping="Wrap"
                     MinHeight="80"
                     MaxHeight="320"
                     Padding="8"
                     FontFamily="{DynamicResource MonoFont}"
                     FontSize="{StaticResource FontSizeBody}"
                     Background="{DynamicResource Surface3Brush}"
                     BorderBrush="{DynamicResource LineBrush}"
                     BorderThickness="1"
                     CornerRadius="8"
                     IsVisible="{Binding IsEditingDescription}"/>
            <!-- Preview mode: rendered composed text (title + description + open steps) -->
            <ctl:MarkdownView Markdown="{Binding ComposedPreview}"
                              IsVisible="{Binding !IsEditingDescription}"/>
          </Panel>

          <!-- Steps -->
          <StackPanel IsVisible="{Binding IsStepsSection}" Spacing="6">
            <TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
                     PlaceholderText="Add step…"
                     Padding="8"
                     Background="{DynamicResource Surface3Brush}"
                     BorderBrush="{DynamicResource LineBrush}"
                     BorderThickness="1"
                     CornerRadius="8">
              <TextBox.KeyBindings>
                <KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
              </TextBox.KeyBindings>
            </TextBox>

            <!-- Subtask rows -->
            <ItemsControl ItemsSource="{Binding Subtasks}">
              <ItemsControl.ItemTemplate>
                <DataTemplate DataType="vm:SubtaskRowViewModel">
                  <Border Classes="subtask-row" Classes.done="{Binding Done}">
                    <Grid ColumnDefinitions="Auto,*">

                      <!-- Check circle -->
                      <Button Grid.Column="0"
                              Classes="flat"
                              Padding="0"
                              Margin="0,0,8,0"
                              VerticalAlignment="Center"
                              Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).ToggleSubtaskDoneCommand}"
                              CommandParameter="{Binding}">
                        <Ellipse Classes="task-check"
                                 Classes.done="{Binding Done}"
                                 Width="16" Height="16"
                                 Cursor="Hand"/>
                      </Button>

                      <!-- Title / edit -->
                      <Panel Grid.Column="1" VerticalAlignment="Center">
                        <TextBlock Classes="subtask-title"
                                   Text="{Binding Title}"
                                   IsVisible="{Binding !IsEditing}"
                                   FontSize="{StaticResource FontSizeBody}"
                                   Foreground="{DynamicResource TextDimBrush}"
                                   VerticalAlignment="Center"
                                   TextWrapping="Wrap"
                                   Cursor="Ibeam"
                                   Tapped="OnSubtaskTitleTapped"/>
                        <TextBox Classes="subtask-edit"
                                 Text="{Binding Title, Mode=TwoWay}"
                                 IsVisible="{Binding IsEditing}"
                                 FontSize="{StaticResource FontSizeBody}"
                                 AcceptsReturn="False"
                                 TextWrapping="Wrap"
                                 LostFocus="OnSubtaskEditLostFocus">
                          <TextBox.KeyBindings>
                            <KeyBinding Gesture="Enter"
                                        Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).CommitSubtaskEditCommand}"
                                        CommandParameter="{Binding}"/>
                          </TextBox.KeyBindings>
                        </TextBox>
                      </Panel>

                    </Grid>
                  </Border>
                </DataTemplate>
              </ItemsControl.ItemTemplate>
            </ItemsControl>
          </StackPanel>

          <!-- Files -->
          <StackPanel IsVisible="{Binding IsFilesSection}" Spacing="6">
            <!-- Attachment rows -->
            <ItemsControl ItemsSource="{Binding Attachments}">
              <ItemsControl.ItemTemplate>
                <DataTemplate DataType="vm:AttachmentRowViewModel">
                  <Grid ColumnDefinitions="*,Auto,Auto" Margin="0,2,0,2">
                    <TextBlock Grid.Column="0"
                               Text="{Binding FileName}"
                               VerticalAlignment="Center"
                               FontSize="{StaticResource FontSizeBody}"
                               Foreground="{DynamicResource TextDimBrush}"
                               TextTrimming="CharacterEllipsis"/>
                    <TextBlock Grid.Column="1"
                               Text="{Binding SizeText}"
                               VerticalAlignment="Center"
                               Margin="8,0"
                               FontSize="{StaticResource FontSizeBody}"
                               Foreground="{DynamicResource TextMuteBrush}"/>
                    <Button Grid.Column="2"
                            Classes="icon-btn"
                            ToolTip.Tip="{loc:Tr details.attachments.removeTip}"
                            Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).RemoveAttachmentCommand}"
                            CommandParameter="{Binding}">
                      <PathIcon Data="{StaticResource Icon.X}" Width="11" Height="11"/>
                    </Button>
                  </Grid>
                </DataTemplate>
              </ItemsControl.ItemTemplate>
            </ItemsControl>

            <!-- Add file button -->
            <Button Classes="btn"
                    Padding="8,3"
                    HorizontalAlignment="Left"
                    Click="OnAddFileClick"
                    Content="{loc:Tr details.attachments.addFile}"/>

            <!-- Drop status / confirmation -->
            <TextBlock Text="{Binding DropStatus}"
                       IsVisible="{Binding DropStatus, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                       FontSize="{StaticResource FontSizeBody}"
                       Foreground="{DynamicResource TextMuteBrush}"
                       TextWrapping="Wrap"/>
          </StackPanel>

        </Panel>
      </ScrollViewer>
    </DockPanel>
  </Border>

</UserControl>
