import { Component, EventEmitter, Output, computed, signal, effect } from '@angular/core';
import { input } from '@angular/core';
import { CommonModule } from '@angular/common';
import type { Note } from '../../../types';
import { ScrollableOverlayDirective } from '../../shared/overlay-scrollbar/scrollable-overlay.directive';

@Component({
  selector: 'app-notes-list',
  standalone: true,
  imports: [CommonModule, ScrollableOverlayDirective],
  template: `
    <div class="h-full flex flex-col">
      <div class="p-2 border-b border-gray-200 dark:border-gray-800">
        <input type="text"
               [value]="query()"
               (input)="onQuery($any($event.target).value)"
               placeholder="Rechercher..."
               class="w-full rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2 text-sm" />
      </div>
      <div class="flex-1 min-h-0 overflow-y-auto list-scroll" appScrollableOverlay>
        <ul class="divide-y divide-gray-100 dark:divide-gray-800">
          <li *ngFor="let n of filtered()" class="p-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer" (click)="openNote.emit(n.id)">
            <div class="text-sm font-semibold truncate">{{ n.title }}</div>
            <div class="text-xs text-gray-500 truncate">{{ n.filePath }}</div>
          </li>
        </ul>
      </div>
    </div>
  `,
  styles: [`
    :host {
      display: block;
      height: 100%;
      min-height: 0; /* critical for nested flex scrolling */
    }

    /* Smooth, bounded vertical scrolling only on the list area */
    .list-scroll {
      overscroll-behavior: contain; /* prevent parent scroll chaining */
      -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
      scroll-behavior: smooth; /* smooth programmatic scrolls */
      scrollbar-gutter: stable both-edges; /* avoid layout shift when scrollbar shows */
      max-height: 100%; /* cap to available space within the central section */
      contain: content; /* small perf win for large lists */
    }
  `]
})
export class NotesListComponent {
  notes = input<Note[]>([]);
  folderFilter = input<string | null>(null); // like "folder/subfolder"
  query = input<string>('');
  tagFilter = input<string | null>(null);

  @Output() openNote = new EventEmitter<string>();
  @Output() queryChange = new EventEmitter<string>();

  private q = signal('');
  private syncQuery = effect(() => {
    this.q.set(this.query() || '');
  });

  filtered = computed(() => {
    const q = (this.q() || '').toLowerCase().trim();
    const folder = (this.folderFilter() || '').toLowerCase();
    const tag = (this.tagFilter() || '').toLowerCase();
    let list = this.notes();

    if (folder) {
      list = list.filter(n => (n.originalPath || '').toLowerCase().startsWith(folder));
    }

    if (tag) {
      list = list.filter(n => Array.isArray(n.tags) && n.tags.some(t => (t || '').toLowerCase() === tag));
    }

    // Apply query if present
    if (q) {
      list = list.filter(n => {
        const title = (n.title || '').toLowerCase();
        const filePath = (n.filePath || '').toLowerCase();
        return title.includes(q) || filePath.includes(q);
      });
    }

    // Sort by most recent first (mtime desc; fallback updatedAt/createdAt)
    const parseDate = (s?: string) => (s ? Date.parse(s) : 0) || 0;
    const score = (n: Note) => n.mtime || parseDate(n.updatedAt) || parseDate(n.createdAt) || 0;
    return [...list].sort((a, b) => (score(b) - score(a)));
  });

  onQuery(v: string) {
    this.q.set(v);
    this.queryChange.emit(v);
  }
}