<script lang="ts">
  import { persistentSettings } from '$lib/persistent_store'
  import { currentDaytime } from '$lib/util'
  import i18n from '$lib/i18n'
  import DashboardCard from '$lib/component/DashboardCard.svelte'
  import TransactionTable from '$lib/component/TransactionTable.svelte'

  $i18n.loadNamespaces('dashboard')

  let hasActiveTransaction = $state(true)
</script>

<div class="w-full h-full mt-10 flex flex-col">
  <p class="w-full text-2xl font-bold">
    {$i18n.t('dashboard:greeting.' + currentDaytime(), { name: $persistentSettings.friendlyName })}
  </p>
  <div class="w-full mt-5 flex gap-x-4">
    <div class="card bg-base-100 shadow rounded-md basis-0 grow">
      <div class="card-body gap-2">
        <div class="flex items-start justify-between gap-2 text-sm">
          <div>
            <p class="text-base-content/80 font-medium">
              {$i18n.t('dashboard:cards.currentTransaction')}
            </p>
            <div class="mt-3 flex items-center gap-2">
              {#if hasActiveTransaction}
                <div class="inline-grid *:[grid-area:1/1]">
                  <div class="status status-success animate-ping"></div>
                  <div class="status status-success"></div>
                </div>
              {/if}
              <p class="text-2xl font-semibold">
                {#if hasActiveTransaction}0,25 kWh{:else}-{/if}
              </p>
              {#if hasActiveTransaction}
                <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
                  2,30 €
                </div>
              {/if}
            </div>
          </div>
          <i class="bi bi-plug-fill text-primary text-4xl"></i>
        </div>
        <div class="w-full flex flex-row items-center">
          <p class="text-base-content/60 text-sm">
            {#if hasActiveTransaction}
              {$i18n.t('dashboard:cards.chargepoint', { name: 'DE-EXMPL-0001' })}
            {:else}
              {$i18n.t('dashboard:cards.noCurrentTransaction')}
            {/if}
          </p>
          {#if hasActiveTransaction}
            <button class="btn btn-xs btn-primary">
              {$i18n.t('dashboard:cards.toCurrentTransactionButton')}
              <i class="bi bi-arrow-right"></i>
            </button>
          {/if}
        </div>
      </div>
    </div>
    <DashboardCard
      title={$i18n.t('dashboard:cards.transactionCount')}
      icon={'bi-battery-charging'}
      value={3}
      previousValue={1}
    />
    <DashboardCard
      title={$i18n.t('dashboard:cards.transactionEnergyTotal')}
      icon={'bi-lightning-charge-fill'}
      value={180}
      previousValue={50}
      unit={'kWh'}
    />
    <DashboardCard
      title={$i18n.t('dashboard:cards.transactionCostTotal')}
      icon={'bi-currency-exchange'}
      value={30.56}
      previousValue={30.56}
      unit={'€'}
    />
  </div>
  <div class="w-full flex flex-col mt-10">
    <p class="text-xl font-bold">{$i18n.t('dashboard:table.title')}</p>
    <TransactionTable
      transactions={[
        {
          id: '1',
          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
          energyAmmount: 58.65,
          cost: 36.45,
        },
        {
          id: '2',
          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
          energyAmmount: 58.65,
          cost: 36.45,
        },
        {
          id: '3',
          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
          energyAmmount: 58.65,
          cost: 36.45,
        },
        {
          id: '4',
          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
          energyAmmount: 58.65,
          cost: 36.45,
        },
      ]}
    />
  </div>
</div>
