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

  const scenarioRows = $derived(
    data.scenarios.map((scenario) => ({
      ...scenario,
      overrideKeys: Object.keys(scenario.overrides ?? {})
    }))
  );

  const approvedCount = $derived(scenarioRows.filter((scenario) => scenario.status === 'approved').length);
</script>

<section class="ui-metric-row module-section">
  <article class="ui-metric-card">
    <span>Total Scenarios</span>
    <strong>{scenarioRows.length}</strong>
    <p>Saved planning workspaces</p>
  </article>

  <article class="ui-metric-card">
    <span>Approved</span>
    <strong>{approvedCount}</strong>
    <p>Ready for pricing reference</p>
  </article>

  <article class="ui-metric-card">
    <span>Overrides In Use</span>
    <strong>{scenarioRows.reduce((sum, row) => sum + row.overrideKeys.length, 0)}</strong>
    <p>Total override keys across all scenarios</p>
  </article>
</section>

<section class="ui-panel module-section">
  <div class="ui-section-heading">
    <div>
      <p class="ui-eyebrow">Scenario Library</p>
      <h3>Planning scenarios</h3>
    </div>
    <span class="ui-pill neutral">{scenarioRows.length} saved</span>
  </div>

  <div class="ui-table-wrap">
    <table class="ui-table scenario-table">
      <thead>
        <tr>
          <th>Scenario</th>
          <th>Status</th>
          <th>Overrides</th>
          <th>Payload</th>
        </tr>
      </thead>
      <tbody>
        {#each scenarioRows as scenario}
          <tr>
            <td data-label="Scenario">
              <div class="ui-table-identity scenario-identity">
                <span class="ui-row-mark">SC</span>
                <div>
                  <strong>{scenario.name}</strong>
                  <span>{scenario.description ?? 'No description provided yet.'}</span>
                </div>
              </div>
            </td>
            <td data-label="Status">
              <span class={`ui-pill ${scenario.status === 'approved' ? 'positive' : 'neutral'}`}>{scenario.status}</span>
            </td>
            <td data-label="Overrides">
              {#if scenario.overrideKeys.length}
                <div class="chip-list">
                  {#each scenario.overrideKeys as key}
                    <span>{key}</span>
                  {/each}
                </div>
              {:else}
                <span class="ui-muted">No overrides</span>
              {/if}
            </td>
            <td data-label="Payload">
              <details class="payload-details">
                <summary>View JSON</summary>
                <pre>{JSON.stringify(scenario.overrides, null, 2)}</pre>
              </details>
            </td>
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
</section>

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

  .module-section {
    margin-bottom: 1.25rem;
  }

  .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    max-width: 28rem;
  }

  .chip-list span {
    padding: 0.36rem 0.62rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
  }

  .scenario-table {
    min-width: 58rem;
  }

  .scenario-identity {
    min-width: 22rem;
  }

  .payload-details {
    max-width: 24rem;
  }

  .payload-details summary {
    width: fit-content;
    color: var(--green-deep);
    font-weight: 700;
    cursor: pointer;
  }

  .payload-details pre {
    max-height: 14rem;
    margin-top: 0.7rem;
    padding: 0.9rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 0.82rem;
    background: var(--panel);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
  }
</style>
