<script>
import { onMount } from "svelte";
import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
import Euro from "../util/Euro.svelte"
import LoadingIndicator from "../util/LoadingIndicator.svelte";

let loading = false

let year = 0
let month = 0
let month_str = ""
let transactions = {
	rows: []
}

const load_transactions = async () => {
	loading = true
	month_str = year + "-" + ("00"+(month)).slice(-2)
	try {
		const resp = await fetch(window.api_endpoint+"/user/transactions/"+month_str)
		if(resp.status >= 400) {
			let json = await resp.json()
			if (json.value === "authentication_failed") {
				window.location = "/login"
				return
			} else {
				throw new Error(json.message)
			}
		}

		let month = {
			rows: await resp.json(),
			total_subscription_charge: 0,
			total_storage_charge: 0,
			total_bandwidth_charge: 0,
			total_deposited: 0,
			total_deducted: 0,
		}

		month.rows.forEach(row => {
			row.time = new Date(row.time)
			month.total_deposited += row.deposit_amount
			month.total_subscription_charge += row.subscription_charge
			month.total_storage_charge += row.storage_charge
			month.total_bandwidth_charge += row.bandwidth_charge
			month.total_deducted += row.subscription_charge + row.storage_charge + row.bandwidth_charge
		})
		transactions = month
	} catch (err) {
		alert(err)
	} finally {
		loading = false
	}
};
const last_month = () => {
	month--
	if (month === 0) {
		month = 12
		year--
	}

	load_transactions()
}
const next_month = () => {
	month++
	if (month === 13) {
		month = 1
		year++
	}

	load_transactions()
}

let credit_amount = 10

const checkout = async (network) => {
	loading = true
	const form = new FormData()
	form.set("amount", credit_amount*1e6)
	form.set("network", network)

	try {
		const resp = await fetch(
			window.api_endpoint+"/btcpay/deposit",
			{ method: "POST", body: form },
		)
		if(resp.status >= 400) {
			let json = await resp.json()
			throw json.message
		}

		window.location = (await resp.json()).checkout_url
	} catch (err) {
		alert(err)
	} finally {
		loading = false
	}
}

let show_expired = false
let invoices = []
const load_invoices = async () => {
	loading = true
	try {
		const resp = await fetch(window.api_endpoint+"/btcpay/invoice")
		if(resp.status >= 400) {
			throw new Error((await resp.json()).message)
		}

		let invoices_tmp = await resp.json()
		invoices_tmp.forEach(row => {
			row.time = new Date(row.time)
		})
		invoices_tmp.sort((a, b) => {
			return b.time - a.time
		})
		invoices = invoices_tmp
	} catch (err) {
		console.error(err)
		alert(err)
	} finally {
		loading = false
	}
};

onMount(() => {
	let now = new Date()
	year = now.getFullYear()
	month = now.getMonth()+1

	load_transactions()
	load_invoices()
})
</script>

<LoadingIndicator loading={loading}/>

<section>
	<h2>Deposit credits</h2>
	<p>
		You can deposit credit on your pixeldrain account with Bitcoin,
		Lightning network (<a
		href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln"
		target="_blank">node info</a>) and Dogecoin. You must pay the full
		amount as stated on the invoice, else your payment will fail.
	</p>
	<p>
		Do note that it is not possible to withdraw coins from your
		pixeldrain account. It's not a wallet. Any amount of money you
		deposit has to be used up.
	</p>
	<div style="text-align: center;">
		Deposit amount €
		<input type="number" bind:value={credit_amount} min="1"/>
		<br/>
		Pay with:<br/>
		<button on:click={() => {checkout("btc")}}>
			<span class="icon_unicode">₿</span> Bitcoin
		</button>
		<button on:click={() => {checkout("btc_lightning")}}>
			<i class="icon">bolt</i> Lightning network
		</button>
		<button on:click={() => {checkout("doge")}}>
			<span class="icon_unicode">Ð</span> Dogecoin
		</button>
	</div>

	<h3>Open invoices</h3>
	<div class="table_scroll">
		<table style="text-align: left;">
			<thead>
				<tr>
					<td>Created</td>
					<td>Amount</td>
					<td>Status</td>
					<td></td>
				</tr>
			</thead>
			<tbody>
				{#each invoices as row (row.id)}
					{#if row.status === "New" ||
						row.status === "InvoiceCreated" ||
						row.status === "InvoiceProcessing" ||
						show_expired
					}
						<tr>
							<td>{formatDate(row.time, true, true, false)}</td>
							<td><Euro amount={row.amount}></Euro></td>
							<td>
								{#if row.status === "InvoiceCreated"}
									New (waiting for payment)
								{:else if row.status === "InvoiceProcessing"}
									Payment received, waiting for confirmations
								{:else if row.status === "InvoiceSettled"}
									Paid
								{:else if row.status === "InvoiceExpired"}
									Expired
								{:else}
									{row.status}
								{/if}
							</td>
							<td>
								{#if row.status === "New" || row.status === "InvoiceCreated"}
									<a href={row.checkout_url} class="button button_highlight">
										<i class="icon">paid</i> Pay
									</a>
								{/if}
							</td>
						</tr>
					{/if}
				{/each}
			</tbody>
		</table>
		<div style="text-align: center;">
			<button on:click={() => {show_expired = !show_expired}}>
				{#if show_expired}
					Hide
				{:else}
					Show
				{/if}
				expired and settled invoices
			</button>
		</div>
	</div>


	<h2>Transaction log</h2>
	<p>
		Here is a log of all transactions on your account balance.
	</p>

	<h3>{month_str}</h3>
	<div class="toolbar">
		<button on:click={last_month}>
			<i class="icon">chevron_left</i>
			Previous month
		</button>
		<div class="toolbar_spacer"></div>
		<button on:click={next_month}>
			Next month
			<i class="icon">chevron_right</i>
		</button>
	</div>
	<ul>
		<li>Subscription charge: <Euro amount={transactions.total_subscription_charge}></Euro></li>
		<li>Storage charge: <Euro amount={transactions.total_storage_charge}></Euro></li>
		<li>Bandwidth charge: <Euro amount={transactions.total_bandwidth_charge}></Euro></li>
		<li>Total charge: <Euro amount={transactions.total_deducted}></Euro></li>
		<li>Deposited: <Euro amount={transactions.total_deposited}></Euro></li>
	</ul>

	<div class="table_scroll">
		<table style="text-align: left;">
			<thead>
				<tr>
					<td>Time</td>
					<td>Balance</td>
					<td>Subscription</td>
					<td colspan="2">Storage</td>
					<td colspan="2">Bandwidth</td>
					<td>Deposit</td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td>Charge</td>
					<td>Charge</td>
					<td>Usage</td>
					<td>Charge</td>
					<td>Usage</td>
					<td></td>
				</tr>
			</thead>
			<tbody>
				{#each transactions.rows as row}
					<tr>
						<td>{formatDate(row.time, true, true, false)}</td>
						<td><Euro amount={row.new_balance}></Euro></td>
						<td><Euro amount={row.subscription_charge} precision="4"></Euro></td>
						<td><Euro amount={row.storage_charge} precision="4"></Euro></td>
						<td>{formatDataVolume(row.storage_used, 3)}</td>
						<td><Euro amount={row.bandwidth_charge} precision="4"></Euro></td>
						<td>{formatDataVolume(row.bandwidth_used, 3)}</td>
						<td><Euro amount={row.deposit_amount}></Euro></td>
					</tr>
				{/each}
			</tbody>
		</table>
	</div>
</section>

<style>
.toolbar {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar_spacer { flex: 1 1 auto; }
</style>
