import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-toc-overlay',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="fixed inset-0 z-50 bg-black/50" (click)="close.emit()"></div>
    <div class="fixed inset-x-0 bottom-0 z-50 max-h-[70vh] rounded-t-2xl bg-white dark:bg-gray-900 shadow-2xl border-t border-gray-200 dark:border-gray-800">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
        <h2 class="text-base font-semibold">Sommaire</h2>
        <button (click)="close.emit()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">✕</button>
      </div>
      <div class="p-3 overflow-y-auto">
        <ul class="space-y-1 text-sm text-gray-700 dark:text-gray-300">
          <li *ngFor="let h of headings">
            <a (click)="onGo(h.id)" class="block px-2 py-1 rounded hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer" [style.paddingLeft.rem]="(h.level - 1) * 0.75">{{ h.text }}</a>
          </li>
        </ul>
      </div>
    </div>
  `
})
export class AppTocOverlayComponent {
  @Input() headings: Array<{ level: number; text: string; id: string }> = [];
  @Output() go = new EventEmitter<string>();
  @Output() close = new EventEmitter<void>();

  onGo(id: string) {
    this.go.emit(id);
  }
}