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="wire-portal-dashboard wire-next--color-{color} wire-next--size-{size} {class}">
      <header class="wire-portal-dashboard__hero">
        <div>
          {#if eyebrowKey}<span class="wire-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
          {#if !eyebrowKey}<span class="wire-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="wire-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
      </header>

      <section class="wire-portal-dashboard__metrics" aria-label="Summary">
        {#each metrics as item}
          <article class="wire-portal-dashboard__metric">
            <span class="wire-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="wire-portal-dashboard__grid">
        <section class="wire-portal-dashboard__panel wire-portal-dashboard__panel--actions">
          <div class="wire-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
          <div class="wire-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="wire-portal-dashboard__panel">
          <div class="wire-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
          <div class="wire-portal-dashboard__list">
            {#each tasks as item, index}
              <a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
                <span class="wire-portal-dashboard__status wire-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="wire-portal-dashboard__panel wire-portal-dashboard__panel--updates">
          <div class="wire-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
          <div class="wire-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>
  }
}