@using PowderCoating.Application.DTOs.Wizard
@model WizardStep6Dto
@{
    ViewData["Title"] = "Setup Wizard — Chart of Accounts";
    var progress = ViewBag.Progress as WizardProgressDto ?? new WizardProgressDto();
    int step = ViewBag.Step as int? ?? 11;
}
@section Styles { @await Html.PartialAsync("_WizardStyles") }

<div class="wizard-layout">
    @await Html.PartialAsync("_WizardProgress", progress)

    <div class="wizard-content">
        <div class="wizard-step-header">
            <span class="wizard-step-badge">Step @step of @WizardProgressDto.TotalSteps</span>
            <h2><i class="bi bi-bar-chart me-2"></i>Chart of Accounts</h2>
            <p class="text-secondary">Your Chart of Accounts has been pre-loaded with standard accounts for a powder coating business. Review them below.</p>
        </div>

        <div class="wizard-card">
            <h5 class="wizard-card-title">Account Summary</h5>
            <p class="text-secondary mb-4">These accounts are used throughout the system to categorize expenses, revenue, and inventory. You can manage them in detail from <strong>Accounting &rarr; Chart of Accounts</strong>.</p>

            <div class="row g-3 mb-4">
                <div class="col-6 col-md-3">
                    <div class="text-center p-3 rounded border">
                        <div class="fs-2 fw-bold text-primary">@Model.AccountCount</div>
                        <div class="text-secondary small">Total Accounts</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="text-center p-3 rounded border">
                        <div class="fs-2 fw-bold text-success">@Model.RevenueAccounts</div>
                        <div class="text-secondary small">Revenue Accounts</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="text-center p-3 rounded border">
                        <div class="fs-2 fw-bold text-danger">@Model.ExpenseAccounts</div>
                        <div class="text-secondary small">Expense Accounts</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="text-center p-3 rounded border">
                        <div class="fs-2 fw-bold text-info">@Model.AssetAccounts</div>
                        <div class="text-secondary small">Asset Accounts</div>
                    </div>
                </div>
            </div>

            <div class="alert alert-info alert-permanent d-flex align-items-start gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle-fill mt-1 flex-shrink-0"></i>
                <div>
                    <strong>Already set up for you.</strong> No action needed here. You can review and customize accounts anytime from the Accounting module.
                    <a asp-controller="Accounts" asp-action="Index" class="ms-1">View Chart of Accounts &rarr;</a>
                </div>
            </div>
        </div>

        <form asp-action="PostStep11" method="post">
            @Html.AntiForgeryToken()
            @await Html.PartialAsync("_WizardFooter", step)
        </form>
    </div>
</div>