<script lang="ts">
  let { data } = $props();

  function currency(value: number | null | undefined, digits = 2) {
    if (value === null || value === undefined) {
      return 'N/A';
    }

    return `$${value.toFixed(digits)}`;
  }

  function initials(name: string) {
    return name
      .split(' ')
      .map((piece) => piece[0])
      .join('')
      .slice(0, 2)
      .toUpperCase();
  }

  const rows = $derived(
    data.products.map((product) => {
      const cost = data.productCosts.find((item) => item.product_id === product.id);

      return {
        ...product,
        cost,
        health: cost?.warnings.length ? 'Review' : 'Healthy',
        healthTone: cost?.warnings.length ? 'warning' : 'positive'
      };
    })
  );

  const highestDelivered = $derived(
    rows.reduce(
      (best, row) =>
        (row.cost?.finished_product_delivered ?? 0) > (best.cost?.finished_product_delivered ?? 0) ? row : best,
      rows[0]
    )
  );

  const averageDelivered = $derived(
    rows.length
      ? rows.reduce((sum, row) => sum + (row.cost?.finished_product_delivered ?? 0), 0) / rows.length
      : 0
  );
</script>

<section class="metric-row">
  <article class="metric-card">
    <span>Total Products</span>
    <strong>{rows.length}</strong>
    <p>Active finished outputs</p>
  </article>

  <article class="metric-card">
    <span>Highest Delivered Cost</span>
    <strong>{currency(highestDelivered?.cost?.finished_product_delivered)}</strong>
    <p>{highestDelivered?.name ?? 'No product loaded'}</p>
  </article>

  <article class="metric-card">
    <span>Average Delivered Cost</span>
    <strong>{currency(averageDelivered)}</strong>
    <p>Across all tracked products</p>
  </article>
</section>

<section class="table-card">
  <div class="table-toolbar">
    <div>
      <h3>Product Price Table</h3>
      <p>Modern row groups with quick-read badges and healthier spacing.</p>
    </div>

    <button type="button">Pricing View</button>
  </div>

  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Mix</th>
          <th>Sale Type</th>
          <th>Delivered</th>
          <th>Margins</th>
          <th>Health</th>
        </tr>
      </thead>
      <tbody>
        {#each rows as row}
          <tr>
            <td class="product-cell" data-label="Product">
              <div class="product-item">
                <span class="product-badge">{initials(row.name)}</span>
                <div>
                  <strong>{row.name}</strong>
                  <span>{row.client_name}</span>
                </div>
              </div>
            </td>
            <td data-label="Mix">
              <div class="mix-block">
                <strong>{row.mix_name}</strong>
                <span>{row.unit_of_measure}</span>
              </div>
            </td>
            <td data-label="Sale Type">
              <span class="sale-pill">{row.sale_type}</span>
            </td>
            <td data-label="Delivered">
              <div class="number-block">
                <strong>{currency(row.cost?.finished_product_delivered)}</strong>
                <span>Delivered cost</span>
              </div>
            </td>
            <td data-label="Margins">
              <div class="number-block">
                <strong>{currency(row.cost?.distributor_price)} / {currency(row.cost?.wholesale_price)}</strong>
                <span>Distributor / wholesale</span>
              </div>
            </td>
            <td data-label="Health">
              <span class={`status-pill ${row.healthTone}`}>{row.health}</span>
            </td>
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
</section>

<style>
  h2,
  h3,
  p {
    margin: 0;
  }

  .eyebrow {
    color: #7d8d84;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .page-intro,
  .metric-row,
  .table-card {
    margin-bottom: 1.25rem;
  }

  .page-intro h2 {
    margin: 0.35rem 0 0.45rem;
    max-width: 18ch;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 700;
  }

  .page-intro p:last-child,
  .metric-card p,
  .table-toolbar p,
  .product-item span,
  .mix-block span,
  .number-block span {
    color: var(--muted);
  }

  .metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .metric-card,
  .table-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 1.3rem;
    box-shadow: var(--shadow);
  }

  .metric-card {
    padding: 1.15rem 1.2rem;
  }

  .metric-card span {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
  }

  .metric-card strong {
    display: block;
    margin: 0.55rem 0 0.3rem;
    font-size: 1.9rem;
    font-weight: 700;
  }

  .table-card {
    padding: 1.2rem;
  }

  .table-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .table-toolbar h3 {
    font-size: 1.15rem;
    font-weight: 700;
  }

  .table-toolbar button {
    padding: 0.72rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.85rem;
    background: #fff;
    color: #304038;
    font-weight: 600;
    cursor: pointer;
  }

  .table-wrap {
    overflow-x: auto;
  }

  table {
    width: 100%;
    min-width: 48rem;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  th,
  td {
    padding: 1rem;
    text-align: left;
    white-space: nowrap;
  }

  th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  tbody td {
    background: var(--panel-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  tbody td:first-child {
    border-left: 1px solid var(--line);
    border-radius: 1rem 0 0 1rem;
  }

  tbody td:last-child {
    border-right: 1px solid var(--line);
    border-radius: 0 1rem 1rem 0;
  }

  .product-cell {
    min-width: 20rem;
  }

  .product-item,
  .mix-block,
  .number-block {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .product-item strong,
  .mix-block strong,
  .number-block strong {
    display: block;
    font-size: 0.96rem;
  }

  .product-item span:last-child,
  .mix-block span,
  .number-block span {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.82rem;
  }

  .product-badge {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0.85rem;
    color: #fff;
    background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .mix-block,
  .number-block {
    display: grid;
    gap: 0.1rem;
  }

  .sale-pill,
  .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.42rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 600;
  }

  .sale-pill {
    color: #245961;
    background: var(--blue-soft);
  }

  .status-pill.positive {
    color: var(--green-deep);
    background: var(--green-soft);
  }

  .status-pill.warning {
    color: #a9681d;
    background: #fff6e6;
  }

  @media (max-width: 960px) {
    .metric-row {
      grid-template-columns: 1fr;
    }

    .table-toolbar {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 760px) {
    .table-card {
      padding: 1rem;
    }

    table,
    thead,
    tbody,
    tr,
    td {
      display: block;
      width: 100%;
    }

    table {
      min-width: 0;
      border-spacing: 0;
    }

    thead {
      display: none;
    }

    tbody {
      display: grid;
      gap: 0.9rem;
    }

    tbody tr {
      padding: 0.3rem;
      border: 1px solid var(--line);
      border-radius: 1rem;
      background: var(--panel-soft);
    }

    tbody td {
      padding: 0.78rem 0.8rem;
      white-space: normal;
      border: none;
      border-radius: 0;
      background: transparent;
    }

    tbody td:first-child,
    tbody td:last-child {
      border: none;
      border-radius: 0;
    }

    tbody td + td {
      border-top: 1px solid var(--line);
    }

    tbody td::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 0.35rem;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .product-cell {
      min-width: 0;
    }
  }
</style>
