component PortalDashboard {
  outputs {
    action(payload: { item: string | number | boolean | null | object; value: string | number | boolean; index: number })
    navigate(payload: { item: string | number | boolean | null | object; value: string | number | boolean; index: number })
  }

  props {
    size: string = "default"
    color: string = "primary"
    eyebrow: string = "Overview"
    eyebrowKey: string = ""
    title: string = "Dashboard"
    titleKey: string = ""
    description: string = ""
    descriptionKey: string = ""
    userName: string = ""
    metrics: unknown[] = []
    actions: unknown[] = []
    updates: unknown[] = []
    tasks: unknown[] = []
    class: string = ""
  }

  functions {
    client function chooseAction(item, index) {
      output.action({ item: item, value: item.value || "", index: index })
    }

    client function chooseNavigation(item, index) {
      output.navigate({ item: item, value: item.value || "", index: index })
    }
  }

  view {
    <main class="wrn-portal-dashboard wrn-component--color-{color} wrn-component--size-{size} {class}">
      <header class="wrn-portal-dashboard__hero">
        <div>
          {#if eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
          {#if !eyebrowKey}<span class="wrn-portal-dashboard__eyebrow">{eyebrow}</span>{/if}
          <h1>
            {#if titleKey}<span data-t="{titleKey}">{title}</span>{/if}
            {#if !titleKey}<span>{title}</span>{/if}
            {#if userName}, {userName}{/if}
          </h1>
          {#if descriptionKey}<p data-t="{descriptionKey}">{description}</p>{/if}
          {#if !descriptionKey && description}<p>{description}</p>{/if}
        </div>
        <div class="wrn-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
      </header>

      <section class="wrn-portal-dashboard__metrics" aria-label="Summary">
        {#each metrics as item}
          <article class="wrn-portal-dashboard__metric">
            <span class="wrn-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true"></span>
            <div><small>{item.label}</small><strong>{item.value}</strong>{#if item.detail}<span>{item.detail}</span>{/if}</div>
          </article>
        {/each}
      </section>

      <div class="wrn-portal-dashboard__grid">
        <section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--actions">
          <div class="wrn-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
          <div class="wrn-portal-dashboard__actions">
            {#each actions as item, index}
              <a href="{item.href || '#'}" @click="chooseAction(item, index)">
                <span class="{item.icon || 'icon-[lucide--arrow-up-right]'}" aria-hidden="true"></span>
                <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
                <span class="icon-[lucide--chevron-right]" aria-hidden="true"></span>
              </a>
            {/each}
          </div>
        </section>

        <section class="wrn-portal-dashboard__panel">
          <div class="wrn-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
          <div class="wrn-portal-dashboard__list">
            {#each tasks as item, index}
              <a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
                <span class="wrn-portal-dashboard__status wrn-portal-dashboard__status--{item.status || 'default'}"></span>
                <span><strong>{item.label}</strong>{#if item.detail}<small>{item.detail}</small>{/if}</span>
                {#if item.meta}<em>{item.meta}</em>{/if}
              </a>
            {/each}
          </div>
        </section>

        <section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--updates">
          <div class="wrn-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
          <div class="wrn-portal-dashboard__timeline">
            {#each updates as item}
              <article>
                <span class="{item.icon || 'icon-[lucide--bell]'}" aria-hidden="true"></span>
                <div><strong>{item.label}</strong>{#if item.detail}<p>{item.detail}</p>{/if}<small>{item.time || ''}</small></div>
              </article>
            {/each}
          </div>
        </section>
      </div>
    </main>
  }

  style {
    .wrn-portal-dashboard__status--urgent {
      background: var(--wrn-color-danger);
    }

    .wrn-portal-dashboard__status--warning {
      background: var(--wrn-color-warning);
    }

    .wrn-portal-dashboard__status--success {
      background: var(--wrn-color-success);
    }

    /* Reusable responsive portal dashboard */
    .wrn-portal-dashboard {
      width: min(100%, 96rem);
      margin-inline: auto;
      color: var(--wrn-color-text);
    }

    .wrn-portal-dashboard__hero {
      display: flex;
      padding: clamp(1.25rem, 3vw, 2rem);
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: 1rem;
      background:
        radial-gradient(
          circle at 85% 0%,
          color-mix(in srgb, var(--wrn-color-primary) 20%, transparent),
          transparent 34%
        ),
        var(--wrn-color-surface);
      box-shadow: var(--wrn-shadow-sm);
    }

    .wrn-portal-dashboard__eyebrow,
    .wrn-portal-dashboard__panel-heading small {
      color: var(--wrn-color-primary);
      font-size: 0.7rem;
      font-weight: 650;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .wrn-portal-dashboard__hero h1 {
      margin: 0.35rem 0 0;
      font-size: clamp(1.4rem, 3vw, 2.25rem);
      font-weight: 650;
      letter-spacing: -0.035em;
    }

    .wrn-portal-dashboard__hero p {
      max-width: 48rem;
      margin: 0.5rem 0 0;
      color: var(--wrn-color-muted);
      font-size: 0.875rem;
      line-height: 1.6;
    }

    .wrn-portal-dashboard__metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 1rem;
      gap: 1rem;
    }

    .wrn-portal-dashboard__metric {
      display: flex;
      min-width: 0;
      padding: 1rem;
      align-items: center;
      gap: 0.85rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.85rem;
      background: var(--wrn-color-surface);
      box-shadow: var(--wrn-shadow-sm);
    }

    .wrn-portal-dashboard__metric-icon {
      width: 2.25rem;
      height: 2.25rem;
      flex: none;
      padding: 0.55rem;
      border-radius: 0.7rem;
      color: var(--wrn-color-primary);
      background: color-mix(in srgb, var(--wrn-color-primary) 12%, transparent);
    }

    .wrn-portal-dashboard__metric div {
      display: grid;
      min-width: 0;
    }

    .wrn-portal-dashboard__metric small,
    .wrn-portal-dashboard__metric span {
      overflow: hidden;
      color: var(--wrn-color-muted);
      font-size: 0.7rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wrn-portal-dashboard__metric strong {
      margin-block: 0.1rem;
      font-size: 1.3rem;
      font-weight: 650;
    }

    .wrn-portal-dashboard__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
      margin-top: 1rem;
      gap: 1rem;
    }

    .wrn-portal-dashboard__panel {
      min-width: 0;
      padding: 1.1rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.9rem;
      background: var(--wrn-color-surface);
      box-shadow: var(--wrn-shadow-sm);
    }

    .wrn-portal-dashboard__panel--actions {
      grid-row: span 2;
    }

    .wrn-portal-dashboard__panel-heading {
      display: flex;
      margin-bottom: 0.9rem;
      align-items: center;
      justify-content: space-between;
    }

    .wrn-portal-dashboard__panel-heading h2 {
      margin: 0.2rem 0 0;
      font-size: 1rem;
      font-weight: 600;
    }

    .wrn-portal-dashboard__actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.65rem;
    }

    .wrn-portal-dashboard__actions a,
    .wrn-portal-dashboard__list a {
      display: flex;
      min-width: 0;
      padding: 0.8rem;
      align-items: center;
      gap: 0.7rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.7rem;
      color: inherit;
      text-decoration: none;
      transition:
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
    }

    .wrn-portal-dashboard__actions a:hover,
    .wrn-portal-dashboard__list a:hover {
      border-color: color-mix(in srgb, var(--wrn-color-primary) 45%, var(--wrn-color-border));
      background: var(--wrn-color-surface-2);
      transform: translateY(-1px);
    }

    .wrn-portal-dashboard__actions a > span:first-child {
      width: 1.15rem;
      height: 1.15rem;
      flex: none;
      color: var(--wrn-color-primary);
    }

    .wrn-portal-dashboard__actions a > span:nth-child(2),
    .wrn-portal-dashboard__list a > span:nth-child(2) {
      display: grid;
      min-width: 0;
      flex: 1;
    }

    .wrn-portal-dashboard__actions a > span:last-child {
      width: 0.9rem;
      height: 0.9rem;
      color: var(--wrn-color-muted);
    }

    .wrn-portal-dashboard__actions strong,
    .wrn-portal-dashboard__list strong,
    .wrn-portal-dashboard__timeline strong {
      font-size: 0.8rem;
      font-weight: 550;
    }

    .wrn-portal-dashboard__actions small,
    .wrn-portal-dashboard__list small,
    .wrn-portal-dashboard__timeline p,
    .wrn-portal-dashboard__timeline small {
      margin: 0.15rem 0 0;
      color: var(--wrn-color-muted);
      font-size: 0.7rem;
      font-style: normal;
      line-height: 1.45;
    }

    .wrn-portal-dashboard__list {
      display: grid;
      gap: 0.5rem;
    }

    .wrn-portal-dashboard__list a {
      border: 0;
      border-bottom: 1px solid var(--wrn-color-border);
      border-radius: 0;
    }

    .wrn-portal-dashboard__status {
      width: 0.55rem;
      height: 0.55rem;
      flex: none;
      border-radius: 999px;
      background: var(--wrn-color-muted);
    }

    .wrn-portal-dashboard__list em {
      color: var(--wrn-color-muted);
      font-size: 0.7rem;
      font-style: normal;
    }

    .wrn-portal-dashboard__timeline {
      display: grid;
      gap: 0.8rem;
    }

    .wrn-portal-dashboard__timeline article {
      display: flex;
      gap: 0.7rem;
    }

    .wrn-portal-dashboard__timeline article > span {
      width: 1rem;
      height: 1rem;
      margin-top: 0.15rem;
      flex: none;
      color: var(--wrn-color-primary);
    }

    .wrn-portal-dashboard__timeline p {
      margin-block: 0.15rem;
    }

    @media (max-width: 1100px) {
    .wrn-portal-dashboard__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    .wrn-portal-dashboard__grid {
        grid-template-columns: 1fr;
      }
    .wrn-portal-dashboard__panel--actions {
        grid-row: auto;
      }
    }

    @media (max-width: 640px) {
    .wrn-portal-dashboard__hero {
        align-items: flex-start;
        flex-direction: column;
      }
    .wrn-portal-dashboard__metrics,
      .wrn-portal-dashboard__actions {
        grid-template-columns: 1fr;
      }
    }

    /* Shared component foundation. */

        .wrn-component {
          --wrn-component-color: var(--wrn-color-primary);
          --wrn-component-scale: 1;
          margin: 0;
          color: var(--wrn-color-text);
          font-family: var(--wrn-font-sans, inherit);
        }

        .wrn-component--color-primary {
          --wrn-component-color: var(--wrn-color-primary);
        }

        .wrn-component--color-secondary {
          --wrn-component-color: var(--wrn-color-secondary);
        }

        .wrn-component--color-success {
          --wrn-component-color: var(--wrn-color-success);
        }

        .wrn-component--color-warning {
          --wrn-component-color: var(--wrn-color-warning);
        }

        .wrn-component--color-danger {
          --wrn-component-color: var(--wrn-color-danger);
        }

        .wrn-component--color-info {
          --wrn-component-color: var(--wrn-color-info);
        }

        .wrn-component--size-xs {
          --wrn-component-scale: 0.78;
        }

        .wrn-component--size-sm {
          --wrn-component-scale: 0.88;
        }

        .wrn-component--size-default,
        .wrn-component--size-md {
          --wrn-component-scale: 1;
        }

        .wrn-component--size-lg {
          --wrn-component-scale: 1.14;
        }

        .wrn-component--size-xl {
          --wrn-component-scale: 1.28;
        }

        .wrn-component:not(.wrn-btn) {
          font-size: calc(1em * var(--wrn-component-scale));
        }

        .wrn-component :is(a, button, input, select, textarea):focus-visible {
          outline-color: var(--wrn-component-color);
        }

        .wrn-component p {
          margin: 0;
          color: var(--wrn-color-muted);
          line-height: 1.6;
        }
  }
}