import Breadcrumb from "./Breadcrumb.wrn"
import Button from "./button.wrn"

component PageHeader {
  props {
    eyebrow: string = ""
    title: string = ""
    description: string = ""
    icon: string = ""
    id: string = "page-title"
    align: string = "left"
    centered: boolean = false
    compact: boolean = false
    size: string = "default"
    maxWidth: string = "xl"
    showBreadcrumbs: boolean = false
    breadcrumbs: unknown[] = []
    breadcrumbParent: string = ""
    breadcrumbParentHref: string = ""
    breadcrumbCurrent: string = ""
    primaryLabel: string = ""
    primaryHref: string = ""
    primaryIcon: string = ""
    secondaryLabel: string = ""
    secondaryHref: string = ""
    secondaryIcon: string = ""
    color: string = "primary"
    variant: string = "default"
    borderBottom: boolean = true
    class: string = ""
  }

  view {
    <section
      {...attrs}
      data-ui-component="PageHeader"
      data-size='{size}'
      data-align='{centered ? "center" : align}'
      data-color='{color}'
      data-variant='{variant}'
      data-compact='{compact ? "true" : "false"}'
      data-max-width='{maxWidth}'
      data-border-bottom='{borderBottom ? "true" : "false"}'
      aria-labelledby='{id}'
      class='wire-page-header {class}'
    >
      <div
        class="wire-page-header__decoration"
        aria-hidden="true"
      >
        <span
          class="wire-page-header__glow wire-page-header__glow--one"
        >
        </span>
        <span
          class="wire-page-header__glow wire-page-header__glow--two"
        >
        </span>
        <span
          class="wire-page-header__grid-pattern"
        >
        </span>
      </div>

      <div
        class="wire-page-header__inner"
      >
        {#if showBreadcrumbs && breadcrumbs.length > 0}
          <div
            class="wire-page-header__breadcrumb"
          >
            <Breadcrumb
              label="Breadcrumb"
              items='{breadcrumbs}'
              active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || breadcrumbs[breadcrumbs.length - 1]?.title || ""}'
              color='{color}'
              size='{compact ? "sm" : "default"}'
              variant='{variant === "solid" ? "contrast" : "minimal"}'
            />
          </div>
        {:else if showBreadcrumbs && breadcrumbParent}
          <div
            class="wire-page-header__breadcrumb"
          >
            <Breadcrumb
              label="Breadcrumb"
              items='{[
{
label: breadcrumbParent,
href: breadcrumbParentHref,
value: breadcrumbParent
},
{
label: breadcrumbCurrent || title,
value: breadcrumbCurrent || title,
current: true
}
]}'
              active='{breadcrumbCurrent || title}'
              color='{color}'
              size='{compact ? "sm" : "default"}'
              variant='{variant === "solid" ? "contrast" : "minimal"}'
            />
          </div>
        {:else if showBreadcrumbs && (breadcrumbCurrent || title)}
          <div
            class="wire-page-header__breadcrumb"
          >
            <Breadcrumb
              label="Breadcrumb"
              items='{[
{
label: breadcrumbCurrent || title,
value: breadcrumbCurrent || title,
current: true
}
]}'
              active='{breadcrumbCurrent || title}'
              color='{color}'
              size='{compact ? "sm" : "default"}'
              variant='{variant === "solid" ? "contrast" : "minimal"}'
            />
          </div>
        {/if}

        <div
          class="wire-page-header__layout"
        >
          <div
            class="wire-page-header__content"
          >
            <div
              class="wire-page-header__intro"
            >
              {#if icon}
                <span
                  class="wire-page-header__icon-wrap"
                >
                  {#if icon === "sparkles"}
                    <span
                      class="icon-[lucide--sparkles] wire-page-header__icon"
                      aria-hidden="true"
                    >
                    </span>
                  {:else if icon === "component"}
                    <span
                      class="icon-[lucide--component] wire-page-header__icon"
                      aria-hidden="true"
                    >
                    </span>
                  {:else}
                    <span
                      class='{icon} wire-page-header__icon'
                      aria-hidden="true"
                    >
                    </span>
                  {/if}
                </span>
              {/if}

              <div
                class="wire-page-header__copy"
              >
                {#if eyebrow}
                  <div
                    class="wire-page-header__eyebrow-row"
                  >
                    <span
                      class="wire-page-header__eyebrow-mark"
                      aria-hidden="true"
                    >
                    </span>
                    <p
                      class="wire-page-header__eyebrow"
                    >
                      {eyebrow}
                    </p>
                  </div>
                {/if}

                {#if title}
                  <h1
                    id='{id}'
                    class="wire-page-header__title"
                  >
                    {title}
                  </h1>
                {/if}

                {#if description}
                  <p
                    class="wire-page-header__description"
                  >
                    {description}
                  </p>
                {/if}

                <div
                  class="wire-page-header__meta"
                >
                  <slot
                    name="meta"
                  >
                  </slot>
                </div>
              </div>
            </div>
          </div>

          {#if primaryLabel || secondaryLabel}
            <div
              class="wire-page-header__actions"
            >
              {#if secondaryLabel}
                <Button
                  label='{secondaryLabel}'
                  href='{secondaryHref || "#"}'
                  icon='{secondaryIcon}'
                  size='{compact ? "sm" : "default"}'
                  variant="outline"
                  color='{color}'
                  class="wire-page-header__action wire-page-header__action--secondary"
                />
              {/if}

              {#if primaryLabel}
                <Button
                  label='{primaryLabel}'
                  href='{primaryHref || "#"}'
                  icon='{primaryIcon}'
                  size='{compact ? "sm" : "default"}'
                  variant="default"
                  color='{color}'
                  class="wire-page-header__action wire-page-header__action--primary"
                />
              {/if}

              <slot
                name="actions"
              >
              </slot>
            </div>
          {:else}
            <div
              class="wire-page-header__actions wire-page-header__actions--slot-only"
            >
              <slot
                name="actions"
              >
              </slot>
            </div>
          {/if}
        </div>

        <div
          class="wire-page-header__body"
        >
          <slot></slot>
        </div>
      </div>
    </section>
  }

  style {
    .wire-page-header {
      --page-header-accent: var(--wire-color-primary);
      --page-header-soft: var(--wire-color-primary-soft);
      --page-header-muted: var(--wire-color-primary-muted);
      --page-header-accent-text: var(--wire-color-primary-text);

      position: relative;
      isolation: isolate;
      width: 100%;
      overflow: hidden;
      color: var(--wire-color-text);
      background: var(--wire-color-background);
    }

    .wire-page-header[data-color="secondary"] {
      --page-header-accent: var(--wire-color-secondary);
      --page-header-soft: var(--wire-color-secondary-soft);
      --page-header-muted: var(--wire-color-secondary-muted);
      --page-header-accent-text: var(--wire-color-secondary-text);
    }

    .wire-page-header[data-color="info"] {
      --page-header-accent: var(--wire-color-info);
      --page-header-soft: var(--wire-color-info-soft);
      --page-header-muted: var(--wire-color-info-muted);
      --page-header-accent-text: var(--wire-color-info-text);
    }

    .wire-page-header[data-color="success"] {
      --page-header-accent: var(--wire-color-success);
      --page-header-soft: var(--wire-color-success-soft);
      --page-header-muted: var(--wire-color-success-muted);
      --page-header-accent-text: var(--wire-color-success-text);
    }

    .wire-page-header[data-color="warning"] {
      --page-header-accent: var(--wire-color-warning);
      --page-header-soft: var(--wire-color-warning-soft);
      --page-header-muted: var(--wire-color-warning-muted);
      --page-header-accent-text: var(--wire-color-warning-text);
    }

    .wire-page-header[data-color="danger"] {
      --page-header-accent: var(--wire-color-danger);
      --page-header-soft: var(--wire-color-danger-soft);
      --page-header-muted: var(--wire-color-danger-muted);
      --page-header-accent-text: var(--wire-color-danger-text);
    }

    .wire-page-header[data-variant="soft"] {
      background: var(--wire-color-surface);
    }

    .wire-page-header[data-variant="raised"] {
      background: var(--wire-color-surface-raised);
      box-shadow: var(--wire-shadow-sm);
    }

    .wire-page-header[data-variant="tinted"] {
      background:
      linear-gradient(135deg, var(--page-header-soft), transparent 72%),
      var(--wire-color-background);
    }

    .wire-page-header[data-variant="solid"] {
      color: #ffffff;
      background: var(--page-header-accent);
    }

    .wire-page-header[data-variant="minimal"] {
      background: transparent;
    }

    .wire-page-header[data-border-bottom="true"] {
      border-bottom: 1px solid var(--wire-color-border);
    }

    .wire-page-header[data-variant="solid"][data-border-bottom="true"] {
      border-bottom-color: rgba(255, 255, 255, 0.18);
    }

    .wire-page-header__decoration {
      position: absolute;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
    }

    .wire-page-header__glow {
      position: absolute;
      display: block;
      border-radius: 999px;
      filter: blur(60px);
      opacity: 0.17;
    }

    .wire-page-header__glow--one {
      top: -9rem;
      right: -5rem;
      width: 24rem;
      height: 24rem;
      background: var(--page-header-accent);
    }

    .wire-page-header__glow--two {
      bottom: -10rem;
      left: 18%;
      width: 18rem;
      height: 18rem;
      background: var(--page-header-muted);
      opacity: 0.13;
    }

    .wire-page-header__grid-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.2;
      background-image:
      linear-gradient(to right, var(--wire-color-border) 1px, transparent 1px),
      linear-gradient(to bottom, var(--wire-color-border) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 78%);
    }

    .wire-page-header[data-variant="minimal"] .wire-page-header__decoration,
    .wire-page-header[data-compact="true"] .wire-page-header__grid-pattern {
      display: none;
    }

    .wire-page-header[data-variant="solid"] .wire-page-header__grid-pattern {
      opacity: 0.1;
      background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
    }

    .wire-page-header__inner {
      position: relative;
      width: 100%;
      max-width: 80rem;
      margin-inline: auto;
      padding: 1.25rem 1rem 2.75rem;
    }

    .wire-page-header[data-max-width="compact"] .wire-page-header__inner,
    .wire-page-header[data-max-width="lg"] .wire-page-header__inner {
      max-width: 64rem;
    }

    .wire-page-header[data-max-width="wide"] .wire-page-header__inner,
    .wire-page-header[data-max-width="2xl"] .wire-page-header__inner {
      max-width: 90rem;
    }

    .wire-page-header[data-max-width="full"] .wire-page-header__inner {
      max-width: none;
    }

    .wire-page-header[data-compact="true"] .wire-page-header__inner {
      padding-top: 1rem;
      padding-bottom: 1.75rem;
    }

    .wire-page-header[data-size="lg"] .wire-page-header__inner {
      padding-bottom: 3.5rem;
    }

    .wire-page-header__breadcrumb {
      display: flex;
      align-items: center;
      min-width: 0;
      margin-bottom: 1.75rem;
      padding-bottom: 0.9rem;
      border-bottom: 1px solid var(--wire-color-border);
    }

    .wire-page-header[data-variant="solid"] .wire-page-header__breadcrumb {
      border-bottom-color: rgba(255, 255, 255, 0.18);
    }

    .wire-page-header[data-compact="true"] .wire-page-header__breadcrumb {
      margin-bottom: 1.25rem;
      padding-bottom: 0.7rem;
    }

    .wire-page-header__layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1.75rem;
      align-items: start;
    }

    .wire-page-header__content,
    .wire-page-header__copy {
      min-width: 0;
    }

    .wire-page-header__intro {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      min-width: 0;
    }

    .wire-page-header__icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 3.25rem;
      height: 3.25rem;
      margin-top: 0.15rem;
      color: var(--page-header-accent);
      background: var(--page-header-soft);
      border: 1px solid var(--page-header-muted);
      border-radius: 1rem;
      box-shadow: var(--wire-shadow-sm);
    }

    .wire-page-header[data-compact="true"] .wire-page-header__icon-wrap {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 0.8rem;
    }

    .wire-page-header[data-variant="solid"] .wire-page-header__icon-wrap {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.22);
    }

    .wire-page-header__icon {
      width: 1.35rem;
      height: 1.35rem;
    }

    .wire-page-header__eyebrow-row {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 0.65rem;
    }

    .wire-page-header__eyebrow-mark {
      width: 1.75rem;
      height: 2px;
      flex: 0 0 auto;
      background: var(--page-header-accent);
      border-radius: 999px;
    }

    .wire-page-header__eyebrow {
      margin: 0;
      color: var(--page-header-accent-text);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .wire-page-header[data-variant="solid"] .wire-page-header__eyebrow,
    .wire-page-header[data-variant="solid"] .wire-page-header__title,
    .wire-page-header[data-variant="solid"] .wire-page-header__description {
      color: #ffffff;
    }

    .wire-page-header[data-variant="solid"] .wire-page-header__eyebrow-mark {
      background: rgba(255, 255, 255, 0.8);
    }

    .wire-page-header__title {
      max-width: 54rem;
      margin: 0;
      color: var(--wire-color-text);
      font-size: clamp(2rem, 4vw, 3.75rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }

    .wire-page-header[data-compact="true"] .wire-page-header__title {
      font-size: clamp(1.75rem, 3vw, 2.65rem);
    }

    .wire-page-header[data-size="lg"] .wire-page-header__title {
      font-size: clamp(2.35rem, 5vw, 4.5rem);
    }

    .wire-page-header__description {
      max-width: 48rem;
      margin: 0.9rem 0 0;
      color: var(--wire-color-text-muted);
      font-size: 1rem;
      line-height: 1.75;
      text-wrap: pretty;
    }

    .wire-page-header[data-size="lg"] .wire-page-header__description {
      font-size: 1.075rem;
    }

    .wire-page-header[data-variant="solid"] .wire-page-header__description {
      opacity: 0.82;
    }

    .wire-page-header__meta:empty,
    .wire-page-header__body:empty,
    .wire-page-header__actions--slot-only:empty {
      display: none;
    }

    .wire-page-header__meta {
      margin-top: 1.1rem;
    }

    .wire-page-header__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
    }

    /*
     * Slot content is app-authored, so a bare `p { color: ... }` in the app
     * stylesheet beats anything this container merely passes down by
     * inheritance. State it, at a specificity the app can still override.
     */
    .wire-page-header__body {
      color: var(--wire-color-text);
      margin-top: 1.75rem;
    }

    .wire-page-header[data-align="center"] .wire-page-header__layout {
      justify-items: center;
      text-align: center;
    }

    .wire-page-header[data-align="center"] .wire-page-header__intro {
      flex-direction: column;
      align-items: center;
    }

    .wire-page-header[data-align="center"] .wire-page-header__eyebrow-row,
    .wire-page-header[data-align="center"] .wire-page-header__actions {
      justify-content: center;
    }

    .wire-page-header[data-align="center"] .wire-page-header__title,
    .wire-page-header[data-align="center"] .wire-page-header__description {
      margin-inline: auto;
    }

    .wire-page-header[data-align="right"] .wire-page-header__layout {
      justify-items: end;
      text-align: right;
    }

    .wire-page-header[data-align="right"] .wire-page-header__intro {
      flex-direction: row-reverse;
    }

    .wire-page-header[data-align="right"] .wire-page-header__eyebrow-row,
    .wire-page-header[data-align="right"] .wire-page-header__actions {
      justify-content: flex-end;
    }

    .wire-page-header[data-align="right"] .wire-page-header__title,
    .wire-page-header[data-align="right"] .wire-page-header__description {
      margin-left: auto;
    }

    @media (min-width: 640px) {
      .wire-page-header__inner {
        padding-inline: 1.5rem;
      }

      .wire-page-header__intro {
        gap: 1.25rem;
      }
    }

    @media (min-width: 1024px) {
      .wire-page-header__inner {
        padding-inline: 2rem;
      }

      .wire-page-header__layout {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 2.5rem;
      }

      .wire-page-header[data-align="center"] .wire-page-header__layout,
      .wire-page-header[data-align="right"] .wire-page-header__layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .wire-page-header__actions {
        align-self: start;
        justify-self: end;
        justify-content: flex-end;
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    @media (max-width: 639px) {
      .wire-page-header__intro {
        flex-direction: column;
      }

      .wire-page-header__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }

      .wire-page-header__action {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .wire-page-header__glow {
        filter: blur(52px);
      }
    }
  }
}