import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
import { I18nService } from '../../core/i18n.service';
import { TaskView } from '../../core/models';
import { TaskCardComponent, ToggleEvent } from './task-card.component';

/** Vista TABLERO: dos columnas (cole / tarde) con las tareas del día. */
@Component({
  selector: 'app-board-view',
  imports: [TaskCardComponent],
  template: `
    <div class="board">
      <section class="col">
        <h2 class="col__head">🎒 {{ i18n.t('school') }}</h2>
        @if (morning.length) {
          @for (task of morning; track task.id) {
            <app-task-card [task]="task" [ttsEnabled]="ttsEnabled" (toggle)="toggle.emit($event)" />
          }
        } @else {
          <div class="empty">🏖️ {{ i18n.t('noSchool') }}</div>
        }
      </section>

      <section class="col">
        <h2 class="col__head">🌙 {{ i18n.t('afternoon') }}</h2>
        @if (afternoon.length) {
          @for (task of afternoon; track task.id) {
            <app-task-card [task]="task" [ttsEnabled]="ttsEnabled" (toggle)="toggle.emit($event)" />
          }
        } @else {
          <div class="empty">🌈 {{ i18n.t('freeAfternoon') }}</div>
        }
      </section>
    </div>
  `,
  styles: [
    `
      .board {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
      }
      @media (max-width: 760px) {
        .board { grid-template-columns: 1fr; }
      }
      .col { display: flex; flex-direction: column; gap: var(--space-3); }
      .col__head {
        margin: 0 0 var(--space-2);
        font-size: 1.4rem;
        color: var(--text-1);
      }
      .empty {
        padding: var(--space-6) var(--space-4);
        text-align: center;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--text-2);
        background: var(--surface);
        border: 2px dashed var(--border-2);
        border-radius: var(--radius-card);
      }
    `,
  ],
})
export class BoardViewComponent {
  @Input() morning: TaskView[] = [];
  @Input() afternoon: TaskView[] = [];
  @Input() ttsEnabled = true;
  @Output() toggle = new EventEmitter<ToggleEvent>();

  protected readonly i18n = inject(I18nService);
}