import {
  booleanAttribute,
  Component,
  computed,
  HostListener,
  inject,
  input,
  signal,
} from '@angular/core';
import { DomSanitizer, type SafeHtml } from '@angular/platform-browser';
import { Router } from '@angular/router';

import { AfricaniesIconComponent } from '@africanies/africanies-icons';
import { ButtonComponent, CopyButtonComponent } from '@africanies/africanies-ui';

import { highlightSnippetWithGlossary } from '../lecture/link-glossary-terms';

/**
 * Labeled demo canvas for showcasing a component variant group.
 * Optional `code` input reveals a Show code / Hide code toggle with a
 * syntax-highlighted, copyable implementation snippet.
 */
@Component({
  selector: 'app-demo-section',
  standalone: true,
  imports: [ButtonComponent, AfricaniesIconComponent, CopyButtonComponent],
  template: `
    <section
      class="flex flex-col gap-4"
      [attr.id]="anchorId() || null"
      [class.scroll-mt-24]="anchorId() !== null"
    >
      <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
        <div class="flex min-w-0 flex-col gap-1">
          <div class="flex flex-wrap items-center gap-2">
            <h2 class="m-0 text-heading-3 text-ink dark:text-white">{{ title() }}</h2>
            @if (badge()) {
              <span
                class="rounded-md bg-border px-2 py-0.5 text-caption text-neutral-600 dark:bg-white/10 dark:text-neutral-400"
              >
                {{ badge() }}
              </span>
            }
          </div>
          @if (hint()) {
            <p class="m-0 text-body-sm text-neutral-600 dark:text-neutral-400">
              {{ hint() }}
            </p>
          }
        </div>

        @if (hasCode()) {
          <button
            africanies-button
            type="button"
            variant="ghost"
            size="sm"
            class="shrink-0 self-start"
            [attr.aria-expanded]="codeOpen()"
            (click)="toggleCode()"
          >
            <africanies-icon [name]="codeOpen() ? 'close' : 'code'" [size]="14" />
            {{ codeOpen() ? 'Hide code' : 'Show code' }}
          </button>
        }
      </div>

      <div [class]="muted() ? 'pg-demo-muted' : 'pg-demo'">
        <ng-content />
      </div>

      @if (subtext()) {
        <p class="m-0 text-caption text-neutral-500 dark:text-neutral-400">
          {{ subtext() }}
        </p>
      }

      @if (hasCode() && codeOpen()) {
        <div
          class="overflow-hidden rounded-xl border border-border bg-[#1e1e1e] text-white dark:border-white/10"
        >
          <div
            class="flex items-center justify-between gap-2 border-b border-white/10 px-4 py-2"
          >
            <span class="text-caption font-medium uppercase tracking-wide text-white/50">
              Implementation
              <span class="ml-2 normal-case tracking-normal text-white/35">TypeScript</span>
            </span>
            <africanies-copy
              [value]="code()!"
              label="Copy"
              buttonClass="!text-white/80 hover:!bg-white/10 hover:!text-white"
            />
          </div>
          <pre
            class="pg-code-block m-0 max-h-[min(70vh,40rem)] overflow-auto p-4 font-mono text-caption leading-relaxed"
          ><code class="hljs language-typescript" [innerHTML]="highlightedCode()"></code></pre>
        </div>
      }
    </section>
  `,
})
export class DemoSectionComponent {
  private readonly sanitizer = inject(DomSanitizer);
  private readonly router = inject(Router);

  /** Section heading. */
  readonly title = input.required<string>();
  /** Optional id for deep links (`/models#country`). */
  readonly anchorId = input<string | null>(null);
  /** Optional supporting sentence under the title. */
  readonly hint = input<string | null>(null);
  /**
   * Optional gotcha / clarification under the live demo
   * (e.g. “`color` never appears in serialized params”).
   */
  readonly subtext = input<string | null>(null);
  /** Optional meta chip (e.g. "4 variants"). */
  readonly badge = input<string | null>(null);
  /** Use dashed muted canvas instead of solid white. */
  readonly muted = input(false, { transform: booleanAttribute });
  /**
   * Usage snippet shown when the visitor toggles “Show code”.
   * Omit (or pass null/empty) to hide the toggle.
   */
  readonly code = input<string | null>(null);

  protected readonly codeOpen = signal(false);

  protected readonly hasCode = computed(() => {
    const value = this.code();
    return value != null && value.trim().length > 0;
  });

  protected readonly highlightedCode = computed((): SafeHtml => {
    const value = this.code() ?? '';
    const html = highlightSnippetWithGlossary(value, 'typescript');
    // Snippets are authored in-repo; highlight.js returns escaped markup.
    return this.sanitizer.bypassSecurityTrustHtml(html);
  });

  protected toggleCode(): void {
    this.codeOpen.update((open) => !open);
  }

  /**
   * In-snippet glossary links use plain `<a>` tags — route in-app without reload.
   * @param event
   */
  @HostListener('click', ['$event'])
  protected onGlossaryLinkClick(event: MouseEvent): void {
    const anchor = (event.target as HTMLElement).closest('a.pg-glossary-link');
    if (!(anchor instanceof HTMLAnchorElement)) {
      return;
    }
    event.preventDefault();
    const url = new URL(anchor.href, window.location.origin);
    void this.router.navigate([url.pathname], {
      fragment: url.hash.replace(/^#/, '') || undefined,
    });
  }
}