@using BackOffice.Pages.Content.Components.SettingsModels

<MudExpansionPanels MultiExpansion="true" Elevation="0">

    @* ── Hero Buttons ── *@
    <MudExpansionPanel Text="دکمه‌های هیرو" Icon="@Icons.Material.Filled.TouchApp" IsInitiallyExpanded="true">
        <MudStack Spacing="2" Class="pa-2">
            <MudTextField @bind-Value="Model.HeroButtonPrimaryText"
                          Label="متن دکمه اصلی"
                          Placeholder="شروع رایگان"
                          Variant="Variant.Outlined" />
            <MudTextField @bind-Value="Model.HeroButtonSecondaryText"
                          Label="متن دکمه ثانویه"
                          Placeholder="آخرین اخبار"
                          Variant="Variant.Outlined" />
        </MudStack>
    </MudExpansionPanel>

    @* ── Trust Badges ── *@
    <MudExpansionPanel Text="@($"نشان‌های اعتماد ({Model.TrustBadges.Count})")" Icon="@Icons.Material.Filled.Verified">
        <MudStack Spacing="2" Class="pa-2">
            @for (var i = 0; i < Model.TrustBadges.Count; i++)
            {
                var index = i;
                <MudPaper Elevation="0" Class="pa-3 rounded-lg" Style="border:1px solid var(--mud-palette-lines-default);">
                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                        <MudText Typo="Typo.caption" Class="mud-text-secondary" Style="min-width:20px;">@(index + 1)</MudText>
                        <MudTextField @bind-Value="Model.TrustBadges[index].IconName"
                                      Label="نام آیکون"
                                      Placeholder="Timer"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Style="flex:1;" />
                        <MudTextField @bind-Value="Model.TrustBadges[index].Text"
                                      Label="متن"
                                      Placeholder="ثبت‌نام زیر ۲ دقیقه"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Style="flex:2;" />
                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                       Color="Color.Error"
                                       Size="Size.Small"
                                       OnClick="() => Model.TrustBadges.RemoveAt(index)" />
                    </MudStack>
                </MudPaper>
            }
            <MudButton StartIcon="@Icons.Material.Filled.Add"
                       Color="Color.Primary"
                       Variant="Variant.Text"
                       OnClick="() => Model.TrustBadges.Add(new TrustBadgeModel())">
                افزودن نشان
            </MudButton>
        </MudStack>
    </MudExpansionPanel>

    @* ── Steps ── *@
    <MudExpansionPanel Text="@($"مراحل ({Model.Steps.Count})")" Icon="@Icons.Material.Filled.FormatListNumbered">
        <MudStack Spacing="2" Class="pa-2">
            <MudTextField @bind-Value="Model.StepsTitle"
                          Label="عنوان بخش مراحل"
                          Placeholder="سه گام تا شروع"
                          Variant="Variant.Outlined" />
            @for (var i = 0; i < Model.Steps.Count; i++)
            {
                var index = i;
                <MudPaper Elevation="0" Class="pa-3 rounded-lg" Style="border:1px solid var(--mud-palette-lines-default);">
                    <MudStack Spacing="2">
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudAvatar Size="Size.Small" Color="Color.Primary">
                                <MudText Typo="Typo.caption" Style="color:#fff;">@(index + 1)</MudText>
                            </MudAvatar>
                            <MudTextField @bind-Value="Model.Steps[index].Title"
                                          Label="عنوان مرحله"
                                          Variant="Variant.Outlined"
                                          Margin="Margin.Dense"
                                          Style="flex:1;" />
                            <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                           Color="Color.Error"
                                           Size="Size.Small"
                                           OnClick="() => Model.Steps.RemoveAt(index)" />
                        </MudStack>
                        <MudTextField @bind-Value="Model.Steps[index].Description"
                                      Label="توضیحات"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Lines="2" />
                    </MudStack>
                </MudPaper>
            }
            <MudButton StartIcon="@Icons.Material.Filled.Add"
                       Color="Color.Primary"
                       Variant="Variant.Text"
                       OnClick="() => Model.Steps.Add(new StepModel())">
                افزودن مرحله
            </MudButton>
        </MudStack>
    </MudExpansionPanel>

    @* ── Features ── *@
    <MudExpansionPanel Text="@($"ویژگی‌ها ({Model.Features.Count})")" Icon="@Icons.Material.Filled.Star">
        <MudStack Spacing="2" Class="pa-2">
            <MudTextField @bind-Value="Model.FeaturesTitle"
                          Label="عنوان بخش ویژگی‌ها"
                          Placeholder="چرا کارا بازار سلامت؟"
                          Variant="Variant.Outlined" />
            @for (var i = 0; i < Model.Features.Count; i++)
            {
                var index = i;
                <MudPaper Elevation="0" Class="pa-3 rounded-lg" Style="border:1px solid var(--mud-palette-lines-default);">
                    <MudStack Spacing="2">
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudText Typo="Typo.caption" Class="mud-text-secondary" Style="min-width:20px;">@(index + 1)</MudText>
                            <MudTextField @bind-Value="Model.Features[index].IconName"
                                          Label="نام آیکون"
                                          Placeholder="VerifiedUser"
                                          Variant="Variant.Outlined"
                                          Margin="Margin.Dense"
                                          Style="flex:1;" />
                            <MudTextField @bind-Value="Model.Features[index].Title"
                                          Label="عنوان"
                                          Variant="Variant.Outlined"
                                          Margin="Margin.Dense"
                                          Style="flex:2;" />
                            <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                           Color="Color.Error"
                                           Size="Size.Small"
                                           OnClick="() => Model.Features.RemoveAt(index)" />
                        </MudStack>
                        <MudTextField @bind-Value="Model.Features[index].Description"
                                      Label="توضیحات"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Lines="2" />
                    </MudStack>
                </MudPaper>
            }
            <MudButton StartIcon="@Icons.Material.Filled.Add"
                       Color="Color.Primary"
                       Variant="Variant.Text"
                       OnClick="() => Model.Features.Add(new FeatureModel())">
                افزودن ویژگی
            </MudButton>
        </MudStack>
    </MudExpansionPanel>

    @* ── Stats ── *@
    <MudExpansionPanel Text="@($"آمار ({Model.Stats.Count})")" Icon="@Icons.Material.Filled.BarChart">
        <MudStack Spacing="2" Class="pa-2">
            <MudTextField @bind-Value="Model.StatsTitle"
                          Label="عنوان بخش آمار"
                          Placeholder="آمار پلتفرم"
                          Variant="Variant.Outlined" />
            @for (var i = 0; i < Model.Stats.Count; i++)
            {
                var index = i;
                <MudPaper Elevation="0" Class="pa-3 rounded-lg" Style="border:1px solid var(--mud-palette-lines-default);">
                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                        <MudText Typo="Typo.caption" Class="mud-text-secondary" Style="min-width:20px;">@(index + 1)</MudText>
                        <MudTextField @bind-Value="Model.Stats[index].Label"
                                      Label="عنوان"
                                      Placeholder="رشد میانگین تیم"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Style="flex:2;" />
                        <MudNumericField @bind-Value="Model.Stats[index].Value"
                                         Label="مقدار"
                                         Variant="Variant.Outlined"
                                         Margin="Margin.Dense"
                                         Style="flex:1;" />
                        <MudTextField @bind-Value="Model.Stats[index].Suffix"
                                      Label="پسوند"
                                      Placeholder="%+"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Style="flex:1;" />
                        <MudSelect @bind-Value="Model.Stats[index].Color"
                                   Label="رنگ"
                                   Variant="Variant.Outlined"
                                   Margin="Margin.Dense"
                                   Style="flex:1;">
                            <MudSelectItem Value="@("Primary")">آبی</MudSelectItem>
                            <MudSelectItem Value="@("Secondary")">بنفش</MudSelectItem>
                            <MudSelectItem Value="@("Success")">سبز</MudSelectItem>
                            <MudSelectItem Value="@("Warning")">زرد</MudSelectItem>
                            <MudSelectItem Value="@("Error")">قرمز</MudSelectItem>
                            <MudSelectItem Value="@("Info")">آبی روشن</MudSelectItem>
                        </MudSelect>
                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                       Color="Color.Error"
                                       Size="Size.Small"
                                       OnClick="() => Model.Stats.RemoveAt(index)" />
                    </MudStack>
                </MudPaper>
            }
            <MudButton StartIcon="@Icons.Material.Filled.Add"
                       Color="Color.Primary"
                       Variant="Variant.Text"
                       OnClick="() => Model.Stats.Add(new StatModel())">
                افزودن آمار
            </MudButton>
        </MudStack>
    </MudExpansionPanel>

    @* ── Testimonials ── *@
    <MudExpansionPanel Text="@($"نظرات مشتریان ({Model.Testimonials.Count})")" Icon="@Icons.Material.Filled.FormatQuote">
        <MudStack Spacing="2" Class="pa-2">
            <MudTextField @bind-Value="Model.TestimonialsTitle"
                          Label="عنوان بخش نظرات"
                          Placeholder="اعتماد مشتریان"
                          Variant="Variant.Outlined" />
            @for (var i = 0; i < Model.Testimonials.Count; i++)
            {
                var index = i;
                <MudPaper Elevation="0" Class="pa-3 rounded-lg" Style="border:1px solid var(--mud-palette-lines-default);">
                    <MudStack Spacing="2">
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudText Typo="Typo.caption" Class="mud-text-secondary" Style="min-width:20px;">@(index + 1)</MudText>
                            <MudTextField @bind-Value="Model.Testimonials[index].Name"
                                          Label="نام"
                                          Placeholder="شرکت سینا نت"
                                          Variant="Variant.Outlined"
                                          Margin="Margin.Dense"
                                          Style="flex:1;" />
                            <MudTextField @bind-Value="Model.Testimonials[index].Role"
                                          Label="سمت"
                                          Placeholder="مدیر عملیات"
                                          Variant="Variant.Outlined"
                                          Margin="Margin.Dense"
                                          Style="flex:1;" />
                            <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                           Color="Color.Error"
                                           Size="Size.Small"
                                           OnClick="() => Model.Testimonials.RemoveAt(index)" />
                        </MudStack>
                        <MudTextField @bind-Value="Model.Testimonials[index].Quote"
                                      Label="متن نظر"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Lines="2" />
                    </MudStack>
                </MudPaper>
            }
            <MudButton StartIcon="@Icons.Material.Filled.Add"
                       Color="Color.Primary"
                       Variant="Variant.Text"
                       OnClick="() => Model.Testimonials.Add(new TestimonialModel())">
                افزودن نظر
            </MudButton>
        </MudStack>
    </MudExpansionPanel>

    @* ── FAQs ── *@
    <MudExpansionPanel Text="@($"سوالات متداول ({Model.Faqs.Count})")" Icon="@Icons.Material.Filled.QuestionAnswer">
        <MudStack Spacing="2" Class="pa-2">
            <MudTextField @bind-Value="Model.FaqTitle"
                          Label="عنوان بخش سوالات"
                          Placeholder="سوالات متداول"
                          Variant="Variant.Outlined" />
            @for (var i = 0; i < Model.Faqs.Count; i++)
            {
                var index = i;
                <MudPaper Elevation="0" Class="pa-3 rounded-lg" Style="border:1px solid var(--mud-palette-lines-default);">
                    <MudStack Spacing="2">
                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                            <MudText Typo="Typo.caption" Class="mud-text-secondary" Style="min-width:20px;">@(index + 1)</MudText>
                            <MudTextField @bind-Value="Model.Faqs[index].Question"
                                          Label="سوال"
                                          Variant="Variant.Outlined"
                                          Margin="Margin.Dense"
                                          Style="flex:1;" />
                            <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                           Color="Color.Error"
                                           Size="Size.Small"
                                           OnClick="() => Model.Faqs.RemoveAt(index)" />
                        </MudStack>
                        <MudTextField @bind-Value="Model.Faqs[index].Answer"
                                      Label="پاسخ"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      Lines="2" />
                    </MudStack>
                </MudPaper>
            }
            <MudButton StartIcon="@Icons.Material.Filled.Add"
                       Color="Color.Primary"
                       Variant="Variant.Text"
                       OnClick="() => Model.Faqs.Add(new FaqModel())">
                افزودن سوال
            </MudButton>
        </MudStack>
    </MudExpansionPanel>

    @* ── CTA Section ── *@
    <MudExpansionPanel Text="بنر فراخوان (CTA)" Icon="@Icons.Material.Filled.Campaign">
        <MudStack Spacing="2" Class="pa-2">
            <MudTextField @bind-Value="Model.CtaTitle"
                          Label="عنوان CTA"
                          Placeholder="آماده شروع هستید؟"
                          Variant="Variant.Outlined" />
            <MudTextField @bind-Value="Model.CtaDescription"
                          Label="توضیحات CTA"
                          Placeholder="همین الان ثبت‌نام کنید..."
                          Variant="Variant.Outlined"
                          Lines="2" />
            <MudTextField @bind-Value="Model.CtaButtonText"
                          Label="متن دکمه CTA"
                          Placeholder="شروع رایگان"
                          Variant="Variant.Outlined" />
        </MudStack>
    </MudExpansionPanel>

    @* ── Blog Section ── *@
    <MudExpansionPanel Text="بخش بلاگ" Icon="@Icons.Material.Filled.Article">
        <MudStack Spacing="2" Class="pa-2">
            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                <MudSwitch T="bool" @bind-Value="_featuredBlogEnabled" Color="Color.Primary" />
                <MudText Typo="Typo.body2">نمایش آخرین مطالب بلاگ</MudText>
            </MudStack>
        </MudStack>
    </MudExpansionPanel>

</MudExpansionPanels>

@code {
    [Parameter] public LandingSettingsModel Model { get; set; } = new();

    private bool _featuredBlogEnabled
    {
        get => Model.FeaturedBlogEnabled ?? true;
        set => Model.FeaturedBlogEnabled = value;
    }
}
