<script>
  import { locale, t, localized, formatMoney } from '$lib/i18n/store.js';

  export let data;
  $: lang = $locale;
  $: ({ sales, topParts, inventory, recentSales } = data);

  function formatWhen(iso) {
    if (!iso) return '';
    const d = new Date(iso.replace(' ', 'T') + 'Z');
    const pad = (n) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  }
</script>

<h2>{$t('reports.sales_heading')}</h2>

<div class="grid">
  {#each [
    { label: $t('reports.today'), row: sales.today },
    { label: $t('reports.last_7_days'), row: sales.week },
    { label: $t('reports.this_month'), row: sales.month },
    { label: $t('reports.all_time'), row: sales.all_time }
  ] as card}
    <div class="card stat">
      <div class="label">{card.label}</div>
      <div class="profit-label">{$t('reports.profit')}</div>
      <div class="value profit" class:negative={card.row.profit_dirams < 0}>
        {formatMoney(card.row.profit_dirams, lang)}
        <span class="cur">{$t('common.currency_short')}</span>
      </div>
      <div class="breakdown">
        <div><span class="bk-label">{$t('reports.sale')}</span> {formatMoney(card.row.sale_dirams, lang)}</div>
        <div><span class="bk-label">{$t('reports.cog')}</span> {formatMoney(card.row.cog_dirams, lang)}</div>
      </div>
      <div class="sub">{card.row.invoice_count} {$t('reports.invoices')}</div>
    </div>
  {/each}
</div>

<h2>{$t('reports.inventory_heading')}</h2>

<div class="grid">
  <div class="card stat">
    <div class="label">{$t('reports.active_skus')}</div>
    <div class="value">{inventory.sku_count}</div>
  </div>
  <div class="card stat">
    <div class="label">{$t('reports.units_on_hand')}</div>
    <div class="value">{inventory.units_on_hand}</div>
  </div>
  <div class="card stat">
    <div class="label">{$t('reports.cost_value')}</div>
    <div class="value">
      {formatMoney(inventory.cost_value_dirams, lang)}
      <span class="cur">{$t('common.currency_short')}</span>
    </div>
  </div>
  <div></div>
  <div class="card stat">
    <div class="label">{$t('reports.low_stock')}</div>
    <div class="value" class:warn={inventory.lowStockCount > 0}>{inventory.lowStockCount}</div>
  </div>
  <div class="card stat">
    <div class="label">{$t('reports.out_of_stock')}</div>
    <div class="value" class:warn={inventory.outOfStockCount > 0}>{inventory.outOfStockCount}</div>
  </div>
</div>

<h2>{$t('reports.top_parts')}</h2>
{#if topParts.length === 0}
  <p class="muted">{$t('reports.no_sales_yet')}</p>
{:else}
  <table>
    <thead>
      <tr>
        <th>{$t('parts.name')}</th>
        <th class="num">{$t('reports.units_sold')}</th>
        <th class="num">{$t('reports.sale')}</th>
        <th class="num">{$t('reports.cog')}</th>
        <th class="num profit-col">{$t('reports.profit')}</th>
      </tr>
    </thead>
    <tbody>
      {#each topParts as p}
        <tr>
          <td><a href="/parts/{p.id}">{localized(p, 'name', lang)}</a></td>
          <td class="num">{p.units_sold}</td>
          <td class="num">
            {formatMoney(p.sale_dirams, lang)}
            <span class="cur">{$t('common.currency_short')}</span>
          </td>
          <td class="num">
            {formatMoney(p.cog_dirams, lang)}
            <span class="cur">{$t('common.currency_short')}</span>
          </td>
          <td class="num profit-col" class:negative={p.profit_dirams < 0}>
            {formatMoney(p.profit_dirams, lang)}
            <span class="cur">{$t('common.currency_short')}</span>
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
{/if}

<h2>{$t('reports.recent_sales')}</h2>
{#if recentSales.length === 0}
  <p class="muted">{$t('reports.no_sales_yet')}</p>
{:else}
  <table>
    <thead>
      <tr>
        <th>{$t('reports.saved_at')}</th>
        <th class="num">{$t('reports.lines')}</th>
        <th class="num">{$t('reports.sale')}</th>
        <th class="num">{$t('reports.cog')}</th>
        <th class="num profit-col">{$t('reports.profit')}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {#each recentSales as s}
        <tr>
          <td>{formatWhen(s.saved_at)}</td>
          <td class="num">{s.line_count}</td>
          <td class="num">
            {formatMoney(s.sale_dirams, lang)}
            <span class="cur">{$t('common.currency_short')}</span>
          </td>
          <td class="num">
            {formatMoney(s.cog_dirams, lang)}
            <span class="cur">{$t('common.currency_short')}</span>
          </td>
          <td class="num profit-col" class:negative={s.profit_dirams < 0}>
            {formatMoney(s.profit_dirams, lang)}
            <span class="cur">{$t('common.currency_short')}</span>
          </td>
          <td><a href="/invoices/{s.id}">{$t('reports.view')}</a></td>
        </tr>
      {/each}
    </tbody>
  </table>
{/if}

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .stat .label { color: #6b7388; font-size: 0.85rem; }
  .stat .value {
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
  }
  .stat .value.warn { color: #b8443f; }
  .stat .cur { font-size: 0.8rem; color: #6b7388; margin-left: 0.2rem; }
  .stat .sub { color: #6b7388; font-size: 0.8rem; margin-top: 0.4rem; }

  .profit-label {
    color: #2f7d4f;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 0.35rem;
  }
  .value.profit {
    font-size: 2rem;
    font-weight: 700;
    color: #1f6b40;
    line-height: 1.1;
    margin-top: 0.1rem;
  }
  .value.profit.negative { color: #b8443f; }
  .value.profit .cur { color: #1f6b40; }
  .value.profit.negative .cur { color: #b8443f; }

  .breakdown {
    margin-top: 0.55rem;
    color: #4a5060;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.9rem;
  }
  .breakdown .bk-label {
    color: #6b7388;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.15rem;
  }

  th.profit-col, td.profit-col {
    color: #1f6b40;
    font-weight: 700;
    background: #f1f8f3;
  }
  td.profit-col.negative { color: #b8443f; background: #fbf1f0; }
  td.profit-col .cur { color: inherit; }
</style>
