@using BTCPayServer.Components.StoreLightningBalance
@using BTCPayServer.Components.StoreLightningServices
@using BTCPayServer.Components.StoreNumbers
@using BTCPayServer.Components.StoreRecentInvoices
@using BTCPayServer.Components.StoreRecentTransactions
@using BTCPayServer.Components.StoreWalletBalance
@using BTCPayServer.Components.AppSales
@using BTCPayServer.Components.AppTopItems
@using BTCPayServer.Services.Apps
@model StoreDashboardViewModel
@{
    ViewData.SetActivePage(StoreNavPages.Dashboard, Model.StoreName, Model.StoreId);
    var store = ViewContext.HttpContext.GetStoreData();
}

<partial name="_StatusMessage" />

<div class="d-flex align-items-center justify-content-between">
    <h2 class="mb-0">@ViewData["Title"]</h2>
    @if (Model.IsSetUp)
    {
        <button type="button" class="btn btn-secondary only-for-js" data-bs-toggle="modal" data-bs-target="#WhatsNew">What's New</button>
    }
</div>

<div class="modal fade" id="WhatsNew" tabindex="-1" aria-labelledby="WhatsNewTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="WhatsNewTitle">What's New</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <vc:icon symbol="close"/>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="alert-heading">Updated in <a href="https://blog.btcpayserver.org/btcpay-server-1-10-0/" target="_blank" rel="noreferrer noopener">v1.10.0</a></h5>
                <p class="mb-2">We've added some more options for refunds and an editor for creating custom forms. You can now also define your own roles with customized access to store features.</p>
                <p class="mb-0">The invoice filter got a facelift and you now have the option to hide sensitive data in the UI (such as amounts and balances).</p>
                <hr style="height:1px;background-color:var(--btcpay-body-text-muted);margin:var(--btcpay-space-m) 0;" />
                <h5 class="alert-heading">Updated in <a href="https://blog.btcpayserver.org/btcpay-server-1-9-0/" target="_blank" rel="noreferrer noopener">v1.9.0</a></h5>
                <p class="mb-2">Lots of improvements for our new checkout experience, which is now also the default for new stores — better NFC support, improved receipts and … confetti! 🎉</p>
                <p class="mb-0">You'll also notice that wallet labels are featured more prominently. And the invoice details page now contains all the information you'd expect.</p>
                <hr style="height:1px;background-color:var(--btcpay-body-text-muted);margin:var(--btcpay-space-m) 0;" />
                <h5 class="alert-heading">Updated in <a href="https://blog.btcpayserver.org/btcpay-server-1-8-0/" target="_blank" rel="noreferrer noopener">v1.8.0</a></h5>
                <p class="mb-2">Bear markets are for building: This version brings custom checkout forms, store branding options, a redesigned Point of Sale keypad view, new notification icons and address labeling.</p>
                <p class="mb-0">You like that? Consider <a href="https://opensats.org/projects/btcpayserver" target="_blank" rel="noreferrer noopener">supporting BTCPay Server via OpenSats</a>.</p>
            </div>
        </div>
    </div>
</div>

@if (Model.IsSetUp)
{
    /* include chart library inline so that it instantly renders */
    <link rel="stylesheet" href="~/vendor/chartist/chartist.css" asp-append-version="true">
    <script src="~/vendor/chartist/chartist.min.js" asp-append-version="true"></script>
    <script>
        const DashboardUtils = {
            toDefaultCurrency(amount, rate) {
                return Math.round((amount * rate) * 100) / 100;
            },
            displayDefaultCurrency(amount, rate, currency, divisibility) {
                const value = DashboardUtils.toDefaultCurrency(amount, rate);
                const locale = currency === 'USD' ? 'en-US' : navigator.language;
                const isSats = currency === 'SATS';
                if (isSats) currency = 'BTC';
                const opts = { currency, style: 'decimal', minimumFractionDigits: divisibility };
                const val = new Intl.NumberFormat(locale, opts).format(value);
                return isSats ? val.replace(/[\\.,]/g, ' ') : val;
            },
            async fetchRate(currencyPair) {
                const storeId = @Safe.Json(Context.GetRouteValue("storeId"));
                const pathBase = @Safe.Json(Context.Request.PathBase);
                const response = await fetch(`${pathBase}/api/rates?storeId=${storeId}&currencyPairs=${currencyPair}`);
                const json = await response.json();
                const rate = json[0] && json[0].rate;
                if (rate) return rate;
                else console.warn(`Fetching rate for ${currencyPair} failed.`);
            }
        };
    </script>
    <div id="Dashboard" class="mt-4">
        <vc:ui-extension-point location="dashboard" model="@Model"/>
        @if (Model.WalletEnabled)
        {
            <vc:store-wallet-balance store="@store"/>
        }
        else
        {
            <div class="widget setup-guide">
                <header>
                    <h5 class="mb-4 text-muted">This store is ready to accept transactions, good job!</h5>
                </header>
                <div class="list-group" id="SetupGuide">
                    <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
                        <vc:icon symbol="done"/>
                        <div class="content">
                            <h5 class="mb-0 text-success">Set up a Lightning node</h5>
                        </div>
                    </div>
                    <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center">
                        <vc:icon symbol="new-wallet"/>
                        <div class="content">
                            <h5 class="mb-0">Set up a wallet</h5>
                        </div>
                        <vc:icon symbol="caret-right"/>
                    </a>
                </div>
            </div>
        }
        <vc:store-numbers vm="@(new StoreNumbersViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        @if (Model.LightningEnabled)
        {
            <vc:store-lightning-balance vm="@(new StoreLightningBalanceViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
            <vc:store-lightning-services vm="@(new StoreLightningServicesViewModel { Store = store, CryptoCode = Model.CryptoCode })"/>
        }
        @if (Model.WalletEnabled)
        {
            <vc:store-recent-transactions vm="@(new StoreRecentTransactionsViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        }
        <vc:store-recent-invoices vm="@(new StoreRecentInvoicesViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        @foreach (var app in Model.Apps)
        {
		  <vc:app-sales app-id="@app.Id" app-type="@app.AppType" />
		  <vc:app-top-items app-id="@app.Id" app-type="@app.AppType" />
        }
    </div>
}
else
{
    <p class="lead text-secondary mt-2">To start accepting payments, set up a wallet or a Lightning node.</p>
    
    <div class="list-group" id="SetupGuide">
        <div class="list-group-item d-flex align-items-center" id="SetupGuide-StoreDone">
            <vc:icon symbol="done"/>
            <div class="content">
                <h5 class="mb-0 text-success">Create your store</h5>
            </div>
        </div>
        @if (Model.Network is BTCPayNetwork)
        {

            @if (!Model.WalletEnabled)
            {
                <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center order-1">
                    <vc:icon symbol="new-wallet"/>
                    <div class="content">
                        <h5 class="mb-0">Set up a wallet</h5>
                    </div>
                    <vc:icon symbol="caret-right"/>
                </a>
            }
            else
            {
                <div class="list-group-item d-flex align-items-center" id="SetupGuide-WalletDone">
                    <vc:icon symbol="done"/>
                    <div class="content">
                        <h5 class="mb-0 text-success">Set up a wallet</h5>
                    </div>
                </div>
            }
        }
        @if (Model.LightningSupported) {
            if (!Model.LightningEnabled)
            {
                <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Lightning" class="list-group-item list-group-item-action d-flex align-items-center order-1">
                    <vc:icon symbol="new-wallet"/>
                    <div class="content">
                        <h5 class="mb-0">Set up a Lightning node</h5>
                    </div>
                    <vc:icon symbol="caret-right"/>
                </a>
            }
            else
            {
                <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
                    <vc:icon symbol="done"/>
                    <div class="content">
                        <h5 class="mb-0 text-success">Set up a Lightning node</h5>
                    </div>
                </div>
            }
        }
    </div>
}